/* General English A1 — design system
   Light only: cream paper, warm ink, one yellow and one purple. Pill buttons, 1px lines, flat surfaces.
   Arabic interface (RTL) with English kept in its own LTR runs (.en). Text itself never animates:
   only shapes, bars and icons move (Safari breaks Arabic letter marks under transforms). */

@font-face { font-family: 'Readex Pro'; font-weight: 160 700; font-display: swap;
  src: url(fonts/ReadexPro-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Readex Pro'; font-weight: 160 700; font-display: swap;
  src: url(fonts/ReadexPro-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Readex Pro'; font-weight: 160 700; font-display: swap;
  src: url(fonts/ReadexPro-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #FBF7EC;
  --band: #F0E9D6;
  --card: #FFFDF6;
  --sunk: #F5F0E1;
  --line: #E4DCC6;
  --line-2: #D3C9AE;
  --ink: #26211C;
  --ink-2: #6F675A;
  --ink-3: #9C9381;
  --yellow: #F5B820;
  --yellow-soft: #FCEFC6;
  --purple: #8A68DC;
  --purple-ink: #5B3FB0;
  --purple-soft: #ECE5FA;
  --flame: #E5532D;
  /* the five looks' metals (GE.badge): the disc, its shine, its deep parts */
  --bronze: #C7864A; --bronze-hi: #EDBE90; --bronze-lo: #8F552A;
  --silver: #C2C8D1; --silver-hi: #F3F5F8; --silver-lo: #858E9C;
  --gold: #F0B429; --gold-hi: #FFE38F; --gold-lo: #B57C08;
  --platinum: #8DCFCB; --platinum-hi: #E0F5F3; --platinum-lo: #3F928E;
  --diamond: #7AB0F4; --diamond-hi: #E3EFFF; --diamond-lo: #8667DD;
  --ok: #2E8B57;
  --ok-soft: #E3F2E7;
  --bad: #CF4436;
  --bad-soft: #FBE5E1;
  --r: 12px;        /* buttons, chips, small boxes */
  --r-lg: 18px;     /* answer tiles, inner cards */
  --r-xl: 26px;     /* panels and big cards, like the unit squares */
  --side: 248px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
svg { display: block; flex: none; }
h1, h2, h3, p { margin: 0; }
.en { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.en-block { display: block; direction: ltr; text-align: left; unicode-bidi: isolate; }
.muted { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------- app shell */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 28px 18px 18px; border-inline-end: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; padding-inline: 10px; margin-block-end: 40px; }
.brand__mark { width: 40px; height: 40px; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-weight: 700; font-size: 17px; letter-spacing: -.02em; border-radius: var(--r); }
.brand__name { font-weight: 600; font-size: 17px; line-height: 1.2; }
.brand__name small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-2); }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: var(--r); color: var(--ink-2); font-weight: 500; transition: background .15s; }
.nav a svg { color: var(--purple); width: 22px; height: 22px; }
.nav a:hover { background: var(--band); color: var(--ink); }
.nav a[aria-current=page] { color: var(--ink); background: var(--band); }
.nav a[aria-current=page] svg { color: var(--purple-ink); }
.side__promo { margin-block-start: auto; position: relative; background: var(--yellow); padding: 46px 18px 18px; text-align: center; border-radius: var(--r); }
.side__promo .badge-ico { position: absolute; inset-block-start: -26px; inset-inline-start: 50%; translate: -50% 0; width: 52px; height: 52px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); display: grid; place-items: center; }
[dir=rtl] .side__promo .badge-ico { translate: 50% 0; }
.side__promo h3 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.side__promo p { font-size: 13px; margin-block: 6px 14px; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.side__promo h3 + .btn { margin-block-start: 14px; }

.main { min-width: 0; padding: 20px clamp(16px, 3vw, 44px) 64px; }
.top { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-block-end: 22px; }
.top__title { font-size: 15px; color: var(--ink-2); }
.top__sp { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 14px; background: var(--band); border-radius: var(--r); font-weight: 500; font-size: 15px; }
.chip svg { width: 22px; height: 22px; }
.chip--xp svg { color: var(--flame); }
.chip--streak.is-on svg { color: var(--flame); }
/* the points chip: rank, points and a thin bar to the next rank */
.chip--xp { gap: 10px; transition: background .15s; }
.chip--xp:hover { background: var(--line); }
.xpr { display: grid; gap: 6px; min-width: 104px; }
.xpr__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1; }
.xpr__top b { font-weight: 600; }
.xpr__top .num { color: var(--ink-2); }
.xpr .bar { height: 6px; background: rgba(38, 33, 28, .12); }
/* the two chips come alive: the medal turns like a coin, the bar fills and glints, the flame flickers; the words stay still */
@media (prefers-reduced-motion: no-preference) {
  .chip--xp .badge { animation: coinIn .9s var(--ease) both, coinTurn 9s 2s ease-in-out infinite; }
  .chip--xp:hover .badge { animation: coinSpin .7s var(--ease); }
  .xpr .bar i { position: relative; overflow: hidden; animation: barFill 1.1s .25s var(--ease) both; }
  .xpr .bar i::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); --dir: -1; transform: translateX(calc(var(--dir) * -120%)); animation: barGlint 4.5s 1.6s ease-in-out infinite; }
  [dir=ltr] .xpr .bar i::after { --dir: 1; }
  .chip--streak svg { animation: flameIn .6s .3s cubic-bezier(.3, 1.6, .5, 1) both; transform-origin: 50% 90%; }
  .chip--streak.is-on svg { animation: flameIn .6s .3s cubic-bezier(.3, 1.6, .5, 1) both, flicker 1.8s .9s ease-in-out infinite; }
  @keyframes coinIn { from { transform: perspective(160px) rotateY(-270deg) scale(.4); opacity: 0; } }
  @keyframes coinTurn { 0%, 90% { transform: perspective(160px) rotateY(0); } 100% { transform: perspective(160px) rotateY(360deg); } }
  @keyframes coinSpin { to { transform: perspective(160px) rotateY(360deg); } }
  @keyframes barFill { from { transform: scaleX(0); } }
  @keyframes barGlint { 0% { transform: translateX(calc(var(--dir) * -120%)); } 30%, 100% { transform: translateX(calc(var(--dir) * 240%)); } }
  @keyframes flameIn { from { transform: scale(0); } }
  @keyframes flicker { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(.94, 1.08) rotate(-3deg); } 50% { transform: scale(1.04, .96); } 75% { transform: scale(.97, 1.05) rotate(3deg); } }
}
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 18px; }

/* menu icons move on hover, each its own way; the words stay still */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nav a svg, .tabbar a svg, .nav a svg *, .tabbar a svg * { transform-box: fill-box; transform-origin: center; }
  :is(.nav, .tabbar) a[data-i=home]:hover svg { animation: navHop .55s cubic-bezier(.3, 1.6, .5, 1); transform-origin: bottom; }
  :is(.nav, .tabbar) a[data-i=path]:hover svg path { stroke-dasharray: 40; animation: navDraw .7s ease-out; }
  :is(.nav, .tabbar) a[data-i=path]:hover svg circle { animation: navPop .45s ease-out; }
  :is(.nav, .tabbar) a[data-i=path]:hover svg circle + circle { animation-delay: .5s; }
  :is(.nav, .tabbar) a[data-i=cards]:hover svg path { animation: navDeal .6s ease-in-out; }
  :is(.nav, .tabbar) a[data-i=cards]:hover svg rect { animation: navTilt .6s ease-in-out; }
  :is(.nav, .tabbar) a[data-i=practice]:hover svg { animation: navSpin .7s cubic-bezier(.5, 0, .2, 1); }
  :is(.nav, .tabbar) a[data-i=trophy]:hover svg { animation: navCheer .65s ease-in-out; transform-origin: bottom; }
  @keyframes navHop { 35% { transform: translateY(-5px) scale(.94, 1.08); } 70% { transform: translateY(0) scale(1.1, .9); } }
  @keyframes navDraw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
  @keyframes navPop { 50% { transform: scale(1.45); } }
  @keyframes navDeal { 45% { transform: translate(3px, -3px); } }
  @keyframes navTilt { 45% { transform: rotate(-8deg); } }
  @keyframes navSpin { to { transform: rotate(360deg); } }
  @keyframes navCheer { 25% { transform: translateY(-3px) rotate(-12deg); } 55% { transform: translateY(-3px) rotate(10deg); } 80% { transform: rotate(-4deg); } }
}

/* mobile: the sidebar becomes a floating bar; the page you're on is a dark pill with its name, the rest are icons */
.tabbar { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding-block-end: calc(112px + env(safe-area-inset-bottom)); }
  .tabbar { display: flex; align-items: center; gap: 4px; position: fixed; z-index: 30; inset-inline: 12px; inset-block-end: calc(10px + env(safe-area-inset-bottom)); padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 10px 30px rgba(38, 33, 28, .14); }
  .tabbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding-inline: 12px; border-radius: var(--r-lg); color: var(--ink-3); font-size: 14px; font-weight: 600; transition: background .15s, color .15s; }
  .tabbar a svg { width: 22px; height: 22px; flex: none; }
  .tabbar a:not([aria-current=page]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* still read out */
  .tabbar a:not([aria-current=page]):hover { color: var(--ink); background: var(--sunk); }
  .tabbar a[aria-current=page] { flex: 0 0 auto; padding-inline: 16px 18px; background: var(--ink); color: var(--paper); }
  .chip { height: 40px; padding-inline: 10px; font-size: 14px; }
  .xpr { min-width: 78px; }
  .xpr__top { font-size: 12px; gap: 8px; }
  .avatar { width: 40px; height: 40px; }
  .top__brand { display: flex !important; }
  .top__title { display: none; }
}
.top__brand { display: none; align-items: center; gap: 8px; font-weight: 600; }
.top__brand .brand__mark { width: 34px; height: 34px; font-size: 14px; }
/* phones: the top row fits in one line. The logo keeps only its mark, the streak only its flame and number
   (both still read out), and the save button never gets squeezed */
@media (max-width: 520px) {
  .top { gap: 6px; }
  .top__sp { display: none; }
  .top .chip--xp { margin-inline-start: auto; }
  .top__name, .chip__unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chip { padding-inline: 9px; gap: 6px; }
  .chip--xp { gap: 8px; }
  .xpr { min-width: 64px; }
  .top > .btn--sm { flex: none; white-space: nowrap; padding-inline: 12px; font-size: 13px; }
}
@media (max-width: 360px) {
  .top__brand { display: none !important; }   /* the bottom bar already leads home */
  .xpr__top .num { display: none; }   /* the points stay on «جوائزي»; the bar still shows how close the next rank is */
}

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: background .15s, transform .1s, opacity .15s; }
.btn svg { width: 18px; height: 18px; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover:not(:disabled) { background: #3A332B; }
.btn--tactile { background: var(--ink); color: var(--paper); box-shadow: 0 4px 0 #000; }
.btn--tactile:hover { background: #3A332B; }
.btn--tactile:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.btn--light { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }
.btn--light:hover { background: var(--sunk); }
.btn--ghost { color: var(--ink-2); min-height: 44px; padding: 0 12px; }
.btn--ghost:hover { color: var(--ink); background: var(--band); }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.arrow-ne { transform: scaleX(-1); } /* the ↗ arrow points the reading way in RTL */

.sound { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: var(--purple-soft); color: var(--purple-ink); transition: background .15s, transform .1s; }
.sound:hover { background: #E1D6F8; }
.sound:active { transform: scale(.94); }
.sound svg { width: 22px; height: 22px; }
.sound.is-playing svg { animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }

/* ---------- section headings */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-block-end: 18px; }
.sec-head h2 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.sec-head a { color: var(--ink-2); font-size: 15px; }
.sec-head a:hover { color: var(--ink); }
.eyebrow { font-size: 14px; color: var(--ink-2); }

/* ---------- progress bar */
.bar { height: 8px; background: var(--band); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--purple); border-radius: inherit; transform-origin: right; transition: transform .8s var(--ease); }
[dir=ltr] .bar i { transform-origin: left; }

/* ---------- reveal on scroll (shapes and cards fade only; no movement on text) */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .rv.in { opacity: 1; }
}

/* ---------- dialogs (onboarding, confirm) */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(38, 33, 28, .42); display: grid; place-items: center; padding: 16px; }
.dialog { width: min(480px, 100%); background: var(--card); border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line); }
.dialog h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin-block-end: 6px; }
.dialog .row { display: flex; gap: 10px; margin-block-start: 22px; }
.dialog .row .btn { flex: 1; }
.field { width: 100%; height: 54px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--paper); padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); }
.field:focus { outline: none; border-color: var(--purple); background: var(--card); }
.opts { display: grid; gap: 8px; margin-block-start: 16px; }
.opt-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); text-align: start; transition: border-color .15s, background .15s; }
.opt-row:hover { border-color: var(--line-2); }
.opt-row[aria-pressed=true] { border-color: var(--ink); background: var(--yellow-soft); }
.opt-row b { font-weight: 600; }
.opt-row span { color: var(--ink-2); font-size: 14px; margin-inline-start: auto; }
.steps-dots { display: flex; gap: 6px; margin-block-end: 18px; }
.steps-dots i { width: 22px; height: 4px; border-radius: 4px; background: var(--line); }
.steps-dots i.on { background: var(--ink); }

/* ---------- toast */
.toast { position: fixed; z-index: 70; inset-block-end: 24px; inset-inline-start: 50%; translate: 50% 0; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r); font-size: 15px; }
[dir=ltr] .toast { translate: -50% 0; }

/* big boxes share the unit squares' rounding */
.side__promo, .dialog { border-radius: var(--r-xl); }

/* ---------- button motion. The label never moves (Safari breaks Arabic letters under transforms): a light sweeps
   across on hover, the arrow or icon slides and wiggles, a ripple spreads from the tap (core.js), tactile buttons
   swap their lip for a deeper one, and the main call to action glows now and then. */
.btn, .ubtn { position: relative; isolation: isolate; overflow: hidden; transition: background .2s, box-shadow .2s, color .2s, border-color .2s; }
.btn::before, .ubtn::before { content: ''; position: absolute; z-index: -1; inset-block: 0; width: 60%; inset-inline-start: -70%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); pointer-events: none; }
.btn--light::before, .btn--ghost::before { background: linear-gradient(100deg, transparent, rgba(245, 184, 32, .28), transparent); }
.btn svg, .ubtn svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn--tactile:hover:not(:disabled), .btn--check:hover:not(:disabled) { box-shadow: 0 6px 0 #000; }
.btn--tactile:active:not(:disabled), .btn--check:active:not(:disabled) { box-shadow: 0 1px 0 #000; }
.ripple { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled)::before, .ubtn:hover::before { animation: sweep .75s ease-out; }
  @keyframes sweep { to { inset-inline-start: 120%; } }
  .btn:hover:not(:disabled) .arrow-ne { transform: scaleX(-1) translate(4px, -3px); }   /* still mirrored, nudged toward the reading direction */
  .btn:hover:not(:disabled) svg:not(.arrow-ne), .ubtn:hover svg { animation: btnWig .5s ease-in-out; }
  @keyframes btnWig { 30% { transform: rotate(-12deg) scale(1.12); } 65% { transform: rotate(8deg); } }
}
@media (prefers-reduced-motion: no-preference) {
  .btn--glow:not(:disabled) { animation: glowCta 2.8s ease-in-out 1.2s infinite; }
  @keyframes glowCta { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 32, 0); } 82% { box-shadow: 0 0 0 9px rgba(245, 184, 32, .45); } }
  .btn--tactile.btn--glow:not(:disabled) { animation-name: glowTactile; }
  @keyframes glowTactile { 0%, 70%, 100% { box-shadow: 0 4px 0 #000, 0 0 0 0 rgba(245, 184, 32, 0); } 82% { box-shadow: 0 4px 0 #000, 0 0 0 9px rgba(245, 184, 32, .45); } }
  .btn.ready { animation: ready .5s ease-out; }
  @keyframes ready { from { box-shadow: 0 4px 0 #000, 0 0 0 0 rgba(138, 104, 220, .6); } to { box-shadow: 0 4px 0 #000, 0 0 0 12px rgba(138, 104, 220, 0); } }
}

/* ---------- account menu (top bar) */
.acct { position: relative; }
.avatar { cursor: pointer; }
.acct__menu { position: absolute; z-index: 40; inset-block-start: calc(100% + 8px); inset-inline-end: 0; width: 260px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: 0 16px 40px -20px rgba(38, 33, 28, .45); display: grid; gap: 4px; }
.acct__menu[hidden] { display: none; }
.acct__menu b { font-size: 16px; }
.acct__menu .en { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.acct__menu p { display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 13px; margin-block: 8px 10px; }

/* ---------- the learner's look (GE.badge): the points chip leads with it, the avatar wears its metal */
.chip .badge { width: 32px; height: 32px; margin-inline-start: -6px; }
.avatar { position: relative; transition: box-shadow .2s; }
.avatar--l1 { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--bronze); }
.avatar--l2 { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--silver-lo); }
.avatar--l3 { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold); }
.avatar--l4 { background: var(--platinum-lo); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--platinum), 0 0 0 6px var(--ink); }
.avatar--l5 { background: var(--ink); color: var(--diamond-hi); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--diamond), 0 0 0 6px var(--diamond-lo), 0 0 14px 4px rgba(122, 176, 244, .5); }
.acct__look { display: flex; align-items: center; gap: 10px; padding-block-end: 12px; margin-block-end: 8px; border-block-end: 1px solid var(--line); }
.acct__look span { display: grid; font-weight: 600; font-size: 15px; line-height: 1.3; }
.acct__look small { font-weight: 400; font-size: 13px; color: var(--ink-2); }

/* the top's two chips sit together in one pill, split by a thin line (rank and points | streak) */
.chips-top { display: inline-flex; align-items: center; padding: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.chips-top .chip { background: none; height: 40px; border-radius: 999px; }
.chips-top .chip + .chip { border-inline-start: 1px solid var(--line); border-radius: 0 999px 999px 0; }
[dir=rtl] .chips-top .chip + .chip { border-radius: 999px 0 0 999px; }
.chips-top .chip--xp:hover { background: var(--sunk); }

/* the top bar's search (after the Toko dashboard): a quiet pill that opens «كلماتي» filtered */
.top__search { display: flex; align-items: center; gap: 8px; width: min(320px, 34vw); height: 44px; padding-inline: 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-3); }
.top__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.top__search input:focus { outline: none; }
.top__search:focus-within { border-color: var(--purple); }
@media (max-width: 900px) { .top__search { display: none; } }
/* a tighter menu, like the reference */
.nav a { padding: 10px 12px; font-size: 15px; }
.nav a svg { width: 20px; height: 20px; }
.brand { margin-block-end: 32px; }