/* Platform-wide refinements, loaded after the established home design. */
:root { color-scheme: light; background: #fff9f0; }
:root[data-theme="dark"] { color-scheme: dark; background: #14162e; }
:root[data-theme="dark"] body.premium-home { --bg: #14162e; --surface: #1e2140; --surface-alt: #2a2b50; --text: #faf5ff; --muted: #c2bddb; --primary: #c0a6ff; --primary-dark: #9c7bd9; --border: #383957; --text-soft: #aba1c9; --glass: rgba(20,22,46,.89); }
body.premium-home { --text-muted: var(--muted); --positive-bg: #e4f5ed; --warning-bg: #fff0cc; --danger-bg: #ffe7e5; --positive-ink: #18704f; --negative-ink: #ae3439; --success: #18704f; --accent: #ae3439; }
body.premium-home.dark { --positive-bg: #203f3c; --warning-bg: #493d26; --danger-bg: #4a2c3e; --positive-ink: #92e2bd; --negative-ink: #ffb2ac; --success: #92e2bd; --accent: #ffb2ac; }
html { scroll-padding-top: 125px; }
body { overflow-wrap: break-word; }
main { min-width: 0; }
main:focus { outline: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
input, select, textarea { min-width: 0; font: inherit; }
.premium-home :is(h1,h2,h3,h4,p) { overflow-wrap: anywhere; }
.premium-home .btn { min-height: 46px; }
.premium-home :is(.container, .hero-grid, .creative-grid, .footer-grid, .admin-content-grid) > * { min-width: 0; }
.skip-link { position: fixed; top: 8px; inset-inline-start: 16px; z-index: 200; padding: 10px 18px; border-radius: 12px; background: var(--surface); color: var(--text); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.premium-home .site-header { isolation: isolate; }
.premium-home .nav-wrap { grid-template-columns: auto minmax(0,1fr) auto; }
.premium-home .main-nav > a { padding-inline: 8px; font-size: .78rem; }
.premium-home .nav-tools { flex-shrink: 0; }
.premium-home .language-toggle { min-width: 44px; min-height: 44px; }
.premium-home .language-toggle-icon { display: block; width: 20px; height: 20px; }
.premium-home .theme-toggle { min-width: 44px; height: 44px; }
.premium-home .menu-toggle { min-width: 44px; height: 44px; }
.premium-home .mobile-nav-auth .account-pill { grid-column: 1/-1; width: 100%; white-space: normal; }
.premium-home .footer-shell { --footer-surface: #251d3b; --footer-line: #4a3a63; background: radial-gradient(ellipse at 80% 0%,#463462,transparent 60%),var(--footer-surface); }
.premium-home.dark .footer-shell { --footer-surface: #19182f; --footer-line: #383454; }
.premium-home .footer-shell .brand-name { display: grid; }
.premium-home .footer-contact-link { min-width: 0; }
.premium-home .site-footer .brand-name strong { color: #f8f1ff; }
.premium-home .site-footer .brand-name small { color: #c3b5d9; }
.dialog-open { overflow: hidden; }
.premium-home .modal { padding: 16px; overscroll-behavior: contain; }
.premium-home .modal-card { overscroll-behavior: contain; }
.premium-home .modal-card .btn { width: 100%; }
.premium-home .modal-form input, .premium-home .modal-form select { min-height: 48px; font-size: 1rem; }
.premium-home .registration-status { color: var(--success); }
.premium-home .registration-status.is-error { color: var(--accent); }

/* Interior page introductions and supporting content. */
.premium-home.secondary-page .muted-section { min-height: 0; padding-block: 64px 76px; }
.page-heading { padding-block: 56px 32px; max-width: 800px; }
.page-heading h1, .premium-home.secondary-page .section-heading h1 { font: 700 clamp(2.1rem,4vw,3.7rem)/1.35 var(--display-font); margin: 12px 0 18px; }
.page-heading > p, .page-intro { color: var(--muted); font-size: 1rem; line-height: 1.95; }
.eyebrow-label { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-alt); color: var(--primary); font-size: .78rem; font-weight: 700; }
.journey-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-block: 40px; }
.journey-step { padding: 25px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.journey-step > span { color: var(--primary); font: 600 .8rem/1 monospace; }
.journey-step h3 { font-family: var(--display-font); font-size: 1.4rem; margin: 14px 0 8px; }
.journey-step p { color: var(--muted); margin: 0; font-size: .88rem; }
.platform-callout { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 32px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(125deg,var(--surface-alt),var(--surface)); margin-block: 32px 0; }
.platform-callout h2 { font: 700 1.7rem/1.4 var(--display-font); margin: 0 0 8px; }
.platform-callout p { margin: 0; color: var(--muted); }
.platform-callout .btn { flex-shrink: 0; }
.faq-list { display: grid; gap: 12px; margin-block: 28px; }
.faq-list details { padding: 18px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.faq-list summary { font-weight: 700; cursor: pointer; padding-inline-end: 20px; }
.faq-list p { color: var(--muted); line-height: 1.9; }
.faq-list details[open] { border-color: var(--primary); }
.section-title { font: 700 clamp(1.6rem,3vw,2.2rem)/1.5 var(--display-font); margin: 40px 0 8px; }

/* A real learning hub and the six course destinations. */
.learning-hub { padding-bottom: 72px; }
.hub-toolbar { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-block: 20px 28px; }
.hub-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-filter button { padding: 10px 17px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 12px; cursor: pointer; min-height: 44px; }
.hub-filter button[aria-pressed="true"] { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.hub-note { color: var(--muted); font-size: .82rem; }
.hub-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.path-card { display: flex; flex-direction: column; gap: 16px; padding: 26px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); transition: border-color .2s, transform .2s; }
.path-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.path-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.path-symbol { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--surface-alt); font-size: 1.8rem; }
.path-age { font-size: .75rem; color: var(--muted); }
.path-card h2 { margin: 0; font: 600 1.6rem/1.3 'Fredoka','Cairo',sans-serif; }
.path-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.path-card .path-progress { margin-top: auto; }
.path-card .btn { justify-content: space-between; font-size: .85rem; }
.path-progress small { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.path-progress progress { width: 100%; height: 7px; accent-color: var(--primary); margin-block: 10px 2px; }
.learning-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .82rem; margin-bottom: 24px; }
.learning-breadcrumb a:hover { color: var(--primary); }
.premium-home .language-main { padding-block: 40px 72px; }
.premium-home .language-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; padding: clamp(24px,4vw,48px); background: radial-gradient(ellipse at 5% 10%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 65%),var(--surface); box-shadow: none; border-radius: 28px; }
.premium-home .language-hero h1 { font: 600 clamp(2.3rem,5vw,4rem)/1.25 'Fredoka','Cairo',sans-serif; margin: 18px 0; }
.premium-home .language-hero p { max-width: 670px; font-size: .95rem; }
.learning-orbit { display: grid; place-items: center; width: 150px; height: 150px; background: var(--surface-alt); border: 1px dashed var(--primary); border-radius: 38% 62% 55% 45%; font-size: 4rem; transform: rotate(-8deg); }
.learning-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.learning-facts span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: .75rem; color: var(--muted); }
.learning-local-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; margin-block: 18px 4px; }
.learning-local-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; color: var(--muted); font-size: .88rem; font-weight: 700; }
.learning-local-nav a:hover, .learning-local-nav a[aria-current] { border-color: var(--primary); background: var(--surface-alt); color: var(--primary); }
.learning-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-block: 22px; }
.learning-summary > div { padding: 18px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.learning-summary strong { display: block; font-size: 1.65rem; font-weight: 700; }
.learning-summary span { font-size: .78rem; color: var(--muted); }
.premium-home .language-section { padding: 28px; box-shadow: none; scroll-margin-top: 125px; }
.premium-home .language-section > .section-heading { margin-bottom: 22px; }
.premium-home .language-section h2 { font: 700 clamp(1.6rem,3vw,2.15rem)/1.5 var(--display-font); }
.premium-home .learning-card { padding: 24px; box-shadow: none; background: var(--bg); }
.premium-home .iq-tabs { gap: 12px; }
.premium-home .iq-tab { display: flex; align-items: center; gap: 10px; padding: 16px; min-height: 72px; text-align: start; border-radius: 16px; font-size: .95rem; background: var(--bg); color: var(--text); border-color: var(--border); }
.premium-home .iq-tab:hover, .premium-home .iq-tab.active { background: var(--surface-alt); color: var(--primary); border-color: var(--primary); }
.premium-home .motion-games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.premium-home .motion-game-card { padding: 18px; min-height: 90px; background: var(--bg); }
.premium-home .motion-game-card strong { font-size: .95rem; }
.premium-home .answer-option, .premium-home .iq-answer { text-align: start; }
.premium-home .motion-cell.motion-player { background: var(--positive-bg); }
.premium-home .motion-cell:is(.motion-goal,.motion-star) { background: var(--warning-bg); }
.premium-home .motion-cell.motion-hazard { background: var(--danger-bg); }
.premium-home .typed-character { color: var(--success); }
.premium-home .typing-target .current-character { color: var(--bg); }
.premium-home .maze-controls { direction: ltr; }
.premium-home .maze-tile.maze-wall { background: var(--positive-bg); }
.premium-home .maze-tile.maze-star { background: var(--warning-bg); }
.premium-home .maze-tile.maze-goal { background: var(--surface-alt); }
.premium-home .maze-player { background: var(--positive-bg); }
.touch-controls { display: grid; grid-template-columns: repeat(3,48px); justify-content: center; gap: 7px; direction: ltr; margin: 20px auto; }
.touch-controls button { min-height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); color: var(--text); cursor: pointer; font-size: 1.25rem; }
.touch-controls [data-game-key="ArrowUp"] { grid-column: 2; }
.touch-controls [data-game-key="ArrowLeft"] { grid-column: 1; grid-row: 2; }
.touch-controls [data-game-key="ArrowDown"] { grid-column: 2; grid-row: 2; }
.touch-controls [data-game-key="ArrowRight"] { grid-column: 3; grid-row: 2; }
.game-restart { display: block; margin: 16px auto; }

/* Admin uses the same shell, type and surfaces as the learner experience. */
.premium-home .admin-shell { width: min(1376px,calc(100% - 48px)); margin: 34px auto 64px; grid-template-columns: 220px minmax(0,1fr); gap: 24px; min-height: auto; background: transparent; }
.premium-home .admin-sidebar { align-self: start; position: sticky; top: 125px; padding: 24px 16px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); }
.premium-home .admin-brand { gap: 10px; }
.premium-home .admin-brand small { color: var(--muted); }
.premium-home .admin-nav a { color: var(--muted); }
.premium-home .admin-nav a.active, .premium-home .admin-nav a:hover { background: var(--surface-alt); color: var(--primary); }
.premium-home .admin-side-card { padding: 14px; background: var(--bg); border-color: var(--border); }
.premium-home .admin-side-card p { color: var(--muted); font-size: .8rem; }
.premium-home .admin-main { padding: 12px 0; min-width: 0; }
.premium-home .admin-overview { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.premium-home .admin-content-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.premium-home .admin-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); box-shadow: none; border-radius: 22px; }
.premium-home .admin-panel { padding: 24px; overflow: visible; }
.premium-home .admin-header h1 { font-family: var(--display-font); }
.premium-home .admin-data-note, .premium-home .feedback-empty { color: var(--muted); }
.premium-home .admin-table-wrap { max-width: 100%; overflow-x: auto; border-radius: 12px; overscroll-behavior-x: contain; }
.premium-home .admin-table { min-width: 600px; }
.premium-home .admin-table :is(td,th) { text-align: start; }
.premium-home .student-list li { align-items: start; gap: 12px; }
.premium-home .student-list a { color: var(--primary); font-size: .82rem; }
.premium-home .admin-nav { scrollbar-width: thin; }
.admin-preferences { display: flex; flex-wrap: wrap; gap: 12px; }
.admin-preferences button { min-height: 46px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); cursor: pointer; }

/* Keep the existing logo exploration page within the shared platform shell. */
.logo-lab { padding-bottom: 64px; }
.logo-lab .options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.logo-lab article { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); text-align: center; }
.logo-lab .logo { width: 150px; height: 150px; }
.logo-lab .logo svg { width: 100%; height: 100%; }
.logo-lab .number, .logo-lab .category { color: var(--muted); font-size: .75rem; }
.logo-lab .number { position: absolute; inset-inline-start: 14px; top: 14px; }
.logo-lab .wordmark strong, .logo-lab .caption b { display: block; }
.logo-lab .wordmark strong { font-size: 1.5rem; color: var(--text); }
.logo-lab .wordmark small { color: var(--muted); letter-spacing: .15em; }
.logo-lab .caption { font-size: .85rem; color: var(--muted); }
.logo-lab .caption b { color: var(--text); margin-bottom: 6px; }

@media (max-width: 1320px) {
  .premium-home .nav-wrap { grid-template-columns: auto auto; }
  .premium-home .nav-enhanced .menu-toggle { display: block; }
  .premium-home .main-nav { position: absolute; top: calc(100% + 10px); inset-inline: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: auto; padding: 18px; gap: 8px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); max-height: calc(100dvh - 125px); overflow-y: auto; }
  .premium-home .main-nav > a { font-size: .88rem; padding: 13px 16px; background: var(--bg); }
  .premium-home .mobile-nav-auth { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--border); margin-top: 7px; padding-top: 15px; }
  .premium-home .mobile-nav-auth .btn { flex: 1; padding: 12px; }
  .premium-home .nav-actions .nav-auth { display: none; }
}
@media (max-width: 1000px) {
  .hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .premium-home .admin-shell { grid-template-columns: minmax(0,1fr); }
  .premium-home .admin-sidebar { position: static; }
  .premium-home .admin-brand, .premium-home .admin-side-card { display: none; }
  .premium-home .admin-nav { display: flex; overflow-x: auto; padding-bottom: 3px; gap: 6px; }
  .premium-home .admin-nav a { flex: 0 0 auto; white-space: nowrap; }
  .logo-lab .options { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .premium-home .container { width: calc(100% - 32px); }
  .premium-home .nav-wrap { width: calc(100% - 20px); min-height: 68px; gap: 6px; padding: 10px 12px; }
  .premium-home .brand-name { display: grid; }
  .premium-home .nav-tools .language-toggle { display: inline-flex; padding-inline: 7px; width: auto; }
  .premium-home .language-toggle-label { display: inline; font-size: .73rem; }
  .premium-home .language-toggle-icon { display: none; }
  .premium-home .main-nav { width: auto; grid-template-columns: 1fr 1fr; padding: 12px; }
  .premium-home .main-nav > a { white-space: normal; }
  .premium-home .mobile-nav-auth { flex-direction: row; }
  .premium-home .site-footer .footer-shell { width: calc(100% - 20px); }
  .premium-home .footer-contact-link bdi { font-size: .73rem; }
  .premium-home .footer-grid, .footer-launch { padding-inline: 22px; }
  .footer-bottom { margin-inline: 22px; }
  .journey-strip { grid-template-columns: 1fr; }
  .platform-callout { flex-direction: column; align-items: start; padding: 24px; }
  .premium-home.secondary-page .muted-section { padding-block: 36px 56px; }
  .page-heading { padding-block: 36px 16px; }
  .premium-home .language-main { padding-top: 24px; }
  .premium-home .language-hero { grid-template-columns: minmax(0,1fr); padding: 26px 20px; }
  .learning-orbit { display: none; }
  .learning-summary { gap: 8px; }
  .learning-summary > div { padding: 14px 10px; }
  .learning-summary strong { font-size: 1.4rem; }
  .learning-summary span { font-size: .7rem; }
  .premium-home .language-section { padding: 22px 16px; }
  .premium-home .learning-card { padding: 18px 14px; }
  .premium-home .exam-intro { align-items: stretch; }
  .premium-home .exam-intro .btn { width: 100%; }
  .premium-home .iq-tabs { gap: 8px; }
  .premium-home .iq-tab { font-size: .85rem; padding: 12px; }
  .premium-home .motion-game-card { padding: 12px; gap: 9px; }
  .premium-home .motion-heading { flex-wrap: wrap; }
  .premium-home .admin-shell { width: calc(100% - 32px); margin-top: 24px; gap: 10px; }
  .premium-home .admin-content-grid { grid-template-columns: minmax(0,1fr); }
  .premium-home .admin-panel { padding: 20px 16px; }
  .premium-home .admin-header { flex-direction: column; align-items: start; }
  .logo-lab .options { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .premium-home .brand-name strong { font-size: 1.05rem; }
  .premium-home .brand-name small { display: none; }
  .premium-home .nav-tools { gap: 2px; }
  .premium-home .nav-actions { gap: 2px; }
  .premium-home .nav-wrap { padding-inline: 9px; }
  .hub-grid { grid-template-columns: minmax(0,1fr); }
  .path-card { padding: 24px; }
  .premium-home .answer-options, .premium-home .iq-answers { grid-template-columns: minmax(0,1fr); }
  .premium-home .motion-games-grid { grid-template-columns: minmax(0,1fr); }
  .premium-home .iq-tabs { grid-template-columns: 1fr; }
  .learning-local-nav { gap: 6px; }
  .learning-local-nav a { flex: 1; justify-content: center; padding-inline: 9px; font-size: .8rem; }
  .premium-home .admin-overview { gap: 10px; }
  .premium-home .stats-card { padding: 18px 14px; }
  .premium-home .stats-card strong { font-size: 1.8rem; }
  .premium-home .stats-card span, .premium-home .stats-card small { font-size: .73rem; }
  .logo-lab .options { grid-template-columns: minmax(0,1fr); }
  .premium-home .footer-bottom { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .premium-home .site-header .brand-name { display: none; }
  .premium-home .nav-tools .language-toggle { display: inline-flex; }
  .premium-home .hero-copy h1 { font-size: 2.05rem; }
  .learning-summary { grid-template-columns: minmax(0,1fr); }
  .learning-summary > div { display: flex; align-items: center; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}