/* nb-app.css (KAN-594, 2026-10-02): the main app stylesheet, moved VERBATIM from the first <style> block in
   app/nabras-app.html <head>. Loaded by a render-blocking <link rel="stylesheet" href="/nb-app.css?v=<sha>"> at the same
   position, so the CSSOM is complete before first paint (Day 115 CLS rule) and the cascade order is unchanged.
   Lock: qa/.lock_mod_css. Stamp: scripts/stamp_module_versions.js. Gates read it via scripts/lib/app_sources.js. */
  /* Cairo variable (wght 200-1000), self-hosted. font-display:optional، combined with the
     preloads above the font is already available at first paint, and `optional` guarantees the
     browser will NEVER reflow for it later even on a slow connection: worst case a visitor sees
     the fallback for that one page load. That is the property that actually pins CLS to ~0. */
  @font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: optional;
    src: url('/fonts/cairo-arabic-var.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-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
  }
  @font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: optional;
    src: url('/fonts/cairo-latin-var.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;
  }
  /* Fallback face carrying Cairo's real OS/2 metrics (ascent 1303, descent 571, unitsPerEm 1000
    ، measured with fontTools on the actual font binary). Kept as a second line of defence for
     the `optional` miss case; `local(…)` names are best-effort by platform. */
  @font-face {
    font-family: 'Cairo Fallback';
    src: local('Segoe UI'), local('Helvetica Neue'), local('Roboto'), local('Noto Sans Arabic'), local('Arial');
    ascent-override: 130.3%;
    descent-override: 57.1%;
    line-gap-override: 0%;
  }
  :root {
    --bg: #161527;
    --bg2: #232140;
    --bg3: #334155;
    --blue: #0891B2;
    --blue-dark: #0E7490;
    --green: #10B981;
    --yellow: #F59E0B;
    --red: #EF4444;
    --indigo: #6366F1;
    --text: #F5EFE8;
    --text-muted: #A89CB8;
    --border: #334155;
    --radius: 12px;
    /*، radius tokens (Item #12 foundation; selectors applied in batches)، */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    /* Type scale (Claude Design, calibrated to app's mobile sizes)، Day 52 */
    --fs-title: 1.4rem; --fs-section: 1.15rem; --fs-sub: 1.05rem; --fs-body: 0.95rem; --fs-sm: 0.85rem; --fs-note: 0.8rem; --fs-caption: 0.75rem; --lh-tight: 1.25; --lh-snug: 1.4; --lh-body: 1.6;
    --card: #232140; --acc-indigo:#A5B4FC; --acc-indigo2:#C7D2FE; --acc-indigo3:#818CF8; --acc-green:#6EE7B7; --acc-green2:#34D399; --acc-yellow:#FCD34D; --acc-yellow2:#FDE68A; --acc-teal:#5EEAD4; --acc-blue:#93C5FD; --acc-gray:#CBD5E1; --acc-red:#FECACA; --acc-red2:#FCA5A5; --acc-violet:#A78BFA;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Cairo', 'Cairo Fallback', 'Segoe UI', Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
  }

  
  nav {
    /* Floating pill navbar (Day 37 backlog)، detached rounded pill, app-like */
    background: rgba(22,21,39,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 10px;
    z-index: 100;
    max-width: 880px;
    margin: 10px auto 0;
    width: calc(100% - 28px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  }
  @media (max-width: 480px) {
    nav { top: 8px; width: calc(100% - 16px); padding: 7px 14px; margin-top: 8px; }
  }
  .logo { font-size: 1.4rem; font-weight: 900; color: var(--blue); }
  .logo span { color: var(--text); }
  .nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
  }
  .nav-link:hover { color: var(--text); }

  
  .steps-bar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
  }
  .steps {
    display: flex;
    gap: 8px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
  }
  
  .steps::before {
    content: '';
    position: absolute;
    top: 16px; 
    right: 10%;
    left: 10%;
    height: 2px;
    background: var(--border);
    z-index: 0;
  }
  .step-item {
    flex: 1;
    text-align: center;
  }
  .step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    transition: all 0.3s;
    position: relative;
    z-index: 1; 
  }
  .step-item.active .step-dot {
    background: var(--blue);
    color: white;
    box-shadow: 0 0 0 4px rgba(8,145,178,0.2);
  }
  .step-item.done .step-dot {
    background: var(--green);
    color: white;
  }
  .step-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: none;
  }
  @media (min-width: 480px) { .step-label { display: block; } }
  .step-item.active .step-label { color: var(--blue); }
  .step-item.done .step-label { color: var(--green); }

  
  .screen { display: none; }
  .screen.active { display: block; }

  
  .container {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 20px 80px;
  }

  
  .card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 20px;
  }
  .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .card-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
  }

  
  .hero-section {
    text-align: center;
    padding: 40px 20px 24px;
    position: relative;
    overflow: hidden;
  }
  .hero-section::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 280px;
    background: radial-gradient(ellipse at center, rgba(8,145,178,0.13) 0%, rgba(129,140,248,0.07) 45%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    animation: heroGlow 5s ease-in-out infinite;
  }
  .hero-section::after {
    /* Dotted-grid texture (backlog)، sub-perceptual depth, fades at edges */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(245,239,232,0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 75%);
  }
  .welcome-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 22px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1;
    color: var(--text-muted);
  }
  .welcome-trust-strip .wts-free {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0F766E;
  }
  .welcome-trust-strip .wts-sep { opacity: .4; }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(15,118,110,0.10);
    color: #115E59;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
  }
  .hero-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 16px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  }
  .hero-title .highlight {
    color: #0F766E;
  }
  .hero-desc {
    font-size: var(--fs-sub);
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 24px;
    line-height: 1.85;
  }
  .steps-preview {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .step-preview-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .step-num {
    background: var(--blue);
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  
  .form-group { margin-bottom: 18px; }
  label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
  }
  input, select {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
  }
  input:focus, select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(8,145,178,0.15);
    outline: none;
  }
  button:focus-visible,
  [role="button"]:focus-visible,
  .btn:focus-visible,
  .dc-option:focus-visible,
  .faq-item summary:focus-visible,
  a:focus-visible {
    outline: 2px solid #0891B2;
    outline-offset: 3px;
  }
  .faq-item summary:focus-visible {
    outline-offset: -3px;
  }

  .skip-link {
    position: absolute;
    top: -100%;
    right: 16px;
    background: var(--blue);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 999;
    text-decoration: none;
    transition: top 0.2s;
  }
  .skip-link:focus {
    top: 0;
  }
  input::placeholder { color: var(--text-muted); }


  
  .btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .btn-primary {
    background: var(--blue);
    color: white;
    box-shadow: 0 4px 16px rgba(8,145,178,0.35);
  }
  .btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(8,145,178,0.45); }
  .btn-primary:active { transform: translateY(0); }

  
  .btn-hero-cta {
    font-size: 1.13rem !important;
    padding: 18px 32px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%) !important;
    color: #042F2E !important;
    box-shadow: 0 6px 28px rgba(8,145,178,0.5) !important;
    position: relative;
    overflow: hidden;
    /* Day 115 CLS fix (attempt 5): min-height alone is a floor, not a ceiling، if the
       fallback font is wider than Cairo the text can still WRAP past 84px on swap, which
       is what kept producing two separate ~0.2 layout-shift events on this exact element
       in PageSpeed even after the height reservation, the metric-matched @font-face
       fallback, and the async font load. Forcing single-line + fixed box (flex-centered,
       border-box, no wrap) removes the reflow trigger entirely instead of just bounding it. */
    min-height: 84px;
    height: 84px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  .btn-hero-cta::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -60%;
    width: 35%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: skewX(-20deg);
    animation: heroShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
  }
  /* Day 122 perf fix: heroCTAPulse used to animate box-shadow directly (a non-composited
     property — Lighthouse flags this as it forces paint every frame instead of running on the
     compositor thread). Same visual pulse, now done by fading a ::before layer that carries the
     "peak" shadow as a static value, animating only opacity (composited-safe). */
  .btn-hero-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: 0 8px 36px rgba(8,145,178,0.7), 0 0 0 8px rgba(8,145,178,0.08);
    opacity: 0;
    pointer-events: none;
    animation: heroCTAPulseGlow 3s ease-in-out infinite;
  }
  @keyframes heroCTAPulseGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
  @keyframes heroShimmer {
    0% { right: -60%; }
    60%, 100% { right: 120%; }
  }
  .hero-cta-sub {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 8px;
    letter-spacing: 0.03em;
  }
  .btn-secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    margin-top: 10px;
  }
  .btn-secondary:hover { color: var(--text); border-color: var(--text-muted); transform: translateY(-1px); }
  .nb-btn-secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .nb-btn-secondary:hover { color: var(--text); border-color: var(--text-muted); }
  .btn-green {
    background: var(--green);
    color: white;
  }
  .btn-green:hover { background: #059669; transform: translateY(-1px); }
  .btn:disabled, .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  
  .q-type-badge {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .calc { background: rgba(99,102,241,0.15); color: var(--acc-indigo3); }
  .quant { background: rgba(16,185,129,0.15); color: var(--green); }
  .verbal { background: rgba(8,145,178,0.15); color: var(--blue); }

  .q-progress-bar {
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    margin-bottom: 28px;
    overflow: hidden;
  }
  .q-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue) 40%, rgba(147,197,253,0.85) 50%, var(--blue) 60%);
    background-size: 200% auto;
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: progressShimmer 2.4s linear infinite;
  }

  .q-figure-wrap{max-width:100%;margin:12px 0 18px;padding:10px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;min-height:120px;overflow:hidden;}
  .q-figure-wrap img,.q-figure-wrap svg{max-width:100%;max-height:200px;height:auto;width:auto;object-fit:contain;display:block;}
  /* KAN-229: under dir=rtl an SVG label with text-anchor:start grows leftwards past x=0 and was clipped («2ف» → «ؤ2»); the wrap still clips at the card edge. */
  .q-figure-wrap svg{overflow:visible;}
  .q-figure-wrap{color:var(--text);}
  /* KAN-794 (KAN-617 #1): the #0891B2 accent line in a figure is 2.81:1 on the dark figure card (#334155), under the 3:1 non-text minimum; dark uses #22D3EE (5.9:1). Light keeps #0891B2 (3.05:1). */
  body:not(.nb-light) .q-figure-wrap svg [stroke="#0891B2" i]{stroke:#22D3EE}
  body:not(.nb-light) .q-figure-wrap svg [fill="#0891B2" i]{fill:#22D3EE}
  .q-figure-error-note{display:none;font-size:0.78rem;color:var(--text-muted);text-align:center;padding:8px;}
  .q-figure-wrap.q-figure-error img{display:none;}
  .q-figure-wrap.q-figure-error .q-figure-error-note{display:block;}
  .q-figure-wrap.q-figure-error{min-height:auto;background:transparent;border-style:dashed;}
  @media (max-width:390px){.q-figure-wrap img,.q-figure-wrap svg{max-height:170px;}}
  /* KAN-225: data charts fill the card width (labels carry the data); geometry drawings keep the cap above. */
  .q-figure-wrap.q-figure-wrap--chart{padding:6px;}
  .q-figure-wrap.q-figure-wrap--chart svg{width:100%;max-width:400px;max-height:300px;}


  .q-text {
    font-size: var(--fs-sub);
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  .options {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .option {
    background: var(--bg3);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 14px 18px;
    min-height: 58px;
    cursor: pointer;
    transition: all 0.18s;
    font-size: 0.95rem;
    text-align: start;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .option:hover { border-color: var(--blue); background: rgba(8,145,178,0.08); }
  .option.selected { border-color: var(--blue); background: rgba(8,145,178,0.12); }
  @media (hover: hover) {
    .option:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
  }
  .option.correct { border-color: var(--green); background: rgba(16,185,129,0.12); }
  .option.wrong { border-color: var(--red); background: rgba(239,68,68,0.1); }
  .option-letter {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s;
  }
  .option.selected .option-letter { background: var(--blue); color: white; }
  .option.correct .option-letter { background: var(--green); color: white; }
  .option.wrong .option-letter { background: var(--red); color: white; }

  /* === Motion system v1 (Claude Design spec, Day 51)، interaction feedback layer === */
  :root { --nb-ease: cubic-bezier(.4,0,.2,1); }
  .btn:active { transform: scale(.97); }
  .option.selected::after { content: '✓'; margin-inline-start: auto; color: var(--blue); font-weight: 800; font-size: .95rem; animation: nbPop .18s var(--nb-ease); }
  @keyframes nbPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  /* Motion system v1، slice 2: screen-enter transition (Claude Design tokens). Scoped off welcome to protect its fixed CTA bars. */
  .screen.active:not(#screen-welcome) { animation: nbScreenIn .18s var(--nb-ease); }
  @keyframes nbScreenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .q-explanation {
    margin-top: 16px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 8px;
    padding: 14px;
    font-size: 0.88rem;
    color: var(--green);
    display: none;
  }
  .q-explanation.show { display: block; }


  


  .plan-day {
    background: var(--bg3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .plan-day-num {
    background: var(--blue);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  .plan-day-content { flex: 1; }
  .plan-day-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
  }
  .plan-day-details {
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  .plan-day-time {
    font-size: 0.78rem;
    background: rgba(8,145,178,0.1);
    color: var(--blue);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
  }

  .plan-blur-wrap {
    position: relative;
    margin-top: 8px;
  }
  .plan-blur-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--bg2) 60%);
    z-index: 2;
    border-radius: var(--radius);
    display: flex;
    align-items: flex-end;
    padding-bottom: 0;
  }
  .plan-blurred {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
  }

  
  .guarantee-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 12px;
  }
  .guarantee-note strong { color: var(--green); }

  
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-overlay.show { display: flex; }
  .modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    max-width: 480px;
    width: 100%;
  }
  .modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 24px;
  }

  
  .celebration {
    text-align: center;
    padding: 20px 0;
  }
  .celebration-emoji { font-size: 3rem; margin-bottom: 16px; }
  .celebration-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; }
  .celebration-sub { font-size: 0.9rem; color: var(--text-muted); }

  

  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroGlow {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  }
  .fade-in { animation: fadeIn 0.4s ease forwards; }

  @keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.95; }
    80%  { opacity: 0.8; }
    100% { transform: translateY(105vh) rotate(720deg) scale(0.8); opacity: 0; }
  }
  @keyframes progressShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  
  .option:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-color: var(--blue);
  }
  .guarantee-strip:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }
  .nav-link:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
  }

  
  .parent-trust-wrap {
    padding: 0 20px 20px;
    max-width: 480px;
    margin: 0 auto;
  }
  .parent-trust-details {
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 14px;
    padding: 14px 16px;
  }
  .parent-trust-summary {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
  }
  .parent-trust-summary::-webkit-details-marker { display: none; }
  .parent-trust-arrow {
    margin-right: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s;
  }
  .parent-trust-details[open] .parent-trust-arrow { transform: rotate(180deg); }
  .parent-trust-body {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
  }
  .parent-trust-body p { margin: 0 0 8px; }
  .parent-trust-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
  }
  .parent-trust-tip {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--blue);
  }

  
  .articles-section {
    padding: 0 20px 28px;
  }
  .articles-title {
    text-align: center;
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
  }
  .articles-grid {
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 14px;
    padding: 14px;
    max-width: 480px;
    margin: 0 auto;
  }
  .article-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.2);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
  .article-link + .article-link { margin-top: 8px; }
  .article-link:hover {
    background: rgba(34,211,238,0.16);
    border-color: rgba(34,211,238,0.4);
    transform: translateY(-1px);
  }
  .article-link:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  .article-link-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #22D3EE;
    margin-bottom: 4px;
  }
  .article-link-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.6;
  }
  .articles-more {
    text-align: center;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
  }

  
  .site-footer {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 24px 20px 90px;
    text-align: center;
    margin-top: 40px;
  }
  .footer-inner {
    max-width: 480px;
    margin: 0 auto;
  }
  .footer-brand {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--blue);
    margin-bottom: 8px;
  }
  .footer-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
  }
  .footer-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  .footer-links span {
    transition: color 0.2s;
    cursor: default;
  }
  .footer-links .footer-link-clickable {
    cursor: pointer;
  }
  .footer-links .footer-link-clickable:hover {
    color: var(--green);
  }
  .footer-links .footer-link-clickable:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .site-footer a:hover { color: var(--blue); text-decoration: underline; }
  .footer-copy {
    margin-top: 14px;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.75;
  }

  
  @media (hover: none) {
    .btn-primary:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(8,145,178,0.3); }
    .btn-hero-cta:active { transform: scale(0.97) !important; }
    .option:active { border-color: var(--blue); background: rgba(8,145,178,0.12); transform: scale(.98); }
    .dc-option:active { border-color: var(--blue); background: rgba(8,145,178,0.1); }
    .faq-item summary:active { color: var(--blue); }
    .guarantee-strip:active { transform: scale(0.98); }
    .article-link:active { background: rgba(34,211,238,0.18); border-color: rgba(34,211,238,0.4); }
    .parent-trust-details:active { border-color: rgba(99,102,241,0.4); }
  }

  
  @media (max-width: 480px) {
    .container { padding: 20px 16px 60px; }
    .card { padding: 20px; }
    .hero-title { font-size: 1.45rem; }
    .hero-desc { font-size: 1rem; }
    .stats-bar-section { margin: 16px 12px 0; }
    .stat-num { font-size: 1.1rem; }
    .stat-label { font-size: 0.68rem; }
    .faq-item summary { padding: 12px 14px; font-size: 0.84rem; }
    .faq-answer { padding: 0 14px 12px; font-size: 0.8rem; }
    /* Day 51 sticky rule REMOVED Day 130 (P0 fix, qa/handoff_fullstack_P0_q10_overlap_2026-09-06.md):
       position:sticky;bottom:12px on the LAST child of a taller-than-viewport .card painted the
       nav ~408px above its reserved flow position on Q10 (615-char passage), overlapping .options
       by up to 85px — the exam-ending "اعرف نتيجتي" button sat on top of option "أ". Q1-9 (26-73
       chars) never hit this because their card height stayed under viewport. Reverted to normal
       static flow — guarantees zero overlap regardless of question length. Trades away the Day-51
       "stay above browser chrome" nicety; a funnel-ending mis-tap is the worse failure. */
  }
  
  .mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(22,21,39,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 88px; /* left clears the chat bubble */
    z-index: 99;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .mobile-sticky-cta.visible { transform: translateY(0); }
  .mobile-sticky-cta .btn {
    margin: 0;
    font-size: 0.95rem;
    padding: 13px 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    box-shadow: 0 4px 16px rgba(8,145,178,0.4);
  }
  @media (max-width: 640px) {
    .mobile-sticky-cta { display: block; }
    .container { padding-bottom: 80px; }
    /* Day 138 patch (qa/handoff_patch_design_2026-09-12_hero_gap.md): 80px هامش يخدم الشريط اللاصق
       فقط حين تكون .container آخر شيء ظاهر؛ في شاشة الرئيسية يوجد محتوى كثير بعدها (نمر/مسارات)
       فيصبح فراغاً غير مبرَّر (139px مقاس حياً). مقيَّد بشاشة الرئيسية فقط، لا يمسّ الشاشات الأخرى. */
    #screen-welcome .container { padding-bottom: 16px; }
    .btn-hero-cta { font-size: 0.88rem !important; padding: 14px 18px !important; white-space: nowrap !important; min-height: 70px; height: 70px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
    /* Day 45 UX audit: reorder hero، CTA before chat demo on mobile */
    .hero-section { display: flex; flex-direction: column; align-items: center; padding: 12px 20px 10px; }
    .hero-section > * { width: 100%; box-sizing: border-box; }
    .nb-result-preview { order: 10; margin-top: 16px; margin-bottom: 0 !important; }
    #hero-cta-btn { order: 9; }
    /* Day 115 (3rd design patch): how-it-works + objections had no flex order, rendering above the CTA and pushing it below the fold */
    .nb-how { order: 12; }
    .nb-obj { order: 13; }
    .hero-cta-sub { order: 9; }
    /* Day 45: hide mobile notice bar، urgency already in hero deadline chip; clears ~35px for CTA fold */
    #exam-notice-bar { display: none !important; }
    /* Day 47 Issue B fix: push stats below CTA so CTA stays above fold at 390px */
    .stats-bar-section { order: 11; }
    /* KAN-114: same class as the Day 115 note above. An unordered hero child floats to
       order:0 and lands above the CTA. This line must follow the stats bar (order 11,
       later DOM index) and stay before .nb-how (order 12). Measured live, not assumed. */
    .hero-verified-line { order: 11; }
  }

  @media (max-width: 360px) {
    .hero-title { font-size: 1.3rem; }
    .steps-preview { gap: 6px; }
    .step-preview-item { padding: 10px 12px; font-size: 0.8rem; }
    .guarantee-strip { padding: 10px 12px; font-size: 0.8rem; }
    .stat-block { padding: 10px 6px; }
    .btn-hero-cta { font-size: 0.88rem !important; padding: 14px 18px !important; white-space: nowrap !important; min-height: 70px; height: 70px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
  }

  /* Day 51 Issue C (Design handoff): short viewports (iPhone SE 375x667)، compress nav+hero so #hero-cta-btn stays above fold */
  @media (max-height: 680px) {
    nav { padding-top: 6px !important; padding-bottom: 6px !important; margin-top: 6px !important; }
    .hero-section { padding-top: 6px !important; }
    .hero-title { font-size: 1.3rem !important; margin: 4px 0 !important; }
    .hero-desc { margin: 4px auto !important; font-size: 0.9rem !important; }
    .hero-reassure { display: none !important; }
  }

  
  .exp-card {
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 16px;
    animation: expSlideIn 0.38s cubic-bezier(0.34,1.3,0.64,1) forwards;
    opacity: 0;
  }
  .exp-card.correct-exp {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.04));
    border: 1px solid rgba(16,185,129,0.3);
  }
  .exp-card.wrong-exp {
    background: linear-gradient(135deg, rgba(8,145,178,0.08), rgba(8,145,178,0.03));
    border: 1px solid rgba(8,145,178,0.25);
  }
  @keyframes expSlideIn {
    from { opacity:0; transform:translateY(16px) scale(0.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }
  .exp-section-label {
    font-size:0.72rem; font-weight:700; letter-spacing:0.5px;
    color:var(--text-muted); margin-bottom:6px;
    display:flex; align-items:center; gap:5px;
  }
  .exp-body { font-size:0.9rem; line-height:1.8; color:var(--text); margin-bottom:12px; }
  /* KAN-472 skill lessons (design qa/KAN-470 §4, rules copied from the mockup block) */
  :root{--toast-bg:#F5EFE8;--toast-fg:#161527}
  body.nb-light{--toast-bg:#1F2937;--toast-fg:#FFFFFF}
  [class^="nb-les-"] button,button[class^="nb-les-"],.nb-les-try button.option{font-family:inherit;cursor:pointer}
  .nb-les-inline{border-radius:14px;padding:16px;background:rgba(8,145,178,.08);border:1px solid rgba(8,145,178,.25);border-right:4px solid var(--blue)}
  .nb-les-inline .top{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
  .nb-les-ico{width:44px;height:44px;border-radius:12px;background:rgba(8,145,178,.16);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none}
  .nb-les-eyebrow{font-size:var(--fs-caption);font-weight:700;color:var(--acc-teal)}
  .nb-les-title{font-size:var(--fs-sub);font-weight:800;line-height:1.5}
  .nb-les-list{list-style:none;margin:4px 0 14px;padding:0;display:grid;gap:6px}
  .nb-les-list li{font-size:var(--fs-sm);display:flex;gap:8px;align-items:center}
  .nb-les-list li b{width:22px;height:22px;border-radius:50%;background:var(--card);border:1px solid var(--border);font-size:.7rem;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--acc-teal)}
  .nb-les-primary{width:100%;min-height:52px;border:none;border-radius:14px;background:var(--blue-dark);color:#fff;font-size:1.05rem;font-weight:800}
  .nb-les-skip{width:100%;min-height:44px;margin-top:8px;border-radius:12px;background:transparent;border:1px solid var(--border);color:var(--text);font-size:var(--fs-sm);font-weight:700}
  .nb-les-foot{font-size:var(--fs-caption);color:var(--text-muted);text-align:center;margin-top:8px}
  .nb-les-link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:8px 12px;margin:0 0 12px;border-radius:10px;background:rgba(8,145,178,.10);border:1px solid rgba(8,145,178,.30);color:var(--acc-teal);font-size:var(--fs-sm);font-weight:800;text-align:start}
  .nb-les-link small{font-weight:600;color:var(--text-muted);font-size:var(--fs-caption)}
  .nb-les-chip{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;background:rgba(8,145,178,.10);border:1px solid rgba(8,145,178,.30);color:var(--acc-teal);font-size:var(--fs-note);font-weight:800}
  .nb-les-chip.seen{background:transparent;border-color:var(--border);color:var(--text-muted);font-weight:700}
  .nb-les-row{display:flex;padding-top:10px;gap:8px;flex-wrap:wrap;align-items:center}
  .nb-les-row > span{font-size:var(--fs-caption);color:var(--text-muted);font-weight:700}
  .nb-les-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .nb-les-back{min-height:44px;padding:0 14px;border-radius:12px;background:transparent;border:1px solid var(--border);color:var(--text);font-weight:800;font-size:var(--fs-sm)}
  .nb-les-meta{font-size:var(--fs-caption);color:var(--text-muted);font-weight:700}
  .nb-les-skill{display:inline-block;font-size:var(--fs-caption);font-weight:800;color:var(--acc-teal);background:rgba(8,145,178,.10);border-radius:999px;padding:3px 10px;margin-bottom:6px}
  .nb-les-h1{font-size:var(--fs-title);font-weight:900;line-height:1.35;margin:0 0 4px}
  .nb-les-prog{display:flex;gap:4px;margin:12px 0 4px}.nb-les-prog i{flex:1;height:4px;border-radius:4px;background:var(--bg3)}.nb-les-prog i.on{background:var(--blue)}
  .nb-les-block{margin-top:18px}
  .nb-les-bh{display:flex;align-items:center;gap:8px;font-size:var(--fs-sub);font-weight:800;margin-bottom:8px}
  .nb-les-bh b{width:26px;height:26px;border-radius:50%;background:var(--blue-dark);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;flex:none}
  .nb-les-lead{font-size:var(--fs-body);line-height:1.8;background:rgba(8,145,178,.08);border-right:3px solid var(--blue);border-radius:8px;padding:10px 12px;font-weight:700}
  .nb-les-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .nb-les-steps li{display:flex;gap:10px;font-size:var(--fs-body);line-height:1.7}
  .nb-les-steps li b{color:var(--acc-teal);font-weight:900;flex:none;width:18px}
  .nb-les-pat{display:grid;gap:6px}
  .nb-les-pat div{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg3);border-radius:10px;padding:8px 12px;min-height:44px;font-size:var(--fs-sm)}
  .nb-les-pat div span:first-child{font-weight:800}
  .nb-les-pat div span:last-child{color:var(--text);font-weight:700;direction:rtl;text-align:end}
  .nb-les-note{font-size:var(--fs-caption);color:var(--text-muted);margin-top:6px}
  .nb-les-more{margin-top:6px;border:1px solid var(--border);border-radius:10px}
  .nb-les-more summary{min-height:44px;display:flex;align-items:center;padding:0 12px;font-size:var(--fs-sm);font-weight:800;color:var(--acc-teal);list-style:none;cursor:pointer}
  .nb-les-more .nb-les-pat{padding:0 8px 8px}
  .nb-les-trap{background:rgba(245,158,11,.12);border-right:3px solid var(--yellow);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:var(--fs-sm);line-height:1.7}
  .nb-les-trap strong{display:block;color:var(--acc-yellow);font-size:var(--fs-sm)}
  .nb-les-try{border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--card)}
  .nb-les-try .lbl{display:flex;justify-content:space-between;font-size:var(--fs-caption);color:var(--text-muted);font-weight:700;margin-bottom:6px}
  .nb-les-try .nb-les-q{font-size:var(--fs-sub);font-weight:800;margin:4px 0 10px;line-height:1.6}
  .nb-les-try .option{width:100%;min-height:50px;padding:8px 12px;margin-bottom:8px;color:var(--text);font-size:.95rem}
  .nb-les-try .option.dim{opacity:.6}
  .nb-les-try .option[disabled]{cursor:default}
  .nb-les-res{font-size:var(--fs-sm);font-weight:800;margin:4px 0 8px}
  .nb-les-res.ok{color:var(--acc-green)}
  .nb-les-hint{font-size:var(--fs-caption);color:var(--text-muted);text-align:center}
  .nb-les-plbl{font-size:var(--fs-caption);color:var(--text-muted);font-weight:700;margin-bottom:4px}
  .nb-les-passage{background:var(--bg3);border-radius:10px;padding:10px 12px;font-size:var(--fs-sm);line-height:1.9;margin-bottom:10px}
  .nb-les-seenpill{font-size:var(--fs-caption);font-weight:800;color:var(--acc-green);background:rgba(16,185,129,.12);border-radius:999px;padding:3px 10px}
  .nb-les-cta{width:100%;min-height:52px;margin-top:4px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;font-size:1.1rem;font-weight:800}
  .nb-les-state{text-align:center;padding:36px 8px;font-size:var(--fs-body);color:var(--text-muted)}
  .nb-les-toast{position:fixed;bottom:20px;left:16px;right:16px;max-width:480px;margin:0 auto;z-index:9999;background:var(--toast-bg);color:var(--toast-fg);border-radius:12px;padding:12px 14px;font-size:var(--fs-sm);font-weight:700;display:none;align-items:center;gap:8px;box-shadow:0 8px 24px -12px rgba(0,0,0,.4)}

  
  .sim-timer { font-size:2rem; font-weight:800; font-family:'Cairo',sans-serif; color:#10B981; transition:color 0.3s; }
  .sim-timer.warning { color:#F59E0B; }
  .sim-timer.danger { color:#EF4444; animation:pulse 1s infinite; }
  .sim-q-dot { width:28px; height:28px; border-radius:6px; border:1.5px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text-muted); font-size:0.72rem; font-weight:700; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; justify-content:center; }
  .sim-q-dot:hover { border-color:var(--blue); color:var(--sim-acc); }
  .sim-q-dot.answered { background:rgba(8,145,178,0.2); border-color:var(--blue); color:var(--sim-acc); }
  .sim-q-dot.current { background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; }
  #sim-card{--sim-acc:#5EEAD4} body.nb-light #sim-card{--sim-acc:#115E59}
  .sim-result-circle { width:110px; height:110px; border-radius:50%; border:3px solid var(--blue); display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 20px; background:rgba(8,145,178,0.1); }
  .calc-section {
    padding: 0 20px 20px;
  }
  .calc-card {
    background: var(--card);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 16px;
    padding: 20px;
    max-width: 480px;
    margin: 0 auto;
  }
  .calc-card-header {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
  }
  .calc-card-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 16px;
  }
  .calc-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }
  .calc-input-group label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
  }
  .calc-input-group select,
  .calc-input-group input[type=range] {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg3);
    color: var(--text);
    padding: 8px 12px;
    font-size: 0.88rem;
    font-family: 'Cairo', sans-serif;
    min-height: 44px;
  }
  .calc-input-group input[type=range] {
    padding: 4px 0;
    cursor: pointer;
    accent-color: var(--blue);
  }
  .calc-gpa-val {
    display: inline-block;
    font-weight: 800;
    color: var(--blue);
    font-size: 1rem;
    margin-right: 6px;
  }
  .calc-result {
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    text-align: center;
  }
  .calc-result-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .calc-result-score {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
  }
  .calc-result-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 6px;
  }
  
  .guarantee-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s ease;
  }
  .modal-sheet {
    background: var(--card);
    border-radius: 20px 20px 0 0;
    padding: 28px 24px 40px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    animation: slideUp 0.25s ease;
  }
  .modal-close {
    float: left;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
  }
  .modal-title {
    font-size: var(--fs-section);
    font-weight: 900;
    margin-bottom: 16px;
  }
  .modal-section {
    margin-bottom: 14px;
  }
  .modal-section-title {
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--green);
    margin-bottom: 5px;
  }
  .modal-section p {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.7;
  }
  
  .nb-plan-hdg{font-size:var(--fs-body);font-weight:900;color:var(--blue);text-align:center;margin:10px 0 2px;direction:rtl;}
  /* KAN-8 «جدول نبراس»: numbered-day schedule row inside buildGuaranteeMeter().
     27px/5px are Design's live-measured values at 375px (handoff_patch_design_schedule_2026-09-21).
     Cap is a fixed 9 in JS, not a clientWidth read, so no fit-probe or diagnostic bar ships. */
  .nb-sched-row{display:flex;flex-direction:row-reverse;align-items:center;gap:5px;width:100%;overflow:hidden;}
  .nb-sched-circ{width:27px;height:27px;min-width:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;}
  .nb-sched-circ.done{background:var(--green);color:#fff;}
  .nb-sched-circ.upcoming{background:var(--bg3);color:var(--text-muted);}
  .nb-sched-circ.rest{background:transparent;border:1.5px dashed var(--text-muted);font-size:12px;}
  .nb-sched-circ.today{background:transparent;border:2px solid var(--blue);color:var(--blue);font-weight:900;box-shadow:0 0 0 3px rgba(8,145,178,.15);}
  .nb-sched-circ.upcoming.rescue{background:rgba(239,68,68,.12);color:var(--red);}
  .nb-sched-circ.today.rescue{border-color:var(--red);color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.15);}
  .nb-sched-today-line{display:flex;align-items:center;gap:6px;margin-top:10px;padding:9px 11px;border-radius:10px;background:rgba(8,145,178,.08);border:1px solid rgba(8,145,178,.25);font-size:var(--fs-note);font-weight:700;color:var(--blue);cursor:pointer;min-height:44px;box-sizing:border-box;}
  .nb-sched-today-line.rescue{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.28);color:var(--red);}
  .nb-acc{border:1px solid rgba(255,255,255,.08);border-radius:14px;margin-bottom:16px;overflow:hidden;}
  .nb-acc summary{padding:12px 16px;cursor:pointer;font-size:0.85rem;font-weight:700;color:var(--text-muted);list-style:none;display:flex;align-items:center;gap:8px;}
  .nb-acc summary::-webkit-details-marker{display:none;}

  /* Day 122 perf fix: guaranteePulse used to animate box-shadow directly (non-composited,
     flagged by Lighthouse — forces paint every frame). Same visual ring pulse, now a ::before
     layer with the "peak" ring baked in as a static value, animating only opacity. */
  @keyframes guaranteePulseGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
  .guarantee-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    border-right: 3px solid var(--green);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 14px auto 0;
    font-size: 0.85rem;
    text-align: start;
    max-width: 360px;
    line-height: 1.5;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative;
  }
  .guarantee-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 5px rgba(16,185,129,0.1);
    opacity: 0;
    pointer-events: none;
    animation: guaranteePulseGlow 3s ease-in-out infinite;
  }
  .guarantee-strip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16,185,129,0.18);
    background: rgba(16,185,129,0.15);
  }
  .guarantee-strip:hover::before { animation: none; opacity: 0; }
  .guarantee-strip strong { color: var(--green); }
  .guarantee-strip-icon { font-size: 1.2rem; flex-shrink: 0; }

  
  .streak-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.88rem;
    color: var(--yellow);
    max-width: 360px;
    margin: 0 auto 16px;
    font-weight: 600;
  }

  
  .qiyas-countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    padding: 7px 18px;
    font-size: 0.88rem;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: 0.2px;
    animation: fadeIn 0.5s ease forwards;
  }
  .qiyas-countdown.urgent {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    color: var(--red);
  }
  .qiyas-countdown.warning {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.35);
    color: var(--yellow);
  }
  .qiyas-countdown.safe {
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    color: var(--green);
  }

  
  .live-counter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-muted);
  }
  .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: livePulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }

  
  @keyframes xpPop {
    0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    60%  { opacity: 1; transform: translate(-50%, -30px) scale(1.4); }
    100% { opacity: 0; transform: translate(-50%, -55px) scale(1); }
  }
  .xp-pop {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    color: var(--green);
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    animation: xpPop 0.85s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 2px 8px rgba(16,185,129,0.5);
  }

  


  
  .btn-whatsapp {
    background: #25D366;
    color: white;
    border: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s;
  }
  .btn-whatsapp:hover { background: #1fba59; transform: translateY(-1px); }

  
  .stats-bar-section {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 20px auto 0;
    max-width: 420px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(35,33,64,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  }
  .stat-block {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    border-left: 1px solid var(--border);
  }
  .stat-block:last-child { border-left: none; }
  /* KAN-114 trust lines (Design handoff; the KAN-88 gap line was cut with the old results body, KAN-758).
     No `opacity` by design: at 0.85 the light-theme --text-muted (#57606A on #FFFFFF)
     computes to 4.48:1, under the 4.5 AA floor. Full opacity = 6.39:1 light / 6.93:1 dark. */
  .hero-verified-line{text-align:center;font-size:var(--fs-caption);color:var(--text-muted);margin:10px auto 0;max-width:420px;}
  .stat-num {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
  }
  .stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.3;
  }

  
  .dc-section {
    padding: 0 20px;
    max-width: 640px;
    margin: 24px auto 8px;
  }
  .dc-section-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dc-section-label::before {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  .dc-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  .dc-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    animation: fadeIn 0.4s ease forwards;
    position: relative;
    overflow: hidden;
  }
  .dc-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(8,145,178,0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .dc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .dc-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--blue);
  }
  .dc-date-chip {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg3);
    border-radius: 20px;
    padding: 3px 10px;
  }
  .dc-question {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.65;
    margin-bottom: 16px;
    color: var(--text);
  }
  .dc-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 4px;
  }
  .dc-option {
    background: var(--bg3);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 11px 15px;
    cursor: pointer;
    transition: all 0.18s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cairo', sans-serif;
    text-align: start;
    color: var(--text);
  }
  .dc-option:hover { border-color: var(--blue); background: rgba(8,145,178,0.08); }
  .dc-option.dc-correct { border-color: var(--green); background: rgba(16,185,129,0.12); cursor: default; }
  .dc-option.dc-wrong { border-color: var(--red); background: rgba(239,68,68,0.1); cursor: default; }
  .dc-letter {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .dc-option.dc-correct .dc-letter { background: var(--green); color: white; }
  .dc-option.dc-wrong .dc-letter { background: var(--red); color: white; }
  .dc-explanation {
    margin-top: 14px;
    background: rgba(8,145,178,0.06);
    border: 1px solid rgba(8,145,178,0.2);
    border-radius: 12px;
    padding: 14px;
    animation: fadeIn 0.3s ease;
  }
  .dc-exp-result {
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .dc-exp-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.75;
    white-space: pre-line;
    margin-bottom: 14px;
  }

  
  #exam-notice-bar {
    display: none;
    padding: 8px 20px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    position: relative;
    z-index: 90;
  }
  #exam-notice-bar.urgent {
    background: rgba(239,68,68,0.12);
    border-bottom: 1px solid rgba(239,68,68,0.3);
    color: var(--red);
  }
  #exam-notice-bar.warning {
    background: rgba(245,158,11,0.1);
    border-bottom: 1px solid rgba(245,158,11,0.3);
    color: var(--yellow);
  }
  #exam-notice-bar a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
    margin-right: 8px;
  }
  .exam-notice-dismiss {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    font-family: 'Cairo', sans-serif;
  }
  .exam-notice-dismiss:hover { opacity: 1; }
  @media (min-width: 640px) {
    #exam-notice-bar { display: none !important; }
    #nb-nav-urgency { display: inline-block !important; }
  }

  /* Day 145: مدخل «احفظ تقدّمك» في الشريط العلوي. ثانوي عمداً (محدَّد لا مملوء) حتى لا ينافس
     زر «ابدأ مجاناً»، والنص يختفي تحت 430px فيبقى أيقونة فقط — لا يلتف الشريط ولا يزيد ارتفاعه،
     وهذا ما يحمي ظهورية #hero-cta-btn (انحدار 09-13 المعروف).
     🔴 هذه القواعد **خارج** أي media query عمداً: أول كتابة لها وضعتها داخل @media(min-width:640px)
     فكانت لتختفي على الجوال تماماً، وهو الجهاز الذي يهمّنا. */
  .nav-login{background:transparent;border:1px solid var(--blue);color:var(--blue);border-radius:10px;padding:5px 9px;font-family:inherit;font-weight:700;font-size:.76rem;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;line-height:1;min-width:36px;min-height:36px}
  .nav-login:hover{background:rgba(8,145,178,.09)}
  /* KAN-24: كان cursor:default وبلا مخرج؛ الزر نفسه صار مخرج إلغاء الربط. */
  .nav-login.is-in{border-color:#0E7490;color:#0E7490;background:rgba(14,116,144,.08);cursor:pointer}
  /* Day 145b (سامر: «لا يوجد مؤشر أن المستخدم دخل»): بعد الربط، النص يبقى ظاهراً حتى على الجوال —
     هذا هو المؤشر الوحيد المرئي للطالب أنه مسجَّل، فلا يختفي خلف :not(.is-in) */
  /* KAN-181 (سامر: الأيقونة وحدها «توحي بالإرسال لا بالحفظ»): الطائرة صارت سحابة حفظ، وعلى الجوال
     لا تبقى أيقونة وحدها أبداً: كلمة قصيرة («احفظ» / «دخول») مكانها. قيس Playwright: «احفظ تقدّمك»
     كاملة تفيض 7 إلى 22px على 360/375، والكلمة القصيرة 0. */
  .nb-login-short{display:none}
  @media(max-width:430px){.nav-login:not(.is-in) .nb-login-txt,.nav-login:not(.is-in) svg{display:none}.nav-login:not(.is-in) .nb-login-short{display:inline}.nav-login{padding:5px 7px}}
  /* KAN-182: a returning student's CTA «واصل التدريب ←» wrapped itself and the logo (nav 60→88px at 360/375). One line each; ≤380px trims the CTA's padding/size so 360 fits. Lock: progress_sync_test step 9. */
  @media(max-width:430px){nav .nav-cta,nav .logo{white-space:nowrap}}
  @media(max-width:380px){nav .nav-cta{padding-left:10px;padding-right:10px;font-size:.8rem}}
  /* KAN-181: the button now shows for every visitor, and on a phone that pushed «ابدأ مجاناً ←» onto
     two lines (nav 60→102px at 375, hero CTA 42px lower; the 09-13 regression class). «الرئيسية»
     links to this same page, so ≤430px it gives its room to the button: nav back to 60px at 375-414
     (measured). Locked by scripts/progress_sync_test.js step 7. */
  @media(max-width:430px){nav .nav-links>.nav-link{display:none}nav .nav-links{gap:8px}}
  /* KAN-44 (Day 146): بعد الدخول صار النص اسم الطالب لا سلسلة ثابتة، والاسم قيمة يتحكم بها
     المستخدم من تيليجرام، فيُقصّ بصرياً ولا يلتف الشريط.
     🔴 ٣٧٥px هو الجهاز الحرج: ارتفاع الشريط هناك يحمي ظهورية #hero-cta-btn (انحدار 09-13). */
  /* KAN-74: one truncation owner. JS writes «أهلاً » + first name in two spans and never cuts;
     only .nb-nm clips. ≤430px the greeting hides. The button must not flex-shrink: .nav-login's
     explicit min-width:36px let the row squeeze it below its content, so the name spilled past the
     border. With the button rigid, swept in Playwright (Cairo and fallback font alike): 0 page
     overflow needs name ≤48px at 360, ≤63px at 375, ≥70px at 390 → 100vw - 314px, capped at 70px.
     A long first name gets one clean «…»; the full name stays in title.
     The Telegram icon: no room for icon + readable name on a phone, and flex was silently squeezing
     the svg to 0-9px. So ≤430px it is hidden ON PURPOSE when linked (the name in the teal-bordered
     button is the linked signal, Day 145b), and never allowed to shrink elsewhere. */
  .nav-login svg{flex-shrink:0}
  .nav-login.is-in{flex-shrink:0}
  .nav-login.is-in .nb-login-txt{display:inline-block;white-space:nowrap;vertical-align:bottom}
  .nav-login.is-in .nb-nm{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  @media(max-width:430px){.nav-login.is-in svg,.nav-login.is-in .nb-hi{display:none}.nav-login.is-in .nb-nm{max-width:clamp(24px,calc(100vw - 314px),70px)}}

  

  
  @keyframes slideUpCta {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  #sticky-cta-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(22,21,39,0.97);
    border-top: 1px solid rgba(8,145,178,0.45);
    padding: 12px 20px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    backdrop-filter: blur(12px);
    animation: slideUpCta 0.4s ease;
  }
  /* Design 2026-09-21 (handoff_patch_design_sticky_bar_overlap) §٣(ب) desktop: the bar's copy is
     laid out for a narrow 375-390px width; on wide screens it reads as a broken half-empty strip,
     so hide it entirely — semantically it is a mobile nudge, the primary CTA is already visible.
     §١/٢ (hero-cta-btn clipped on short viewports, .nb-result-preview covered on all mobile
     widths) are handled in JS below by deferring the bar's first appearance until the visitor has
     scrolled past whichever of those two elements is still on screen, instead of a CSS push that
     — measured live — has no effect on already-rendered content above an unscrolled viewport. */
  @media (min-width: 769px) { #sticky-cta-bar { display: none !important; } }
  #sticky-cta-bar .sticky-text { flex: 1; min-width: 0; }
  #sticky-cta-bar .sticky-text .sticky-title {
    font-size: 0.88rem; font-weight: 800; color: var(--text); line-height: 1.3;
  }
  #sticky-cta-bar .sticky-text .sticky-sub {
    font-size: 0.72rem; color: var(--text-muted); margin-top: 2px;
  }
  #sticky-cta-btn {
    background: var(--blue); color: white; border: none;
    padding: 11px 24px; border-radius: 8px;
    font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 0.95rem;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(8,145,178,0.4);
    transition: all 0.2s;
  }
  #sticky-cta-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }

  
  .topic-diff-section {
    max-width: 640px;
    margin: 0 auto 8px;
    padding: 0 20px;
  }
  .topic-diff-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    animation: fadeIn 0.5s ease forwards;
  }
  .topic-diff-header {
    font-size: 0.82rem; font-weight: 700; color: var(--text-muted);
    margin-bottom: 14px; text-align: center; letter-spacing: 0.2px;
  }
  .topic-diff-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  }
  .topic-diff-row:last-child { margin-bottom: 0; }
  .topic-diff-row.clickable { cursor: pointer; transition: background 0.18s, transform 0.18s; border-radius: 8px; padding: 2px 6px; margin: 0 -6px; min-height: 44px; }
  .topic-diff-row.clickable:hover { background: rgba(8,145,178,0.09); transform: scale(1.01); }
  .topic-diff-row.clickable:hover .topic-drill-hint { opacity: 1; }
  .topic-drill-hint { font-size: 0.7rem; color: var(--blue); font-weight: 700; white-space: nowrap; opacity: 0.7; }
  .topic-diff-name {
    width: 80px; font-size: 0.8rem; font-weight: 700;
    color: var(--text); text-align: start; flex-shrink: 0;
  }
  .topic-diff-bar-wrap {
    flex: 1; background: var(--bg3); border-radius: 4px; height: 8px; overflow: hidden;
  }
  .topic-diff-bar-fill {
    height: 100%; border-radius: 4px;
    transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
  }
  .topic-diff-pct {
    font-size: 0.75rem; font-weight: 800; width: 32px;
    text-align: start; flex-shrink: 0;
  }
  .topic-diff-cta {
    margin-top: 14px; text-align: center;
    font-size: 0.82rem; color: var(--text-muted);
  }
  .topic-diff-cta a {
    color: var(--blue); font-weight: 700; cursor: pointer; text-decoration: none;
  }
  
  .free-compare-card {
    background: linear-gradient(135deg, rgba(16,185,129,0.07), rgba(8,145,178,0.04));
    border: 1.5px solid rgba(16,185,129,0.22);
    border-radius: 16px;
    padding: 20px 18px 18px;
  }
  .compare-title { font-size:1rem;font-weight:800;color:var(--text);margin-bottom:14px;text-align:center; }
  .compare-table { width:100%;border-collapse:collapse; }
  .compare-table th.nabras-col { color:var(--green);font-size:0.82rem;font-weight:800;padding:6px 4px;text-align:center; }
  .compare-table th.other-col { color:var(--text-muted);font-size:0.75rem;font-weight:600;padding:6px 4px;text-align:center; }
  .compare-table th.label-col { text-align:start;font-size:0.72rem;color:var(--text-muted);padding:6px 8px;width:44%; }
  .compare-table td { padding:8px 6px;border-top:1px solid var(--bg3);font-size:0.81rem;text-align:center;vertical-align:middle; }
  .compare-table td:first-child { text-align:start;font-weight:600;color:var(--text);width:44%; }
  .chk-yes { color:var(--green);font-weight:900;font-size:var(--fs-sub); }
  .chk-no { color:var(--text-muted);font-size:0.73rem;line-height:1.3;display:inline-block; }
  
  .compare-table td:nth-child(2) {
    background: rgba(16,185,129,0.04);
  }
  .compare-table th.nabras-col {
    background: rgba(16,185,129,0.07);
    border-radius: 6px 6px 0 0;
    padding: 8px 6px;
  }
  
  
  @keyframes skeletonPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
  }
  #daily-challenge-card:empty {
    min-height: 170px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
  }
  #daily-challenge-card:empty::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.04) 40%,
      rgba(8,145,178,0.06) 50%,
      rgba(255,255,255,0.04) 60%,
      rgba(255,255,255,0) 100%
    );
    background-size: 200% auto;
    animation: progressShimmer 1.6s linear infinite;
  }
  #daily-challenge-card:empty::after {
    content: 'جارٍ تحميل سؤال اليوم…';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: 'Cairo', sans-serif;
    animation: skeletonPulse 1.6s ease-in-out infinite;
    white-space: nowrap;
  }
  /* Item #9، why-box skeleton states (reuses existing skeletonPulse keyframe) */
  .nb-why-skel-wrap{padding:12px 14px;background:rgba(8,145,178,0.05);border-right:3px solid rgba(8,145,178,0.25);border-radius:8px;margin-top:10px;}
  .nb-why-skel{height:9px;border-radius:4px;background:rgba(248,239,232,0.09);margin-bottom:8px;animation:skeletonPulse 1.4s ease-in-out infinite;}
  .nb-why-skel:nth-child(2){animation-delay:.18s;width:88%;}
  .nb-why-skel:nth-child(3){animation-delay:.36s;width:62%;margin-bottom:0;}


  .faq-section { padding:0 20px 32px; }
  .faq-card { background:var(--bg3);border-radius:14px;overflow:hidden; }
  .faq-item { border-bottom:1px solid rgba(255,255,255,0.05); }
  .faq-item:last-child { border-bottom:none; }
  .faq-item summary { padding:14px 18px;font-size:0.88rem;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--text);user-select:none;transition:color 0.15s; }
  .faq-item summary:hover { color:var(--blue); }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item summary::after { content:'▾';font-size:0.75rem;color:var(--text-muted);flex-shrink:0;margin-right:8px;transition:transform 0.2s,color 0.15s; }
  .faq-item[open] summary::after { content:'▴';transform:rotate(180deg); }
  .faq-item[open] summary { color:var(--blue); }
  .faq-item[open] summary::after { color:var(--blue); }
  .faq-answer { padding:0 18px 14px;font-size:0.82rem;color:var(--text-muted);line-height:1.75;animation:fadeIn 0.2s ease; }

  
  .mock-cta-card {
    background: linear-gradient(135deg, rgba(99,102,241,0.13), rgba(79,70,229,0.07));
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 16px;
    padding: 18px 20px;
  }
  .mock-cta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .mock-cta-badge {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--acc-indigo);
    letter-spacing: 0.8px;
    background: rgba(99,102,241,0.15);
    padding: 3px 9px;
    border-radius: 20px;
  }
  .mock-cta-verified {
    font-size: 0.68rem;
    color: #86EFAC;
    font-weight: 700;
  }
  .mock-cta-title {
    font-weight: 900;
    font-size: var(--fs-sub);
    margin-bottom: 5px;
    color: var(--text);
  }
  .mock-cta-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 14px;
  }
  .mock-cta-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }
  .mock-cta-stat {
    flex: 1;
    text-align: center;
    background: rgba(0,0,0,0.18);
    border-radius: 10px;
    padding: 7px 0;
  }
  .mock-cta-stat-num {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.2;
  }
  .mock-cta-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
  }
  .mock-cta-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color: white;
    border: none;
    padding: 12px;
    border-radius: 11px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(99,102,241,0.3);
    min-height: 44px;
  }
  .mock-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.45);
    background: linear-gradient(135deg, #4F46E5, #4338CA);
  }
  .mock-cta-alt {
    text-align: center;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
  }
  .mock-cta-alt a {
    color: var(--acc-indigo3);
    cursor: pointer;
    text-decoration: underline;
  }

  
  .nav-cta {
    background: var(--blue);
    color: white;
    border: none;
    padding: 7px 16px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-cta:hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
  }
  .nb-hit44{position:relative;}
  .nb-hit44::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;}
  .nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  
  .show-more-toggle {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
  }
  .show-more-toggle:hover {
    background: rgba(8,145,178,0.08);
    border-color: rgba(8,145,178,0.25);
    color: var(--blue);
  }
  .show-more-toggle:active {
    transform: scale(0.98);
  }
  .show-more-arrow {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
  }
  .show-more-toggle.expanded .show-more-arrow {
    transform: rotate(180deg);
  }

  
  .section-spacer {
    height: 1px;
    max-width: 200px;
    margin: 20px auto;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  }

  /* KAN-816 new-visitor flow on v2: fv-info (#screen-info) and fv-test (#screen-test). Design qa/KAN-773_design.md,
     mockups marketing/design_queue/kan773_775_v2_flows_2026-10-03 (same tokens as the KAN-774 pq-* screens).
     Contrast (KAN-773 §A11y): selected letter white/#0E7490 5.36, correct #047857/#D1FAE5 4.84, wrong #B91C1C/#FDEBDD 5.58,
     why title #0F766E/#E0F4F8 4.81; dark correct 8.17, wrong 9.24, why title 10.04. Targets >= 44px, answers 56px, actbar 52px. */
  .fv,.fv-act,#fv-exit{--fv-link:#5EEAD4;--fv-soft:rgba(8,145,178,.16);--fv-green:#6EE7B7;--fv-green-soft:rgba(16,185,129,.14);--fv-red:#FECACA;--fv-red-soft:rgba(239,68,68,.14)}
  body.nb-light .fv,body.nb-light .fv-act,body.nb-light #fv-exit{--fv-link:#0F766E;--fv-soft:#E0F4F8;--fv-green:#047857;--fv-green-soft:#D1FAE5;--fv-red:#B91C1C;--fv-red-soft:#FDEBDD}
  #screen-info.active,#screen-test.active{animation:none}   /* the enter transform would re-anchor the fixed actbar */
  body:has(#screen-test.active)>nav{display:none}            /* question screen = focus mode (mockup fv-test has no site nav) */
  .fv{max-width:560px;margin:0 auto;padding:16px 16px 170px;direction:rtl;font-family:Cairo,sans-serif;color:var(--text)}
  .fv button{font-family:inherit;cursor:pointer}
  .fv button:focus-visible,.fv-act button:focus-visible,#fv-exit button:focus-visible{outline:3px solid var(--fv-link);outline-offset:2px}
  .fv-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--text);font-weight:800;font-size:1rem}
  .fv-h1{font-size:var(--fs-title,1.5rem);font-weight:900;line-height:1.4;margin:8px 0 0}
  .fv-lead{color:var(--text-muted);font-size:1rem;line-height:1.75;margin:8px 0 0}
  .fv-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:14px}
  .fv-card>b{display:block;font-size:var(--fs-sub,1.05rem);font-weight:900}
  .fv-card p{margin:6px 0 0;color:var(--text-muted);line-height:1.75}
  .fv-card.soft{background:var(--fv-soft);border-color:transparent}
  .fv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .fv-chips button{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:.95rem;font-weight:800;line-height:1.4}
  .fv-chips button[aria-pressed=true]{border-color:#0891B2;background:#0E7490;color:#fff}
  .fv-act{position:fixed;left:0;right:0;bottom:0;z-index:8000;background:var(--card);border-top:1px solid var(--border);padding:10px 16px calc(14px + env(safe-area-inset-bottom));direction:rtl;font-family:Cairo,sans-serif}
  .fv-act-in{max-width:560px;margin:0 auto;display:flex;gap:8px}
  .fv-act-in.col{flex-direction:column;gap:2px}
  .fv-btn{display:block;width:100%;min-height:52px;border:0;border-radius:14px;background:#0891B2;color:#fff;font:800 1.17rem Cairo,sans-serif;cursor:pointer;box-shadow:0 10px 24px -12px rgba(8,145,178,.7);padding:0 12px}
  .fv-btn.s{background:var(--bg3);color:var(--text);border:1px solid var(--border);box-shadow:none;font-size:1.05rem}
  .fv-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
  .fv-act-in>#btn-dontknow{flex:1}.fv-act-in>#btn-next{flex:2}
  .fv-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 8px;border:0;background:none;color:var(--fv-link);font:800 .95rem Cairo,sans-serif;cursor:pointer}
  .fv-act-in.col .fv-link{width:100%}
  .fv-qhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .fv-x{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--border);background:none;color:var(--text);display:grid;place-items:center;padding:0}
  .fv-grow{flex:1;min-width:0}
  .fv-between{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .fv-cap{color:var(--text-muted);font-size:var(--fs-sm,.85rem);font-weight:700}
  .fv-bar{height:8px;border-radius:999px;background:var(--bg3);overflow:hidden;margin-top:8px}
  .fv-bar i{display:block;height:100%;border-radius:999px;background:#0891B2;transition:width .4s ease}
  .fv-hint{margin:0 0 12px;text-align:center;font-size:var(--fs-sm,.85rem);color:var(--text-muted);font-weight:700}
  .fv-dl{margin:0 0 12px;padding:8px 12px;border-radius:12px;background:var(--fv-soft);color:var(--fv-link);font-size:var(--fs-sm,.85rem);font-weight:800;text-align:center}
  .fv-pill{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--fv-soft);color:var(--fv-link);font-weight:800;font-size:.85rem}
  .fv-pill:empty{display:none}
  .fv-passage{margin-top:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:0 14px}
  .fv-passage summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer;list-style:none}
  .fv-passage summary::-webkit-details-marker{display:none}
  .fv-passage summary::after{content:'';margin-inline-start:auto;width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .fv-passage[open] summary::after{transform:rotate(-135deg)}
  .fv-passage p{margin:0 0 12px;max-height:260px;overflow-y:auto;line-height:1.9;color:var(--text);white-space:pre-line}
  .fv .q-text.fv-stem{font-size:1.12rem;font-weight:800;line-height:1.8;margin:14px 0 4px;white-space:pre-line}
  .fv .options{gap:0}
  .fv .option{width:100%;min-height:56px;margin-top:10px;padding:10px 14px;border:2px solid var(--border);background:var(--card);border-radius:14px;color:var(--text);font-size:1.02rem;font-weight:700;line-height:1.6;text-align:start}
  .fv .option .option-letter{width:32px;height:32px;background:var(--bg3);color:var(--text);font-size:.95rem;font-weight:800}
  .fv .option[aria-pressed=true]{border-color:#0891B2;background:var(--fv-soft)}
  .fv .option[aria-pressed=true] .option-letter{background:#0E7490;color:#fff}
  .fv .option.correct{border-color:var(--fv-green);background:var(--fv-green-soft)}
  .fv .option.wrong{border-color:var(--fv-red);background:var(--fv-red-soft)}
  .fv .option.correct .option-letter,.fv .option.correct .fv-sr{color:var(--fv-green)}
  .fv .option.wrong .option-letter,.fv .option.wrong .fv-sr{color:var(--fv-red)}
  .fv .option.correct .option-letter,.fv .option.wrong .option-letter{background:transparent;border:2px solid currentColor}
  .fv .option.correct,.fv .option.wrong{cursor:default;transform:none;box-shadow:none}
  .fv .option.selected::after{content:none}
  .fv-sr{flex:none;font-weight:900;font-size:1.15rem}
  .fv .q-explanation{background:none;border:0;padding:0;margin-top:14px;color:var(--text);font-size:1rem}
  .fv-why{background:var(--fv-soft);border-radius:16px;padding:14px}
  .fv-why h3{margin:0;color:var(--fv-link);font-size:1.05rem;font-weight:900}
  .fv-why.ok h3{color:var(--fv-green)}
  .fv-why>p{margin:8px 0 0;font-size:1rem;font-weight:600;line-height:1.85;white-space:pre-line}
  .fv-why .fv-link{padding:0;margin-top:6px}
  .fv-why-box{margin-top:10px;padding:12px;border-radius:12px;background:var(--card);font-size:.95rem;line-height:1.8;color:var(--text)}
  #fv-exit{position:fixed;inset:0;z-index:10050;background:rgba(15,23,42,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px;direction:rtl;font-family:Cairo,sans-serif}
  #fv-exit[hidden]{display:none}
  .fv-sheet-in{width:100%;max-width:420px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:18px;padding:20px 16px 14px;text-align:center}
  .fv-sheet-in b{display:block;font-size:var(--fs-h3,1.2rem);font-weight:900}
  .fv-sheet-in p{margin:8px 0 16px;color:var(--text-muted);line-height:1.75}
  .fv-sheet-in .fv-btn+.fv-btn{margin-top:8px}

/* KAN-900 item 1: bank math runs (nbMath / nbMathDom in nb-chat-sim.js) read left to right inside Arabic lines: 14√2, -1, (-4, 6) */
.nb-math{direction:ltr;unicode-bidi:isolate}