:root{--bg:#f7f6f0;--surface:#fffefa;--surface2:#f1f2e9;--text:#202c25;--muted:#788078;--line:#e9e8df;--green:#185a43;--green2:#267256;--green-soft:#e7f0e9;--gold:#b18b48;--gold-soft:#f5eedf;--red:#a64b45;--shadow:0 8px 28px #1e34220a;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;line-height:1.65}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}.app-shell{min-height:100vh}.sidebar{width:258px;background:#fbfaf5;border-left:1px solid var(--line);position:fixed;inset:0 0 0 auto;display:flex;flex-direction:column;padding:25px 17px 16px;z-index:10}.brand{display:flex;align-items:center;gap:11px;padding:1px 8px 30px}.brand-mark{height:39px;width:39px;border-radius:12px;background:var(--green);color:#f3e5bd;display:grid;place-items:center;font-size:24px}.brand strong,.brand small,.profile-row strong,.profile-row small{display:block}.brand strong{font-size:15px}.brand small,.profile-row small{font-size:11px;color:var(--muted)}.nav-label{padding:0 10px 8px;color:#a0a49b;font-size:11px}.sidebar nav{display:grid;gap:4px}.nav-item{border:0;background:transparent;text-align:right;display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:11px;color:#616c64;transition:.18s}.nav-item:hover{background:var(--surface2);color:var(--green)}.nav-item.active{background:var(--green-soft);color:var(--green);font-weight:600}.nav-icon{width:18px;text-align:center;font-size:17px;color:var(--green2)}.nav-badge{margin-right:auto;border-radius:10px;background:var(--gold-soft);color:#81662d;padding:0 7px;font-size:11px}.sidebar-bottom{margin-top:auto}.quote-mini{margin:12px 3px 13px;padding:15px 15px 11px;background:#f2f1e8;border-radius:14px;position:relative}.quote-mini span{font-family:Amiri,serif;font-size:23px;color:var(--gold)}.quote-mini p{margin:3px 0 5px;font-family:Amiri,serif;font-size:16px;color:#44574a;line-height:1.75}.quote-mini small{font-size:10px;color:var(--muted)}.profile-row{border-top:1px solid var(--line);padding:15px 5px 1px;display:flex;gap:9px;align-items:center}.profile-row strong{font-size:12px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:#886829}.profile-row .icon-button{margin-right:auto}.main-area{margin-right:258px;min-height:100vh}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:#f8f7f2d9;position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}.breadcrumb{color:var(--muted);font-size:12px}.breadcrumb span{padding:0 8px;color:#c6c7bf}.breadcrumb b{color:var(--text);font-weight:600}.top-actions{display:flex;align-items:center;gap:18px}.today-label{color:var(--muted);font-size:12px}.icon-button{border:1px solid var(--line);background:var(--surface);width:35px;height:35px;border-radius:11px;display:grid;place-items:center;color:var(--green);font-size:18px}.mobile-menu{display:none}.content{max-width:1280px;margin:auto;padding:33px 38px 60px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.03em}.page-heading h1{font-size:27px;line-height:1.35;margin:3px 0 5px;font-weight:600}.page-heading p{margin:0;color:var(--muted)}.greeting{padding:25px 29px;border-radius:22px;color:#fff;background:linear-gradient(115deg,#164e3b,#1d6950);position:relative;overflow:hidden;box-shadow:0 12px 32px #124d381e;margin-bottom:20px}.greeting:after{content:'۞';position:absolute;left:35px;top:-60px;font-family:Amiri,serif;font-size:240px;color:#ffffff0a;pointer-events:none}.greeting .eyebrow{color:#dfc991}.greeting h1{font-size:27px;margin:6px 0 5px;font-weight:500}.greeting p{margin:0;color:#e0eae3;font-size:13px}.greeting-meta{display:flex;gap:25px;margin-top:20px;position:relative;z-index:1}.greeting-meta div{font-size:11px;color:#d1e0d6}.greeting-meta b{display:block;color:white;font-size:13px;font-weight:500}.grid{display:grid;gap:16px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:19px 20px;box-shadow:var(--shadow)}.stat-card{display:flex;align-items:center;gap:13px;min-height:101px}.stat-icon{width:42px;height:42px;border-radius:13px;background:var(--green-soft);display:grid;place-items:center;color:var(--green);font-size:19px;flex:none}.stat-icon.gold{background:var(--gold-soft);color:var(--gold)}.stat-label{font-size:11px;color:var(--muted)}.stat-value{font-weight:600;font-size:23px;line-height:1.35}.stat-unit{font-weight:400;font-size:12px;color:var(--muted);margin-right:4px}.dashboard-grid{grid-template-columns:1.32fr .92fr;align-items:start}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card-head h2,.section-title{font-size:15px;margin:0;font-weight:600}.card-head p{font-size:11px;color:var(--muted);margin:3px 0 0}.text-button{border:0;background:none;color:var(--green);font-size:12px}.today-plan{padding:21px}.plan-progress{display:flex;align-items:center;gap:12px;margin:0 0 14px}.progress-track{height:6px;border-radius:9px;background:var(--surface2);flex:1;overflow:hidden}.progress-track i{display:block;height:100%;background:var(--green2);border-radius:9px;transition:width .3s}.progress-label{font-size:11px;color:var(--muted)}.task-row{display:flex;align-items:center;gap:11px;padding:12px 2px;border-bottom:1px solid #efeee8}.task-row:last-of-type{border:0}.task-check{appearance:none;width:18px;height:18px;border:1.5px solid #c8cec6;border-radius:6px;margin:0;display:grid;place-items:center;flex:none;cursor:pointer}.task-check:checked{background:var(--green);border-color:var(--green)}.task-check:checked:after{content:'✓';color:white;font-size:12px}.task-copy{flex:1}.task-copy strong{display:block;font-weight:500;font-size:12px}.task-copy small{font-size:10px;color:var(--muted)}.task-done .task-copy strong{text-decoration:line-through;color:#9ba49c}.task-type{font-size:10px;padding:3px 8px;border-radius:20px;background:var(--green-soft);color:var(--green)}.task-type.revision{background:var(--gold-soft);color:#846c36}.empty-inline{padding:20px;text-align:center;color:var(--muted);font-size:12px}.journey-card{background:#f4f3e9}.journey-phase{font-size:12px;color:var(--green);font-weight:600}.journey-card p{font-size:11px;color:var(--muted);margin:3px 0 15px}.overall-row{display:flex;align-items:center;gap:14px}.ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green2) var(--p,0%),#dfe6dd 0);position:relative;flex:none}.ring:before{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--surface)}.ring strong{position:relative;font-size:16px;color:var(--green)}.overall-row div:last-child{font-size:11px;color:var(--muted)}.overall-row b{display:block;color:var(--text);font-size:13px}.mini-list{display:grid;gap:9px}.mini-item{display:flex;align-items:center;gap:9px;font-size:11px}.mini-dot{width:7px;height:7px;background:var(--gold);border-radius:50%}.mini-item span:last-child{margin-right:auto;color:var(--muted)}.action-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.primary,.secondary,.danger{border:1px solid transparent;border-radius:10px;padding:9px 14px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.17s}.primary{background:var(--green);color:white}.primary:hover{background:#124631;transform:translateY(-1px)}.secondary{background:var(--surface);border-color:var(--line);color:var(--text)}.secondary:hover{border-color:#b7c7ba;color:var(--green)}.danger{background:#fff4f2;color:var(--red);border-color:#f1d9d5}.small-btn{padding:6px 10px;font-size:11px}.section-space{margin-top:18px}.muted{color:var(--muted)}.small{font-size:11px}.two-col{grid-template-columns:1fr 1fr}.three-col{grid-template-columns:repeat(3,1fr)}.juz-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.juz-card{cursor:pointer;transition:.17s}.juz-card:hover{transform:translateY(-2px);border-color:#b8cab9}.juz-top{display:flex;justify-content:space-between;align-items:center}.juz-top h3{margin:0;font-size:14px}.status-pill{font-size:10px;border-radius:20px;padding:4px 9px;background:#f1f0e8;color:#72786d}.status-pill.active{background:var(--green-soft);color:var(--green)}.status-pill.warn{background:var(--gold-soft);color:#81652b}.juz-card .progress-track{margin:13px 0 7px}.juz-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.surah-list{display:grid;gap:9px}.surah-row{display:grid;grid-template-columns:40px 1fr 170px auto;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.surah-no{width:31px;height:31px;border-radius:10px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:11px}.surah-row strong{font-weight:500}.surah-row small{display:block;color:var(--muted);font-size:10px}.select,.input,.textarea{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#719b7c;box-shadow:0 0 0 3px #23644714}.textarea{min-height:82px;resize:vertical}.field{display:grid;gap:5px}.field label{font-size:11px;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .wide{grid-column:1/-1}.filters{display:flex;align-items:center;gap:8px}.review-card{border-right:3px solid var(--gold)}.review-card.overdue{border-color:var(--red)}.review-top{display:flex;justify-content:space-between;gap:8px}.review-top strong{font-size:13px}.review-top small{color:var(--muted);font-size:10px}.review-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.rating-btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:6px 9px;font-size:10px}.rating-btn:hover{border-color:var(--green);color:var(--green)}.session-card{position:relative;padding-right:29px}.session-card:before{content:'';position:absolute;right:14px;top:26px;bottom:-27px;width:1px;background:var(--line)}.session-card:last-child:before{display:none}.timeline-dot{position:absolute;right:9px;top:23px;width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid var(--surface)}.session-meta{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}.tag{border-radius:20px;padding:3px 8px;background:var(--surface2);font-size:10px;color:var(--muted)}.phase-row{display:grid;grid-template-columns:35px 1fr auto;gap:13px;align-items:start;padding:15px 0;border-bottom:1px solid var(--line)}.phase-number{background:var(--green-soft);color:var(--green);width:30px;height:30px;border-radius:10px;display:grid;place-items:center}.phase-row h3{font-size:13px;margin:0}.phase-row p{font-size:11px;color:var(--muted);margin:4px 0}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar-day-label{text-align:center;color:var(--muted);font-size:10px;padding:4px}.calendar-day{min-height:74px;border:1px solid var(--line);border-radius:11px;padding:7px;background:var(--surface);cursor:pointer;text-align:right}.calendar-day:hover,.calendar-day.selected{border-color:var(--green2);box-shadow:0 0 0 2px #21654a10}.calendar-day.muted-day{opacity:.42}.calendar-day.today{background:var(--green-soft)}.calendar-day .day-no{font-size:11px}.calendar-day .activity-dot{height:5px;width:5px;border-radius:50%;display:inline-block;background:var(--green2);margin-left:3px}.calendar-day .activity-dot.gold{background:var(--gold)}.heatmap{display:grid;grid-template-columns:repeat(26,1fr);gap:5px;direction:ltr}.heat-cell{aspect-ratio:1;border-radius:3px;background:#ebeee7;position:relative}.heat-cell[data-level="1"]{background:#c9ddcd}.heat-cell[data-level="2"]{background:#80b291}.heat-cell[data-level="3"]{background:#43825e}.heat-cell[data-level="4"]{background:#19583c}.bar-list{display:grid;gap:12px}.bar-row{display:grid;grid-template-columns:95px 1fr 48px;gap:10px;align-items:center;font-size:11px}.bar-row .progress-track{height:8px}.bar-row .progress-track i{background:var(--gold)}.empty-state{padding:36px 18px;text-align:center;background:var(--surface);border:1px dashed #d8dacf;border-radius:var(--radius);color:var(--muted)}.empty-state .empty-icon{font-size:28px;color:var(--gold)}.empty-state h3{font-size:14px;color:var(--text);margin:6px 0}.empty-state p{font-size:11px;margin:0 0 13px}.settings-card{margin-bottom:14px}.settings-card h2{font-size:14px;margin:0 0 13px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}.toggle-row:last-child{border:0}.toggle{width:37px;height:21px;appearance:none;border-radius:20px;background:#d9dcd6;position:relative;cursor:pointer}.toggle:after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:white;top:3px;right:3px;transition:.18s}.toggle:checked{background:var(--green2)}.toggle:checked:after{right:19px}.modal-backdrop{position:fixed;inset:0;background:#13251dcc;display:grid;place-items:center;padding:16px;z-index:30}.modal{width:min(570px,100%);max-height:90vh;overflow:auto;background:var(--surface);border-radius:20px;padding:23px;box-shadow:0 24px 90px #071a1290}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h2{font-size:17px;margin:0}.modal-footer{display:flex;justify-content:flex-start;gap:8px;margin-top:18px}.toast{position:fixed;bottom:24px;left:24px;z-index:40;background:#1d543e;color:white;border-radius:12px;padding:10px 15px;box-shadow:var(--shadow);font-size:12px;animation:appear .2s ease}.hidden{display:none!important}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}body.dark{--bg:#141c18;--surface:#1c2721;--surface2:#26332b;--text:#e7eee8;--muted:#a1afa4;--line:#304036;--green-soft:#263e30;--gold-soft:#3b3423;--shadow:0 8px 28px #0002}body.dark .sidebar{background:#18221c}body.dark .topbar{background:#18221cdb}body.dark .quote-mini{background:#222e26}body.dark .greeting{background:linear-gradient(115deg,#123d2e,#18583f)}body.dark .journey-card{background:#222e26}body.dark .ring:before{background:var(--surface)}body.dark .calendar-day.today{background:#223c2e}body.dark .heat-cell{background:#28362d}body.dark .heat-cell[data-level="1"]{background:#315b3e}body.dark .heat-cell[data-level="2"]{background:#3d7951}body.dark .heat-cell[data-level="3"]{background:#4e9567}body.dark .heat-cell[data-level="4"]{background:#65ae7b}body.dark .danger{background:#3a2423}
@media(max-width:1050px){.sidebar{width:225px}.main-area{margin-right:225px}.content{padding:27px 24px 48px}.topbar{padding:0 24px}.stats-grid{grid-template-columns:repeat(2,1fr)}.juz-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{transform:translateX(105%);transition:transform .22s;width:270px;box-shadow:-20px 0 40px #0001}.sidebar.open{transform:translateX(0)}.main-area{margin-right:0}.topbar{height:59px;padding:0 15px}.mobile-menu{display:block;border:0;background:none;color:var(--green);font-size:20px}.breadcrumb{margin-left:auto;margin-right:8px}.today-label{display:none}.content{padding:21px 15px 40px}.greeting{padding:21px}.greeting h1{font-size:23px}.greeting-meta{gap:12px;flex-wrap:wrap}.stats-grid{gap:9px}.stat-card{padding:13px;min-height:87px;gap:9px}.stat-icon{height:35px;width:35px}.stat-value{font-size:19px}.dashboard-grid,.two-col{grid-template-columns:1fr}.three-col{grid-template-columns:1fr}.juz-grid{grid-template-columns:1fr 1fr;gap:9px}.card{padding:15px}.surah-row{grid-template-columns:35px 1fr auto;gap:8px}.surah-row .select{grid-column:2/-1}.page-heading{align-items:flex-start}.page-heading h1{font-size:23px}.heatmap{gap:3px}.calendar-day{min-height:55px;padding:5px}.calendar-grid{gap:4px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.filters{flex-wrap:wrap}.top-actions{gap:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Refinement pass: larger Arabic type, tighter desktop use, and clearer focus states. */
body{font-size:15px;line-height:1.75}
.content{max-width:1480px;padding-top:28px}
.page-heading h1{font-size:30px}
.page-heading p,.card-head p,.stat-label,.field label,.small,.juz-meta,.task-copy small{font-size:12px}
.card-head h2,.section-title{font-size:16px}
.stat-value{font-size:25px}
.nav-item{font-size:14px;min-height:43px}
.primary,.secondary,.danger{min-height:39px}
.icon-button,.mobile-menu{min-width:40px;min-height:40px}
.input,.select,.textarea{font-size:14px;min-height:42px}
.textarea{line-height:1.7}
.greeting{padding:20px 27px;margin-bottom:16px}
.greeting h1{font-size:26px}
.greeting-meta{margin-top:14px}
.card{padding:18px}
.stats-grid{margin-bottom:14px}
.section-space{margin-top:14px}
.juz-card{width:100%;text-align:right;border:1px solid var(--line);color:var(--text);font-family:inherit}
.juz-card:hover,.juz-card:focus-visible{border-color:#8eae96;transform:translateY(-1px)}
.juz-card .progress-track{margin:10px 0 8px}
.session-card{margin-right:4px}
.session-entry{position:relative;padding:2px 16px 15px 0}
.session-main{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.session-main h3{font-size:15px;margin:0}
.session-main p{font-size:12px;color:var(--muted);margin:3px 0}
.session-meta{margin:7px 0}
.step-indicator{padding:9px 12px;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:12px;margin-bottom:14px}
.step-actions{display:flex;gap:8px;justify-content:space-between;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.mistake-accordion details{border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:6px 0}
.mistake-accordion summary{cursor:pointer;font-size:13px}
.mistake-accordion .field{margin-top:8px;grid-template-columns:1fr 100px;align-items:center}
.summary-box{border-radius:11px;background:var(--green-soft);padding:10px 12px;color:var(--green);font-size:12px;line-height:1.7}
.quran-quote{font-family:Amiri,serif;font-size:25px;text-align:center;padding:6px;color:var(--green);line-height:1.8}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #b18b48;outline-offset:2px}
.calendar-day:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.task-check{width:21px;height:21px}
.empty-state h3{font-size:16px}
.empty-state p{font-size:13px}
.quote-mini p{font-size:17px}
.profile-row small{font-size:12px}
.heat-cell{min-width:7px}
@media(min-width:1500px){.content{padding-left:42px;padding-right:42px}.dashboard-grid{grid-template-columns:1.4fr .9fr}.juz-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){.content{padding:18px 13px 32px}.page-heading h1{font-size:25px}.greeting{padding:18px}.greeting-meta{gap:10px}.greeting-meta div{min-width:42%}.stats-grid{grid-template-columns:1fr 1fr}.juz-grid{grid-template-columns:1fr 1fr}.card{padding:14px}.stat-label{font-size:11px}.stat-value{font-size:21px}.session-main{align-items:flex-start}.calendar-day-label{font-size:9px}.calendar-day{min-height:52px}.form-grid{gap:10px}.modal{padding:17px}.modal-footer{position:sticky;bottom:-17px;background:var(--surface);padding:12px 0 2px}}
@media(max-width:420px){.stats-grid,.juz-grid{grid-template-columns:1fr 1fr}.stat-card{min-width:0}.stat-value{font-size:19px}.topbar{padding:0 10px}.breadcrumb{font-size:11px}.calendar-grid{gap:3px}.calendar-day{padding:4px;min-height:47px}.calendar-day .day-no{font-size:10px}.heatmap{grid-template-columns:repeat(18,1fr)}}
@media(prefers-reduced-motion:reduce){.juz-card:hover{transform:none}}