@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--green:#12372a;--green2:#1d503c;--gold:#d8b66a;--paper:#f7f6f0;--card:#fff;--ink:#17251e;--muted:#6e7b72;--line:#e5e8df;--soft:#eef3ed;--shadow:0 12px 32px #153a2610}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;padding-bottom:calc(86px + env(safe-area-inset-bottom));transition:background .2s,color .2s}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d8b66a;outline-offset:3px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100% - 1040px)/2));background:var(--green);color:white;position:sticky;top:0;z-index:10;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brand-mark{width:42px;height:42px;border:1px solid var(--gold);border-radius:14px;display:grid;place-items:center;color:var(--gold);font:700 25px Amiri,serif}.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{font-size:10px;color:#c8d6cd;margin-top:4px}.icon-btn{border:1px solid #ffffff42;background:#ffffff12;color:white;border-radius:12px;width:40px;height:40px;font-size:20px}.hero{background:var(--green);color:white;padding:34px 20px 38px;text-align:center;border-radius:0 0 28px 28px}.bismillah{font:24px Amiri,serif;color:var(--gold);margin:0 0 12px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#a88231;margin:0 0 9px}.hero .eyebrow{color:#c6b075}.hero h1{font-size:clamp(31px,7vw,48px);line-height:1.12;letter-spacing:-1.4px;margin:12px 0}.hero h1 span{color:var(--gold)}.hero-copy{font-size:13px;line-height:1.7;color:#d1ddd5;max-width:460px;margin:0 auto 22px}.search-box{max-width:620px;margin:auto;display:flex;align-items:center;gap:10px;padding:5px 8px 5px 16px;background:white;color:var(--green);border-radius:15px;box-shadow:0 12px 30px #061c1280}.search-box>span{font-size:26px}.search-box input{border:0;outline:0;min-width:0;flex:1;padding:12px 0;color:#17251e;background:transparent;font-size:14px}.search-box button{border:0;background:#eef3ed;color:var(--green);border-radius:9px;width:32px;height:32px}.search-hint{font-size:10px;color:#bdcec3;margin:11px 0 0}.status-line{font-size:11px;color:#d9e6dc;min-height:12px;margin:8px 0 0}.quick-stats{max-width:760px;margin:-17px auto 0;position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:0 16px;gap:9px}.quick-stats>div{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:13px 8px;text-align:center}.stat-icon{display:block;color:#b58f3f;font-size:18px}.quick-stats strong{display:block;font-size:19px;margin:4px 0}.quick-stats small{display:block;color:var(--muted);font-size:10px}.section{max-width:920px;margin:34px auto 0;padding:0 18px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.section-heading h2{font-size:21px;letter-spacing:-.5px;margin:0}.muted{color:var(--muted);font-size:12px}.pill{border:1px solid #e2d4ac;background:#faf5e6;color:#8b6b27;border-radius:100px;padding:7px 11px;font-size:10px;white-space:nowrap}.daily-card{background:linear-gradient(120deg,#17412f,#245740);color:white;border-radius:20px;padding:21px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;box-shadow:var(--shadow)}.daily-card .arabic{font:36px Amiri,serif;color:var(--gold);direction:rtl;text-align:right}.daily-card h3{margin:5px 0;font-size:17px}.daily-card p{margin:6px 0;color:#d4e0d7;font-size:12px;line-height:1.6}.daily-card .day-label{color:#e1c980;font-size:9px;letter-spacing:1.4px}.daily-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.button{border:0;border-radius:10px;padding:10px 13px;font-size:12px;font-weight:700}.button-gold{background:var(--gold);color:#172d20}.button-outline{background:transparent;border:1px solid var(--line);color:var(--green)}.daily-card .button-outline{border-color:#ffffff50;color:white}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.feature-card{position:relative;text-align:left;min-height:137px;border:1px solid var(--line);border-radius:17px;background:var(--card);padding:16px;box-shadow:var(--shadow);color:var(--ink)}.feature-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--soft);color:var(--green);font-size:19px;margin-bottom:14px}.feature-card strong,.feature-card small{display:block}.feature-card strong{font-size:13px}.feature-card small{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5}.card-arrow{position:absolute;right:15px;top:16px;color:#b58f3f}.word-list{display:grid;gap:10px}.word-card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.word-card .word-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.word-card h3{font:700 25px Amiri,serif;direction:rtl;margin:0;color:var(--green);text-align:right}.word-card .english{font-size:14px;font-weight:700}.word-card p{font-size:12px;color:var(--muted);line-height:1.55;margin:6px 0}.word-card .example-ar{font:19px Amiri,serif;color:var(--green2);direction:rtl}.tag{display:inline-block;background:var(--soft);color:var(--green2);font-size:9px;border-radius:6px;padding:4px 7px;margin-top:4px}.word-actions{display:flex;flex-direction:column;gap:7px}.mini-btn{background:var(--soft);border:1px solid var(--line);border-radius:9px;min-width:38px;height:36px;color:var(--green);font-size:16px}.empty-state{padding:22px;border:1px dashed var(--line);border-radius:14px;text-align:center;font-size:12px;color:var(--muted);line-height:1.6}.full{width:100%;margin-top:12px}.small{font-size:10px;line-height:1.6}.lesson-list{display:grid;gap:10px}.lesson{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px}.lesson h3{font-size:15px;margin:0 0 8px}.lesson p{font-size:12px;color:var(--muted);line-height:1.7;margin:7px 0}.lesson .arabic{font:26px Amiri,serif;color:var(--green);direction:rtl}.quiz-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}.quiz-progress{font-size:10px;color:var(--muted)}.quiz-question{font-size:18px;font-weight:700;line-height:1.5;margin:18px 0}.quiz-options{display:grid;gap:9px}.quiz-option{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--card);text-align:left;color:var(--ink);font-size:13px}.quiz-option.correct{background:#e3f5e8;border-color:#4a9c63;color:#173c25}.quiz-option.wrong{background:#fff0e8;border-color:#d98a62;color:#562c19}.quiz-feedback{font-size:12px;margin:12px 0;min-height:18px;line-height:1.5}.text-btn{border:0;background:transparent;color:var(--green);font-size:12px}.about-card{display:flex;gap:17px;align-items:flex-start;background:#f0ead9;border:1px solid #e5d9b7;border-radius:18px;padding:20px}.about-symbol{font:18px Amiri,serif;color:#99752d;white-space:nowrap}.about-card h2{font-size:17px;margin:0 0 7px}.about-card p{font-size:11px;line-height:1.7;color:#5c655c;margin:0 0 9px}.about-card small{font-size:10px;color:#596357}.ad-slot{max-width:860px;margin:28px auto 20px;padding:16px 20px;text-align:center;border:1px dashed #cbd2c8;border-radius:12px;color:var(--muted)}.ad-slot span{font-size:9px;letter-spacing:1.6px}.ad-slot p{font-size:10px;margin:7px 0 0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:center;padding:8px max(6px,calc((100% - 620px)/2));padding-bottom:max(8px,env(safe-area-inset-bottom));box-shadow:0 -8px 25px #183d2508}.nav-item{flex:1;max-width:110px;border:0;background:transparent;color:var(--muted);font-size:9px;padding:5px 3px;display:flex;flex-direction:column;align-items:center;gap:4px}.nav-item span{font-size:20px}.nav-item.active{color:var(--green);font-weight:700}.nav-item.active span{color:#b58f3f}footer{text-align:center;color:var(--muted);font-size:10px;padding:15px 20px 0}footer a{color:var(--green)}[hidden]{display:none!important}.dark{--paper:#101b16;--card:#19271f;--ink:#ecf1eb;--muted:#a6b3a9;--line:#2b4034;--soft:#24382c;--shadow:0 12px 32px #0002}.dark .about-card{background:#2b2a1d;border-color:#50482c}.dark .about-card p,.dark .about-card small{color:#d0d1bd}.dark .pill{background:#322d1d;border-color:#62512a;color:#e2c778}.dark .quiz-option{background:#1d2b22;color:var(--ink)}.dark .quiz-option.correct{background:#21452d;color:#e4f8e9}.dark .quiz-option.wrong{background:#4c2c20;color:#fff0e8}.dark .word-card h3,.dark .lesson .arabic{color:#d8c27f}.dark .text-btn,.dark footer a{color:#d8c27f}
@media(min-width:700px){.hero{padding:46px 20px 48px}.quick-stats{margin-top:-22px}.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.feature-card{min-height:155px}.section{margin-top:40px}.word-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.brand small{font-size:9px}.daily-card{padding:16px}.daily-card .arabic{font-size:29px}.word-card{padding:11px}.word-card h3{font-size:22px}.word-card .english{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* Expanded beginner lesson notes */
.lesson-expanded h4{font-size:12px;color:var(--green);margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lesson-expanded ol{padding-left:22px;margin:8px 0 14px}
.lesson-expanded li{font-size:12px;line-height:1.75;color:var(--muted);padding:3px 0}
.lesson-vocab{display:grid;gap:8px;margin:8px 0 14px}
.lesson-vocab-row{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr) 38px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px}
.lesson-vocab-row .arabic{font:22px Amiri,serif;color:var(--green);text-align:right}
.lesson-vocab-row span:nth-child(2){font-size:11px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.lesson-vocab-row span:nth-child(2) strong{color:var(--ink)}
.lesson-expanded>.button{margin-top:10px}

/* Sequential mini-lesson course */
.course-progress-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px;margin-bottom:14px}.course-progress-card h3{font-size:17px;margin:0 0 6px}.course-progress-card p:not(.eyebrow){font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 13px}.course-progress-track{height:8px;background:var(--soft);border-radius:20px;overflow:hidden}.course-progress-track span{display:block;height:100%;background:var(--gold);border-radius:20px;transition:width .2s}.lesson-menu{display:grid;gap:9px}.lesson-menu-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink)}.lesson-menu-item:not(:disabled):active{transform:scale(.995)}.lesson-menu-item.is-locked{opacity:.56;cursor:not-allowed;background:var(--soft)}.lesson-menu-item.is-complete{border-color:#91b99b}.lesson-number{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--green);font-weight:800;font-size:13px}.is-complete .lesson-number{background:#e3f5e8;color:#1c6a36}.lesson-menu-copy{min-width:0;flex:1}.lesson-menu-copy strong,.lesson-menu-copy small{display:block}.lesson-menu-copy strong{font-size:12px;line-height:1.5}.lesson-menu-copy small{font-size:10px;color:var(--muted);margin-top:3px}.lesson-menu-arrow{font-size:22px;color:#a88231}.lesson-lock-note{margin-top:13px}.lesson-detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}.lesson-detail{padding:19px}.lesson-detail h3{font-size:19px;line-height:1.5}.lesson-complete-box{margin-top:22px;padding:16px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}.lesson-complete-box h4{margin-top:0!important}.lesson-complete-box p{font-size:12px}.lesson-complete-box button{width:100%;margin-top:8px}.lesson-unlocked-notice{padding:14px 16px;margin-bottom:13px;border-radius:13px;background:#e6f5e9;border:1px solid #b8dfc0;color:#1c5b2b}.lesson-unlocked-notice strong{font-size:13px}.lesson-unlocked-notice p{font-size:12px;margin:5px 0 0;line-height:1.5}.lesson-confirm-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#061c12bb}.lesson-confirm-dialog{width:min(100%,430px);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 20px 80px #0004}.confirm-mark,.finish-star{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--soft);color:#a88231;font-size:24px;margin-bottom:14px}.lesson-confirm-dialog h3,.course-finish-card h3{font-size:21px;line-height:1.35;margin:6px 0 10px}.lesson-confirm-dialog p:not(.eyebrow),.course-finish-card p{font-size:13px;line-height:1.75;color:var(--muted)}.confirm-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}.confirm-actions button{width:100%;min-height:43px}.course-finish-card{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:25px 20px}.course-finish-card .finish-star{margin:0 auto 15px}.course-finish-card .arabic{font:30px Amiri,serif;color:var(--green);direction:rtl}.course-finish-card button{margin-top:10px}.dark .lesson-unlocked-notice{background:#1e4028;border-color:#315d3d;color:#d7f3dd}.dark .is-complete .lesson-number{background:#21452d;color:#e4f8e9}@media(min-width:650px){.lesson-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.confirm-actions{grid-template-columns:1fr 1.4fr}}


/* Professional visual refresh v10 — presentation only */
:root{
  --green:#14283f;--green2:#24445f;--gold:#b89a63;--paper:#f3f5f7;
  --card:#ffffff;--ink:#172536;--muted:#667586;--line:#dce3e9;
  --soft:#edf2f6;--shadow:0 14px 36px rgba(20,40,63,.08)
}
.topbar,.hero{background:linear-gradient(125deg,#14283f,#203e59)}
.brand-mark{border-color:#c9b17d;color:#e2d2ad}
.hero .eyebrow,.eyebrow{color:#a48651}
.hero h1 span,.bismillah{color:#d7c39a}
.button-gold{background:#d7c39a;color:#182b40}
.button-outline{color:#203e59;border-color:#d5dee6}
.feature-icon,.mini-btn,.tag{background:#edf2f6;color:#24445f}
.word-card h3,.lesson .arabic,.lesson-vocab-row .arabic{color:#24445f}
.nav-item.active,.text-btn,footer a{color:#24445f}
.nav-item.active span,.card-arrow,.lesson-menu-arrow{color:#a48651}
.daily-card{background:linear-gradient(125deg,#203e59,#14283f)}
.daily-card .arabic{color:#e0cfaa}
.pill{background:#f5f1e8;border-color:#e5d9c3;color:#806b45}
.about-card{background:#f4f1e9;border-color:#e6dece}
.lesson-unlocked-notice{background:#edf5f2;border-color:#c9dfd7;color:#244c42}
@media(hover:hover){
  .feature-card,.word-card,.lesson,.quiz-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .feature-card:hover,.word-card:hover,.lesson:hover,.quiz-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,40,63,.10);border-color:#c5d2dd}
}
.dark{--paper:#101a27;--card:#192738;--ink:#edf2f7;--muted:#a8b6c4;--line:#304255;--soft:#23364a;--shadow:0 14px 36px #0003}
.dark .topbar,.dark .hero{background:linear-gradient(125deg,#101d2d,#172d43)}
.dark .feature-icon,.dark .mini-btn,.dark .tag{background:#263b50;color:#d4e0eb}
.dark .word-card h3,.dark .lesson .arabic{color:#d7c39a}
.dark .about-card{background:#2b3038;border-color:#46505a}
.dark .about-card p,.dark .about-card small{color:#d0d7df}
.dark .lesson-unlocked-notice{background:#203c39;border-color:#345d56;color:#d9eee8}

/* Visual covers for the main learning destinations */
.feature-grid .feature-card {
  padding: 0;
  overflow: hidden;
  display: block;
  min-height: 0;
  text-decoration: none;
}
.feature-grid .feature-card .feature-art {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
  background: #12372a;
}
.feature-grid .feature-card .feature-copy {
  display: block;
  padding: 13px 15px 16px;
}
.feature-grid .feature-card .feature-icon {
  margin: 0 0 9px;
  width: 31px;
  height: 31px;
  font-size: 16px;
}
.feature-grid .feature-card strong { padding-right: 16px; }
.feature-grid .feature-card .card-arrow { top: 126px; right: 14px; }
.feature-grid .feature-card:focus-visible {
  outline: 3px solid #d9bd75;
  outline-offset: 3px;
}
@media (min-width: 760px) {
  .feature-grid .feature-card .feature-art { height: 132px; }
  .feature-grid .feature-card .card-arrow { top: 146px; }
}