/* Supplied Noto Sans Arabic: SIL OFL 1.1; provenance in assets/fonts/noto-sans-arabic/. */
@font-face {
  font-family:"Noto Sans Arabic";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../../assets/fonts/noto-sans-arabic/noto-sans-arabic-arabic-variable.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF;
}
@font-face {
  font-family:"Noto Sans Arabic";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../../assets/fonts/noto-sans-arabic/noto-sans-arabic-latin-variable.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Shared palette, spacing, controls, and motion. Feature-specific values stay with their styles. */
/* Keep the scale small; one-off geometry belongs to its owning screen. */
:root {
  --app-nav-width:218px;
  --canvas:#fafafa;
  --block:#e8e8e8;
  --stroke:#d4d4d4;
  --text-muted:#626b76;
  --action-blue:#1cb0f6;
  --action-blue-shadow:#1899d6;
  --font-ui:"Noto Sans Arabic",Tahoma,Arial,sans-serif;
  --font-numeric:"Fredoka",ui-rounded,"Arial Rounded MT Bold",var(--font-ui);
  --font-code:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --type-title:800 clamp(1.5rem,3vw,2rem)/1.5 var(--font-ui);
  --type-section:800 1.25rem/1.5 var(--font-ui);
  --type-body:400 1rem/1.7 var(--font-ui);
  --type-control:700 .9375rem/1.5 var(--font-ui);
  --type-helper:600 .8125rem/1.6 var(--font-ui);
  --type-metric:800 1.875rem/1.2 var(--font-ui);
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --radius-control:14px;
  --radius-card:16px;
  --radius-panel:24px;
  --control-height:48px;
  --control-height-compact:44px;
  --control-height-prominent:52px;
  --control-edge:4px;
  --control-press:3px;
  --system-focus:#073b52;
  --system-white:#fff;
  --system-error:#a82424;
  --system-green:#58cc02;
  --system-green-ink:#153c08;
  --system-blue-action-ink:#073b52;
  /* Current product direction: original bright fills with white labels. */
  --system-action-ink:#fff;
  --system-blue-action:var(--action-blue);
  --system-blue-action-edge:var(--action-blue-shadow);
  --system-blue-action-hover:#29b8fa;
  --system-green-action:var(--system-green);
  --system-green-action-hover:#68d916;
  --system-green-action-edge:var(--system-green-edge);
  --system-red-ink:#5a1018;
  --system-green-edge:#46a302;
  --system-blue:var(--action-blue);
  --system-blue-ink:var(--action-blue);
  --system-blue-soft:#e8f7ff;
  --system-ink:#30475a;
  --system-number-ink:#475569;
  --system-muted:var(--text-muted);
  --system-border:var(--stroke);
  --header-height:64px;
  --main-top-gap:28px;
}
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; background:var(--canvas); color:var(--system-ink); font:var(--type-body); direction:rtl; }
button { appearance:none; }
.nav-item[hidden], [data-auth-sign-out][hidden] { display:none !important; }
button,input,select,textarea { font:inherit; }
.page { width:min(1240px, calc(100% - (var(--space-4) * 2))); margin:0 auto; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ui-number { font-family:var(--font-numeric); font-variant-numeric:tabular-nums; letter-spacing:.01em; }

.topbar-wrap { position:fixed; inset:0 0 auto; z-index:10; border-bottom:2px solid #e5e5e5; background:#fff; }
.topbar { height:var(--header-height); display:flex; align-items:center; gap:28px; }
.nav-links { display:flex; flex:1; align-items:center; direction:ltr; }
.topbar-auth-guest,.topbar-auth-member { display:flex; align-items:center; gap:10px; }
.topbar-auth-member[hidden],.topbar-auth-guest[hidden] { display:none; }
.guest-feature-gate { max-width:560px; display:grid; justify-items:center; gap:12px; margin:auto; padding:clamp(28px,6vw,54px); text-align:center; }
.guest-feature-gate>span { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:#eef2f5; }
.guest-feature-gate>span img { width:52px; height:52px; display:block; object-fit:contain; }
.guest-feature-gate h1,.guest-feature-gate p { margin:0; }
.guest-feature-gate h1 { color:#344251; font-size:clamp(26px,4vw,36px); }
.guest-feature-gate p { color:#74808d; font-weight:700; line-height:1.7; }
.guest-feature-gate>div { display:flex; gap:10px; margin-top:6px; }
.topbar-login,.topbar-create { min-height:var(--control-height-compact); display:inline-flex; align-items:center; justify-content:center; padding:var(--space-1) var(--space-3); border-radius:var(--radius-control); font:var(--type-control); text-align:center; cursor:pointer; transition:transform 140ms ease,box-shadow 140ms ease; }
.topbar-login { border:2px solid var(--system-border); background:var(--system-white); color:var(--system-blue-ink); box-shadow:0 var(--control-edge) 0 var(--system-border); }
.topbar-create { border:2px solid var(--system-blue-action); background:var(--system-blue-action); color:var(--system-action-ink); box-shadow:0 var(--control-edge) 0 var(--system-blue-action-edge); }
.topbar-login:active,.topbar-create:active { transform:translateY(var(--control-press)); }
.topbar-login:active { box-shadow:0 1px 0 var(--system-border); }
.topbar-create:hover { background:var(--system-blue-action-hover); border-color:var(--system-blue-action-hover); }
.topbar-create:active { box-shadow:0 1px 0 var(--system-blue-action-edge); }
.topbar-login:focus-visible,.topbar-create:focus-visible { outline:3px solid var(--system-focus); outline-offset:4px; }
.topbar-auth-member [data-account-label] { padding:8px 12px; border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:13px; font-weight:900; }
.nav-item { display:flex; flex:1; align-items:center; justify-content:center; gap:10px; min-width:var(--control-height-compact); height:var(--control-height-compact); padding:0 14px; border:2px solid transparent; border-radius:12px; background:transparent; color:#777; font-size:14px; font-weight:900; letter-spacing:0; cursor:pointer; transition:background-color 160ms ease, color 160ms ease, transform 120ms ease; }
.nav-item:hover { background:#f7f7f7; }
.nav-item:active { transform:translateY(1px); }
.nav-item.active { border-color:#84d8ff; background:#ddf4ff; color:#1899d6; }
.nav-item.active:hover { background:#ddf4ff; }
.nav-item:focus-visible { outline:3px solid var(--system-focus); outline-offset:2px; }
.nav-icon { width:32px; height:36px; display:grid; place-items:center; }
.nav-icon svg, .nav-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.app-stats-bar { position:fixed; z-index:11; top:0; right:0; width:var(--app-nav-width); height:80px; display:flex; align-items:center; justify-content:space-around; gap:6px; padding:0 12px; background:#fff; direction:ltr; }
.app-stat { display:inline-flex; align-items:center; gap:5px; color:#88939c; font:900 15px/1 var(--font-ui); white-space:nowrap; }
.app-stat img { display:block; width:28px; height:28px; object-fit:contain; }
.app-stat--streak img { filter:grayscale(1); opacity:.7; }
.app-stat--streak[data-streak-active="true"] { color:#ff9600; }
.app-stat--streak[data-streak-active="true"] img { filter:none; opacity:1; }
.app-stat--gems { color:#2bafd4; }
.app-stat--hearts { color:#e97cc1; }
body:is(.product-flow-active,.ui-lab-open,.rocky-lesson-open)>.app-stats-bar { display:none; }

@media (min-width:761px) {
  body:not(.product-flow-active) { background:#fff; }
  body:not(.product-flow-active) .topbar-wrap { inset:0 0 0 auto; width:var(--app-nav-width); border-bottom:0; border-left:2px solid #e5e5e5; box-shadow:none; }
  body:not(.product-flow-active) .topbar { width:100%; height:100%; flex-direction:column; align-items:stretch; gap:0; padding:102px 15px 24px; overflow:clip; }
  body:not(.product-flow-active) .nav-links { flex:0 0 auto; flex-direction:column; align-items:stretch; gap:8px; }
  body:not(.product-flow-active) .nav-item { flex:0 0 auto; display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; justify-items:start; width:100%; height:55px; gap:17px; padding:11px 14px; direction:rtl; text-align:right; font-family:var(--font-ui); font-size:15px; font-weight:900; }
  body:not(.product-flow-active) .nav-item>span { width:100%; text-align:right; }
  body:not(.product-flow-active) .topbar-auth { margin-top:auto; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar-auth-member { flex-direction:column; align-items:stretch; gap:10px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar-auth-member [data-account-label] { text-align:center; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar-login { width:100%; }
  body:not(.product-flow-active) main.page { width:auto; max-width:none; margin-right:calc(var(--app-nav-width) + 40px); margin-left:40px; padding-top:48px; }
}

@media (min-width:761px) and (max-height:650px) {
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar { padding-block:80px 16px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-links { gap:4px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-item { height:48px; padding-block:6px; }
}
@media (min-width:761px) and (max-height:500px) {
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar { padding-block:76px 12px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-links { gap:2px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-item { height:44px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar-profile { display:none; }
}

main { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-4); padding:calc(var(--header-height) + var(--main-top-gap)) 0 56px; direction:ltr; }
.column { grid-column:1; min-width:0; }
.column, .coming-soon, .lesson-view { direction:rtl; }

body[data-account-type="free"] .topbar-auth-member [data-account-label] {
  align-self:flex-end;
  margin-left:auto;
  margin-right:0;
  padding:6px 13px;
  border-radius:4px;
  background:#E1F2FF;
  color:#086694;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:20px;
}


.topbar-profile { display:flex; flex-direction:row; direction:rtl; align-items:center; justify-content:flex-start; gap:9px; }
.topbar-profile__avatar { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:#E1F2FF; color:#78A8CA; overflow:hidden; }
.topbar-profile__avatar svg { width:30px; height:30px; }
body[data-account-type="free"] .topbar-profile [data-account-label] { align-self:center; margin:0; }

.topbar-login[data-auth-sign-out] {
  border-color:var(--system-border);
  background:var(--system-white);
  color:var(--system-blue);
  box-shadow:0 var(--control-edge) 0 var(--system-border);
  transition:transform 140ms ease,box-shadow 140ms ease,background-color 160ms ease,border-color 160ms ease,color 160ms ease;
}
.topbar-login[data-auth-sign-out]:hover { background:#f7f7f7; }
.topbar-login[data-auth-sign-out]:active { background:var(--system-blue-soft); border-color:#69b1e1; color:var(--system-blue); box-shadow:0 1px 0 #91c8ec; }
@media (prefers-reduced-motion:reduce) {
  .topbar-login[data-auth-sign-out] { transition:none; }
}

/* Shared arrival motion: newly mounted/revealed components move with their screen. */
@keyframes app-component-arrive {
  from { opacity:0; translate:0 12px; }
  to { opacity:1; translate:0 0; }
}
@media (prefers-reduced-motion:no-preference) {
  :is(.subject-card, .coming-soon-card, .roadmap-unit,
      .ready-lesson-copy, .level-layout-action-group, .lesson-error,
      .guest-feature-gate, .lesson-rocky-preview):not([hidden]) {
    animation:app-component-arrive 360ms cubic-bezier(.22,1,.36,1) both;
  }
  .level-layout-action-group { animation-delay:60ms; }
  .subject-card:nth-child(2), .roadmap-unit:nth-child(2) { animation-delay:35ms; }
  .subject-card:nth-child(n+3), .roadmap-unit:nth-child(n+3) { animation-delay:70ms; }
}

/* Stable shell while session restoration determines the first route and account chrome. */
.app-loading { min-block-size:min(60vh,32rem); display:grid; place-content:center; gap:var(--space-2); padding:var(--space-4); color:var(--system-muted); text-align:center; font-size:16px; line-height:1.7; }
.app-loading p { margin:0; }

.nav-resources { display:none; }
body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-resources { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; padding:10px 0; }
.nav-resources img { display:block; flex-shrink:0; width:36px; height:36px; object-fit:contain; }
@media (min-width:761px) {
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-resources { position:fixed; z-index:11; top:32px; right:17px; width:229px; height:36px; padding:0; }
}
body:is(.product-flow-active,.ui-lab-open,.rocky-lesson-open)>.nav-resources { display:none; }
/* The shell owns its occupied viewport space; roadmap placement measures these surfaces. */
@media (min-width:761px) and (max-width:1099px) {
  body:is([data-account-type="free"],[data-account-type="subscribed"]) main.page:not(.lesson-mode):not(.coming-mode) { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .app-stats-bar { z-index:9; inset:0 0 auto; width:100%; height:54px; padding:0 18px; border-bottom:2px solid #e5e5e5; }
  .app-stat { font-size:14px; }
  .app-stat img { width:27px; height:28px; }
  body:not(.product-flow-active) { padding-bottom:calc(65px + env(safe-area-inset-bottom,0px)); }
  body:not(.product-flow-active) .topbar-wrap { inset:auto 0 0; padding-bottom:env(safe-area-inset-bottom,0px); border-top:0; border-bottom:0; }
  body:not(.product-flow-active) .topbar { width:100%; height:65px; gap:0; padding:0 8px; }
  body:not(.product-flow-active) .nav-links { width:100%; justify-content:space-around; gap:0; }
  body:not(.product-flow-active) .nav-item { flex:1 1 0; width:auto; min-width:36px; height:44px; padding:0; border-radius:11px; }
  body:not(.product-flow-active) .nav-item span { display:none; }
  body:not(.product-flow-active) .nav-icon { width:32px; height:36px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-resources img { width:28px; height:28px; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .nav-resources { position:fixed; z-index:9; inset:0 0 auto; min-height:68px; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px)); background:var(--system-white); border-bottom:2px solid #e5e7eb; }
  body:not(.product-flow-active) .topbar-auth { position:fixed; top:calc(8px + env(safe-area-inset-top,0px)); inset-inline-end:16px; }
  body:not(:is(.product-flow-active,.ui-lab-open,.rocky-lesson-open)) .topbar-auth { top:calc(60px + env(safe-area-inset-top,0px)); }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar-auth-member>.topbar-profile { display:none; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) [data-auth-sign-out] { display:none; }
  body:is([data-account-type="free"],[data-account-type="subscribed"]) .topbar-login { padding-inline:var(--space-2); font-size:.8125rem; }
  body:not(.product-flow-active) main.page { padding-top:calc(86px + env(safe-area-inset-top,0px)); padding-bottom:30px; }
  body:not(:is(.product-flow-active,.ui-lab-open,.rocky-lesson-open)) main.page { padding-top:calc(68px + env(safe-area-inset-top,0px)); }
  body[data-account-type="guest"]:not(:is(.product-flow-active,.ui-lab-open,.rocky-lesson-open)) main.page { padding-top:calc(116px + env(safe-area-inset-top,0px)); }
}
@media (min-width:561px) and (max-width:900px) {
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) .nav-item { padding-inline:var(--space-1); }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) .nav-item>span { display:none; }
}
@media (max-width:560px) {
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) { --header-height:113px; }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) .topbar { height:auto; min-height:112px; flex-wrap:wrap; gap:var(--space-1); padding-block:var(--space-1); }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) .nav-links { flex:1 0 100%; justify-content:space-around; gap:0; }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) .nav-item { flex:1 1 0; padding-inline:0; }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) .nav-item>span { display:none; }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) .topbar-auth { flex:1 0 100%; }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) :is(.topbar-auth-guest,.topbar-auth-member) { justify-content:center; gap:var(--space-1); }
  body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) :is(.topbar-login,.topbar-create) { flex:1; padding-inline:var(--space-1); font-size:.8125rem; }
}

.nav-resource { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-family:var(--font-ui); font-size:15px; font-weight:900; }
.nav-resource[hidden] { display:none; }
.nav-resource bdi { direction:ltr; }
.nav-resource--gems { color:#1cb0f6; }
.nav-resource--hearts { color:#ff4b4b; }
.nav-resource--freeze { color:var(--system-blue); }
.level-value { display:inline-flex; align-items:center; gap:5px; direction:ltr; white-space:nowrap; }
.nav-resources .level-up-arrow { width:18px; height:18px; }
@media (min-width:761px) { .nav-resources img { width:30px; height:30px; } }
@media (max-width:360px) {
  .nav-resources img { width:28px; height:28px; }
  .nav-resource { font-size:12px; }
  body:not(.product-flow-active) { padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
  body:not(.product-flow-active) .topbar { height:100px; min-height:100px; }
  body:not(.product-flow-active) .nav-links { flex-wrap:wrap; justify-content:center; gap:4px 0; }
  body:not(.product-flow-active) .nav-item { flex:0 0 25%; }
}
body[data-expanded-components="hidden"] [data-expanded-component] { display:none !important; }