:root{color-scheme:light;--bg:#f6f3ec;--paper:#fffdfa;--ink:#17312f;--muted:#62736e;--green:#1a6158;--green2:#277e70;--gold:#d8a651;--stroke:#e7e6db;--mild:#edf4ef;--blush:#fff0e9;--shadow:0 16px 48px rgba(16,45,43,.07);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.shell{max-width:1100px;margin:auto;padding:0 26px}.topbar{height:91px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--stroke)}.brand{border:0;background:none;display:flex;align-items:center;gap:13px;text-align:left;color:var(--ink);padding:0}.brand-mark{background:var(--green);color:#faf5e5;border-radius:15px;height:47px;width:47px;display:grid;place-items:center;font:700 28px Georgia,serif}.brand-text{display:flex;flex-direction:column;gap:3px}.brand-text strong{font-size:14px;letter-spacing:2px}.brand-text small{font-size:11px;color:var(--muted)}.header-end{display:flex;gap:15px;align-items:center}.head-tag{font-size:14px;color:var(--green);font-family:Georgia,"Times New Roman",serif}.icon-button{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--stroke);color:var(--ink)}.nav{display:flex;gap:8px;margin:22px 0 25px}.nav-button{border:1px solid transparent;background:transparent;color:var(--muted);padding:11px 18px;font-size:13px;font-weight:650;border-radius:12px;display:flex;gap:9px;align-items:center}.nav-button span{font-size:21px;line-height:13px}.nav-button.active{background:#fff;border-color:var(--stroke);color:var(--green);box-shadow:0 3px 12px rgba(0,0,0,.02)}.hero{background:#102f2c;border-radius:24px;color:#fff;padding:34px 39px;position:relative;overflow:hidden;display:flex;min-height:252px;justify-content:space-between;gap:20px}.hero:after{content:"ف";position:absolute;right:5%;bottom:-70px;color:#f6e7ab0d;font:360px Georgia,serif;pointer-events:none}.eyebrow{font-weight:750;letter-spacing:2px;text-transform:uppercase;font-size:10px;color:#a3d2c0}.hero h1{font-size:36px;line-height:1.14;letter-spacing:-1.2px;max-width:550px;margin:15px 0 13px}.hero p{font-size:15px;line-height:1.65;color:#cedfda;max-width:520px;margin:0}.hero-symbol{font:70px/1.2 Georgia,serif;align-self:center;opacity:.8;z-index:1}.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:31px 0 14px}.section-title h2{margin:0;font-size:20px;letter-spacing:-.4px}.section-title p{color:var(--muted);font-size:13px;margin:0}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:18px}.metric{background:var(--paper);border:1px solid var(--stroke);border-radius:17px;padding:19px;box-shadow:0 4px 18px rgba(0,0,0,.01)}.metric .number{font-size:29px;letter-spacing:-1px;font-weight:760}.metric .label{color:var(--muted);font-size:12px;margin-top:7px}.metric .mini{font-size:18px;margin-right:4px;color:var(--green)}.columns{display:grid;grid-template-columns:1.5fr 1fr;gap:17px}.panel{background:var(--paper);border:1px solid var(--stroke);border-radius:19px;padding:24px;box-shadow:0 3px 16px rgba(0,0,0,.013)}.panel h3{font-size:18px;margin:0 0 7px}.panel p,.subtext{font-size:13px;line-height:1.7;color:var(--muted)}.set-pill{font-size:11px;display:inline-flex;align-items:center;color:var(--green);background:#e5f0e9;padding:8px 11px;border-radius:50px;font-weight:750}.word-peek{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0;padding:17px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}.arabic{font-family:"Geeza Pro","Noto Naskh Arabic","Traditional Arabic",Georgia,serif;direction:rtl;text-align:right;font-size:46px;line-height:1.65}.word-peek .arabic{font-size:30px}.preview-meaning{font-weight:700;font-size:13px}.button{border:1px solid transparent;padding:13px 18px;border-radius:12px;background:var(--green);color:white;font-weight:750;font-size:13px;display:inline-flex;gap:9px;justify-content:center;align-items:center;transition:background .15s,transform .1s}.button:hover:not(:disabled){background:#135048}.button:active:not(:disabled){transform:scale(.99)}.button.secondary{background:#f0f3ed;border-color:#e4e8df;color:var(--ink)}.button.secondary:hover{background:#e5ede3}.button.ghost{background:transparent;color:var(--green);border-color:var(--stroke)}.button.light{background:#fff;color:var(--green)}.button.wide{width:100%}.mini-text{font-size:12px;color:var(--muted)}.review-list{margin:17px 0 23px;display:grid;gap:11px}.review-row{display:flex;gap:12px;align-items:center}.review-icon{font-size:18px;width:38px;height:38px;border-radius:11px;background:#eef4ed;display:grid;place-items:center}.review-row strong{font-size:13px}.review-row small{font-size:11px;color:var(--muted);display:block;margin-top:3px}.progress-track{height:9px;background:#e8eee7;border-radius:100px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#3b937e,#a3bd71);border-radius:100px}.progress-label{display:flex;justify-content:space-between;margin:9px 0 0;color:var(--muted);font-size:12px}.grid-sets{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.set-card{background:var(--paper);border:1px solid var(--stroke);border-radius:16px;padding:21px;transition:border-color .2s;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;color:var(--ink);width:100%}.set-card:hover{border-color:#9cbdb0}.set-card small{color:var(--muted);display:block;margin-top:6px;font-size:12px}.set-number{width:39px;height:39px;background:#e8f0eb;color:var(--green);border-radius:12px;display:grid;place-items:center;font-weight:800;margin-right:13px;flex-shrink:0}.set-left{display:flex;align-items:center}.set-title{font-size:14px;font-weight:700}.tag{font-size:11px;color:var(--muted);border:1px solid var(--stroke);border-radius:20px;padding:5px 9px;white-space:nowrap}.page-head h1{font-size:29px;letter-spacing:-.7px;margin:6px 0}.page-head p{font-size:14px;color:var(--muted);margin:7px 0 23px;line-height:1.6}.session-wrap{max-width:700px;margin:0 auto}.session-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 13px;color:var(--muted);font-weight:650;font-size:13px}.session-card{min-height:345px;background:var(--paper);border:1px solid var(--stroke);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 22px;box-shadow:var(--shadow)}.session-card .arabic{text-align:center;font-size:62px;margin:12px 0;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}.session-card .nl-prompt{font-size:31px;font-weight:800;line-height:1.4;margin:22px 0}.prompt-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--muted)}.pronounce{border:1px solid var(--stroke);color:var(--green);background:#eef4ed;padding:10px 13px;border-radius:12px;font-weight:700;font-size:12px}.answer{width:100%;border-top:1px solid var(--stroke);margin-top:22px;padding-top:21px}.answer-main{font-size:23px;font-weight:800;margin:5px 0}.answer-main.arabic{font-size:36px}.example-ar{font-family:"Geeza Pro","Noto Naskh Arabic",Georgia,serif;font-size:24px;direction:rtl;line-height:1.8}.example-nl{font-size:13px;color:var(--muted)}.translit{font-size:13px;color:var(--muted)}.session-controls{margin:17px 0;display:grid;gap:12px}.grade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.grade{border-radius:12px;padding:13px 7px;border:1px solid var(--stroke);background:var(--paper);font-size:12px;font-weight:700;color:var(--ink)}.grade span{font-size:10px;color:var(--muted);display:block;margin-top:6px;font-weight:500}.grade.bad{border-color:#e9cdc6;background:#fff3ef;color:#a04432}.grade.good{border-color:#d7e7dc;background:#eaf5eb;color:#196248}.grade.easy{border-color:#e2ddba;background:#faf5e5;color:#6f652a}.input-answer{width:100%;border:1px solid #cdd9d2;background:white;border-radius:11px;padding:13px;font-size:17px;outline:none}.input-answer:focus,.field:focus{border-color:var(--green2);box-shadow:0 0 0 3px #277e7016}.typing-row{display:flex;gap:9px;margin-top:16px;width:100%}.typing-row .input-answer{flex:1}.note{font-size:12px;color:var(--muted);line-height:1.5}.note.success{color:#176b4a}.note.error{color:#a04432}.search-row{display:flex;gap:9px;align-items:center;margin-bottom:16px}.search-row input{flex:1}.field{width:100%;background:white;padding:12px 13px;border:1px solid #dadfd7;border-radius:10px;outline:none;min-width:0}.word-table{width:100%;border-collapse:collapse}.word-table td{padding:12px 8px;border-bottom:1px solid var(--stroke);font-size:13px}.word-table tr:last-child td{border-bottom:0}.word-table .word-ar{font:24px/1.6 "Geeza Pro","Noto Naskh Arabic",Georgia,serif;direction:rtl;text-align:right}.word-table .word-tr{color:var(--muted);font-size:11px}.status{font-size:11px;background:#eaf2ed;border-radius:40px;padding:5px 9px;color:#397364;white-space:nowrap}.status.new{background:#f4f2e9;color:#8a7b4a}.stats-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;height:170px;margin-top:25px}.stats-bar-wrap{display:flex;flex-direction:column;align-items:center;justify-content:end;gap:6px;height:100%}.stats-bar{width:100%;max-width:52px;min-height:5px;border-radius:8px 8px 3px 3px;background:#2f8070}.stats-bar-wrap small{font-size:10px;color:var(--muted)}.field-label{font-size:12px;font-weight:750;display:block;margin:17px 0 7px}.check-row{display:flex;align-items:center;gap:11px;font-size:13px;margin:15px 0}.check-row input{accent-color:var(--green)}.divider{height:1px;background:var(--stroke);margin:22px 0}.modal-backdrop{position:fixed;inset:0;background:#0d2525aa;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px}.modal-backdrop[hidden],.toast[hidden]{display:none}.modal{position:relative;background:var(--paper);border-radius:23px;padding:28px;max-width:560px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 100px rgba(0,0,0,.25)}.modal h2{margin:0 0 8px;font-size:23px}.modal p{color:var(--muted);font-size:13px;line-height:1.7}.modal-close{position:absolute;right:17px;top:15px;border:none;background:#eff2ed;border-radius:9px;width:35px;height:35px;font-size:18px}.form-actions{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:100;background:#173d36;color:white;padding:14px 20px;border-radius:12px;font-size:13px;box-shadow:var(--shadow);max-width:90vw}.footer{font-size:11px;color:#849087;border-top:1px solid var(--stroke);margin-top:37px;padding:20px 0 36px;display:flex;justify-content:space-between;gap:20px}.empty{padding:37px 22px;text-align:center;border:1px dashed #c8d5ca;border-radius:18px;color:var(--muted)}.empty h3{color:var(--ink);font-size:18px}.highlight{color:var(--green);font-weight:750}.code{background:#f0f1e9;border-radius:9px;padding:12px;font-size:12px;overflow-wrap:anywhere}.small-actions{display:flex;flex-wrap:wrap;gap:8px}.ar-list{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}.ar-chip{font-family:"Geeza Pro","Noto Naskh Arabic",Georgia,serif;font-size:23px;padding:5px 11px;background:#f0f4ef;border-radius:10px}.mini-action{color:var(--green);font-size:12px;border:0;background:none;padding:0;font-weight:750}.set-detail-list{display:grid;gap:10px}.set-detail-item{border-bottom:1px solid var(--stroke);padding:10px 0;display:flex;justify-content:space-between;gap:12px;align-items:center}.set-detail-item .arabic{font-size:25px}.arrow{color:#8ba99b;font-size:20px}@media(max-width:690px){.shell{padding:0 15px}.topbar{height:75px}.brand-mark{height:42px;width:42px}.brand-text strong{font-size:12px}.brand-text small{font-size:10px}.head-tag{display:none}.nav{margin:13px 0 17px;gap:2px;justify-content:space-between}.nav-button{padding:10px 7px;font-size:11px;gap:4px;flex:1;justify-content:center}.nav-button span{font-size:18px}.hero{padding:26px 23px;min-height:216px}.hero h1{font-size:29px}.hero p{font-size:13px}.hero-symbol{display:none}.metrics{grid-template-columns:repeat(2,1fr);gap:9px;margin-top:11px}.metric{padding:16px}.metric .number{font-size:24px}.columns,.grid-sets{grid-template-columns:1fr}.panel{padding:20px}.section-title{margin-top:23px}.session-card{min-height:328px;padding:22px 16px}.session-card .arabic{font-size:49px}.grade-grid{gap:5px}.grade{font-size:11px;padding:11px 4px}.footer{flex-direction:column;gap:6px}.page-head h1{font-size:25px}.modal{padding:22px}.word-table td{font-size:11px;padding:11px 4px}.word-table .word-ar{font-size:21px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.login-wrap{min-height:90vh;min-height:90dvh;display:grid;place-items:center;padding:24px 16px}.login-panel{width:100%;max-width:420px;padding:30px}.login-panel h1{font-size:30px;margin-bottom:0}.login-eyebrow{color:var(--green);margin-top:23px}.login-panel .button{margin-top:10px}.button,.grade,.pronounce,.nav-button,.icon-button{min-height:44px}.modal{max-height:90dvh}.typing-row input{min-width:0}.shell{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}@media(max-width:690px){input,select,textarea,.field{font-size:16px}.word-table{table-layout:fixed}.word-table td{overflow-wrap:anywhere}.word-table td:last-child{width:57px}.word-table td:nth-child(3){width:44px}.word-table .status{white-space:normal;font-size:10px;padding:4px}.search-row .button{padding:13px 9px}.hero h1{overflow-wrap:anywhere}.session-head{gap:8px}.session-head span{flex-shrink:0}.grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Comfortable touch targets for secondary mobile controls. */
.brand,.mini-action{min-height:44px}