:root{
  --bg:#0a0907;
  --bg-soft:#12100d;
  --panel:#15130f;
  --panel-2:#1d1912;
  --text:#f5efe5;
  --muted:#b0a89b;
  --gold:#a98950;
  --gold-2:#c9aa6c;
  --gold-3:#ecd49b;
  --gold-soft:#715d39;
  --gold-faint:rgba(201,170,108,.12);
  --line:rgba(201,170,108,.22);
  --shadow:0 28px 80px rgba(0,0,0,.46);
  --radius:26px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% -5%,rgba(201,170,108,.095),transparent 29%),
    radial-gradient(circle at 92% 18%,rgba(201,170,108,.055),transparent 23%),
    linear-gradient(180deg,#0b0a08,#090806 56%,#0b0907);
}
body.drawer-open{overflow:hidden}
button,select,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.44}
[hidden]{display:none!important}

.topbar{
  position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto auto auto;gap:20px;align-items:center;
  padding:15px 38px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(8,8,7,.87);backdrop-filter:blur(20px);
}
.brand{display:flex;align-items:center;gap:13px;min-width:210px}
.brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--gold-soft);color:var(--gold-2);background:linear-gradient(145deg,rgba(201,170,108,.15),rgba(201,170,108,.035));box-shadow:inset 0 0 16px rgba(201,170,108,.1)}
.brand-title{font-family:Amiri,serif;font-size:28px;line-height:1}
.brand-sub{font-size:10px;color:var(--gold-2);letter-spacing:.16em;text-transform:uppercase;margin-top:4px}
.view-tabs{display:flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:#11100d}
.view-tab{border:0;border-radius:999px;padding:9px 15px;background:transparent;color:#8f887d;font-weight:700;font-size:12px;transition:.2s ease}
.view-tab:hover{color:var(--text)}
.view-tab.active{background:linear-gradient(135deg,rgba(201,170,108,.22),rgba(201,170,108,.09));color:var(--gold-3);box-shadow:inset 0 0 0 1px rgba(201,170,108,.16)}
.top-stats{display:flex;gap:5px;align-items:center;border:1px solid var(--line);padding:5px 7px;border-radius:999px;background:rgba(201,170,108,.045)}
.stat-pill{display:flex;align-items:center;gap:10px;padding:7px 12px;min-width:112px;justify-content:center}
.stat-stack{display:grid;gap:1px;text-align:left}.stat-stack strong{font-size:13px}.stat-stack span{font-size:10px;color:var(--muted)}
.stat-icon{color:var(--gold-2);font-size:15px}
.gold-heart3d{position:relative;width:22px;height:20px;display:inline-block;transform:rotate(-45deg);border-radius:4px 0 4px 4px;background:linear-gradient(135deg,#f1d99f 3%,#c5a462 42%,#8c6a33 100%);box-shadow:inset 2px 2px 4px rgba(255,255,255,.34),inset -3px -3px 6px rgba(70,45,10,.32),0 0 10px rgba(225,190,111,.46),0 4px 10px rgba(0,0,0,.45);flex:0 0 auto}
.gold-heart3d:before,.gold-heart3d:after{content:"";position:absolute;width:22px;height:20px;border-radius:50%;background:inherit;box-shadow:inherit}
.gold-heart3d:before{top:-10px;left:0}.gold-heart3d:after{left:10px;top:0}
.gold-heart3d.large{width:36px;height:33px;border-radius:6px 0 6px 6px;box-shadow:inset 3px 3px 6px rgba(255,255,255,.34),inset -4px -4px 8px rgba(70,45,10,.32),0 0 18px rgba(225,190,111,.5),0 7px 16px rgba(0,0,0,.45)}
.gold-heart3d.large:before,.gold-heart3d.large:after{width:36px;height:33px}.gold-heart3d.large:before{top:-17px}.gold-heart3d.large:after{left:17px}
.heart-pill{padding-left:18px}
.icon-btn{width:43px;height:43px;border-radius:14px;border:1px solid var(--line);font-size:20px;color:var(--gold-2);background:rgba(201,170,108,.055);transition:.18s ease}
.icon-btn:hover{background:rgba(201,170,108,.11);transform:translateY(-1px)}
.icon-btn.small{width:38px;height:38px;font-size:16px}

.view{animation:viewIn .28s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.reader-wrap,.dashboard-wrap{width:min(1120px,calc(100% - 48px));margin:31px auto 60px}
.goal-panel{border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin-bottom:18px;background:linear-gradient(135deg,rgba(201,170,108,.11),rgba(201,170,108,.024))}
.goal-top{display:flex;justify-content:space-between;align-items:end;gap:20px}.eyebrow{font-size:10px;color:var(--gold-2);letter-spacing:.16em;font-weight:800}.goal-panel h2{font-size:20px;margin:6px 0 0;font-weight:650}.goal-value{font-size:13px;color:var(--muted)}
.progress-track{height:7px;margin-top:14px;border-radius:999px;background:#29241a;overflow:hidden}.progress-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#7a643b,#d0b170);transition:width .35s ease}
.reader-meta{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end;margin:22px 2px 12px}.meta-left{display:flex;gap:10px}.meta-center,.meta-right{font-size:12px;color:var(--muted);padding-bottom:5px}.meta-right{text-align:right}
.select-wrap{display:grid;gap:6px}.select-wrap span{font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.select-wrap select{min-width:240px;color:var(--text);background:#12110e;border:1px solid var(--line);outline:none;border-radius:12px;padding:11px 36px 11px 12px}.select-wrap.compact select{min-width:120px}

.ayah-card{position:relative;overflow:hidden;border:1px solid rgba(201,170,108,.32);border-radius:var(--radius);padding:34px 44px 28px;background:linear-gradient(180deg,#12100c,#0c0b09);box-shadow:var(--shadow)}
.ayah-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -8%,rgba(201,170,108,.11),transparent 31%),repeating-linear-gradient(45deg,rgba(255,255,255,.007) 0 1px,transparent 1px 8px)}
.mushaf-corner{position:absolute;width:92px;height:92px;opacity:.5;pointer-events:none}.mushaf-corner:before,.mushaf-corner:after{content:"";position:absolute;background:linear-gradient(90deg,transparent,var(--gold-soft))}.mushaf-corner:before{width:70px;height:1px;top:20px;left:0}.mushaf-corner:after{width:1px;height:70px;top:0;left:20px;background:linear-gradient(180deg,transparent,var(--gold-soft))}.corner-tl{top:0;left:0}.corner-tr{top:0;right:0;transform:scaleX(-1)}.corner-bl{bottom:0;left:0;transform:scaleY(-1)}.corner-br{bottom:0;right:0;transform:scale(-1)}
.ayah-stage{position:relative;z-index:1;transform:translateX(0);opacity:1}
.ayah-stage.exit-next{animation:exitNext .17s ease forwards}.ayah-stage.enter-next{animation:enterNext .28s cubic-bezier(.2,.7,.2,1) both}.ayah-stage.exit-prev{animation:exitPrev .17s ease forwards}.ayah-stage.enter-prev{animation:enterPrev .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes exitNext{to{opacity:0;transform:translateX(-28px)}}@keyframes enterNext{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}@keyframes exitPrev{to{opacity:0;transform:translateX(28px)}}@keyframes enterPrev{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.surah-heading h1{margin:4px 0 0;font-family:Amiri,serif;font-size:40px;line-height:1}.surah-english{font-size:13px;color:var(--muted);margin-top:4px}.small-action{border:1px solid var(--line);color:var(--gold-2);background:var(--gold-faint);border-radius:12px;padding:10px 15px;display:flex;align-items:center;gap:8px;transition:.18s ease}.small-action:hover{background:rgba(201,170,108,.18)}
.mushaf-heading-rule{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin:24px auto 8px;max-width:680px}.rule-line{height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft))}.rule-line.reverse{transform:scaleX(-1)}.ayah-number{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gold-soft);box-shadow:inset 0 0 0 5px rgba(201,170,108,.045),0 0 22px rgba(201,170,108,.06);color:var(--gold-2);font-family:Scheherazade New,Amiri,serif;font-size:24px}
.mushaf-reading-panel{position:relative;max-width:1000px;margin:0 auto;min-height:190px;display:grid;grid-template-columns:34px 1fr 34px;align-items:center}.ornament{color:var(--gold-soft);opacity:.68;text-align:center;font-size:18px}.mushaf-arabic{padding:16px 12px 22px;text-align:center;color:#fffaf0;font-family:"Scheherazade New",Amiri,"Traditional Arabic",serif;font-size:clamp(38px,4.5vw,58px);line-height:2.02;text-shadow:0 1px 0 rgba(255,255,255,.05);text-rendering:optimizeLegibility;font-feature-settings:"liga" 1,"calt" 1}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold-soft);margin:0 auto 20px}.divider:before,.divider:after{content:"";height:1px;width:130px;background:linear-gradient(90deg,transparent,var(--gold-soft))}.divider:after{transform:scaleX(-1)}.divider span{font-size:10px}.translation{max-width:850px;margin:0 auto;text-align:center;color:#dbd4c8;font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.72}
.reward-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}.reward-box{border:1px solid var(--line);border-radius:17px;padding:18px 20px;background:rgba(255,255,255,.018)}.reward-box.current{border-color:rgba(201,170,108,.48);background:linear-gradient(135deg,rgba(201,170,108,.13),rgba(201,170,108,.035))}.reward-label{font-size:10px;color:var(--gold-2);font-weight:800;letter-spacing:.14em}.reward-number{display:flex;gap:9px;align-items:baseline;margin-top:6px}.reward-number strong{font-size:31px;color:var(--gold-2)}.reward-number span{font-family:Georgia,serif;color:#cdbd9e}.reward-note{margin-top:6px;font-size:11px;color:var(--muted)}
.status-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.status-chip{border:1px solid var(--line);border-radius:999px;padding:9px 12px;background:#12100d;font-size:12px;color:#d8d1c4}.status-chip strong{color:var(--gold-2)}
.navigation{display:grid;grid-template-columns:1fr 1.35fr;gap:14px;margin-top:18px}.next-wrap{position:relative}.gain-preview{position:absolute;right:18px;top:-27px;color:var(--gold-2);font-weight:800;font-size:14px}.nav-btn{width:100%;min-height:76px;border-radius:18px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;transition:transform .16s ease,filter .16s ease,background .16s ease}.nav-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}.nav-btn span:not(.nav-arrow){display:grid;gap:2px;text-align:left}.nav-btn small{font-size:9px;letter-spacing:.13em}.nav-btn strong{font-size:18px}.nav-arrow{font-size:24px}.nav-btn.secondary{background:#11100e;color:#e4ddd1}.nav-btn.secondary small{color:#817b72}.nav-btn.primary{background:linear-gradient(135deg,#977b48,#d0b36f);color:#0a0907;border-color:#d4ba7a;box-shadow:0 12px 34px rgba(179,146,88,.16)}.nav-btn.primary small{color:rgba(0,0,0,.57)}.method-note{margin:18px auto 0;max-width:840px;color:#706c65;font-size:10px;line-height:1.55;text-align:center}

.dashboard-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.dashboard-hero h1{font-size:36px;letter-spacing:-.035em;margin:7px 0 7px}.dashboard-hero p{margin:0;color:var(--muted);font-size:14px}.all-time-card{min-width:300px;display:flex;align-items:center;gap:26px;border:1px solid rgba(201,170,108,.28);border-radius:20px;padding:23px 27px;background:linear-gradient(135deg,rgba(201,170,108,.13),rgba(201,170,108,.03));box-shadow:0 16px 44px rgba(0,0,0,.25)}.all-time-card>div{display:grid;gap:4px}.all-time-card span:not(.gold-heart3d){font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.11em}.all-time-card strong{font-size:27px;color:var(--gold-3)}
.period-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.period-card{position:relative;overflow:hidden;min-height:190px;border:1px solid var(--line);border-radius:20px;padding:23px;background:linear-gradient(180deg,#13110e,#0f0e0b)}.period-card:before{content:"";position:absolute;width:130px;height:130px;border:1px solid rgba(201,170,108,.11);border-radius:50%;right:-54px;top:-62px}.period-card.featured{border-color:rgba(201,170,108,.42);background:linear-gradient(135deg,rgba(201,170,108,.14),rgba(201,170,108,.035))}.period-kicker{display:block;font-size:10px;color:var(--gold-2);font-weight:800;letter-spacing:.15em}.period-card>strong{display:block;font-size:38px;margin-top:14px;color:var(--gold-3);letter-spacing:-.03em}.period-unit{display:block;color:#c3b79e;font-family:Georgia,serif}.period-detail{font-size:12px;color:#d2cbc0;margin-top:20px}.period-range{font-size:10px;color:#777168;margin-top:5px}.dashboard-lower{display:grid;grid-template-columns:1.7fr .8fr;gap:14px;margin-top:14px}.chart-card,.summary-card{border:1px solid var(--line);border-radius:20px;padding:22px;background:linear-gradient(180deg,#12100d,#0f0d0b)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:15px}.section-head h2{font-size:20px;margin:6px 0 0}.muted-label{font-size:10px;color:#746e64}.weekly-bars{height:220px;margin-top:25px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:12px}.bar-day{height:100%;display:grid;grid-template-rows:1fr auto auto;gap:7px;align-items:end;text-align:center}.bar-track{height:100%;display:flex;align-items:end;justify-content:center;border-radius:12px;background:linear-gradient(180deg,rgba(201,170,108,.02),rgba(201,170,108,.045));overflow:hidden;padding:5px}.bar-fill{width:100%;min-height:3px;border-radius:8px;background:linear-gradient(180deg,var(--gold-3),#9b7d46);box-shadow:0 0 14px rgba(201,170,108,.12);transition:height .4s ease}.bar-value{font-size:9px;color:#8b8378;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-label{font-size:10px;color:#ada59a;font-weight:700}.summary-card{display:flex;flex-direction:column}.session-big{font-size:38px;color:var(--gold-3);margin:16px 0 4px;letter-spacing:-.025em}.summary-card p{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 20px}.summary-row{display:flex;justify-content:space-between;gap:15px;border-top:1px solid rgba(201,170,108,.12);padding:14px 0;font-size:12px;color:#aaa297}.summary-row strong{color:var(--text)}.future-login-note{display:flex;gap:15px;align-items:flex-start;margin-top:14px;border:1px dashed rgba(201,170,108,.25);border-radius:18px;padding:18px;color:#c9c0b2;background:rgba(201,170,108,.025)}.future-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold-2);flex:0 0 auto}.future-login-note strong{font-size:13px}.future-login-note p{margin:5px 0 0;color:#817b71;font-size:11px;line-height:1.55}

.drawer-overlay{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.56);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .26s ease}.drawer-overlay.open{opacity:1;pointer-events:auto}.settings-drawer{position:fixed;z-index:50;top:0;right:0;height:100vh;width:min(430px,92vw);display:flex;flex-direction:column;background:linear-gradient(180deg,#17140f,#0d0c0a);border-left:1px solid rgba(201,170,108,.25);box-shadow:-20px 0 60px rgba(0,0,0,.46);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}.settings-drawer.open{transform:translateX(0)}.drawer-head{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:24px 22px 19px;border-bottom:1px solid rgba(201,170,108,.12)}.drawer-head h3{margin:5px 0 0;font-size:24px}.drawer-body{padding:18px 18px 26px;display:grid;gap:12px;overflow:auto}.setting-item{display:grid;gap:8px;border:1px solid var(--line);border-radius:16px;padding:16px;background:rgba(255,255,255,.018)}.setting-item strong{font-size:14px}.setting-item p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.setting-item select,.setting-item input[type=number]{margin-top:5px;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:#11100d;color:var(--text);outline:none}.toggle-row{grid-template-columns:1fr auto;align-items:center}.switch{position:relative;width:48px;height:27px}.switch input{position:absolute;opacity:0}.switch-ui{position:absolute;inset:0;border-radius:999px;background:#2a261f;border:1px solid rgba(201,170,108,.18);transition:.2s ease}.switch-ui:after{content:"";position:absolute;width:21px;height:21px;top:2px;left:3px;border-radius:50%;background:#8a8275;transition:.2s ease}.switch input:checked+.switch-ui{background:linear-gradient(90deg,#826937,#b49354)}.switch input:checked+.switch-ui:after{left:23px;background:#f0deaf;box-shadow:0 0 10px rgba(240,222,175,.25)}.danger-btn{margin-top:6px;border:1px solid rgba(212,119,119,.32);background:rgba(145,48,48,.12);color:#f0d6d6;border-radius:12px;padding:12px 14px;font-weight:700}.danger-btn:hover{background:rgba(145,48,48,.18)}.drawer-foot{margin-top:auto;padding:16px 22px;border-top:1px solid rgba(201,170,108,.1);font-size:10px;color:#6f695f;letter-spacing:.1em;text-transform:uppercase}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:.22s ease;z-index:70;color:#0f0d0a;background:#cfb16d;border:1px solid #e3cb92;padding:12px 18px;border-radius:999px;font-size:12px;font-weight:800;box-shadow:0 10px 35px rgba(0,0,0,.45)}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1080px){.topbar{grid-template-columns:1fr auto auto}.view-tabs{grid-column:1/-1;grid-row:2;justify-self:center}.top-stats{grid-column:2}.settings-btn{grid-column:3}.period-grid{grid-template-columns:1fr 1fr}.period-card:last-child{grid-column:1/-1}.dashboard-lower{grid-template-columns:1fr}}
@media(max-width:820px){.topbar{grid-template-columns:1fr auto;padding:14px 20px}.top-stats{grid-column:1/-1;grid-row:2;justify-self:center;flex-wrap:wrap}.view-tabs{grid-column:1/-1;grid-row:3}.reader-wrap,.dashboard-wrap{width:min(100% - 24px,760px);margin-top:18px}.reader-meta{grid-template-columns:1fr}.meta-center,.meta-right{display:none}.meta-left{display:grid;grid-template-columns:1fr 120px}.select-wrap select,.select-wrap.compact select{min-width:0;width:100%}.ayah-card{padding:26px 18px}.reward-row{grid-template-columns:1fr}.navigation{grid-template-columns:1fr 1.2fr}.dashboard-hero{align-items:stretch;flex-direction:column}.all-time-card{min-width:0}.period-grid{grid-template-columns:1fr}.period-card:last-child{grid-column:auto}}
@media(max-width:600px){.top-stats{width:100%;overflow-x:auto;justify-content:flex-start}.stat-pill{min-width:116px}.brand-sub{font-size:9px}.surah-heading h1{font-size:31px}.mushaf-reading-panel{grid-template-columns:18px 1fr 18px}.mushaf-arabic{font-size:34px;line-height:1.9}.translation{font-size:17px}.navigation{grid-template-columns:1fr}.gain-preview{top:auto;bottom:82px}.status-row{display:grid;grid-template-columns:1fr}.weekly-bars{gap:6px}.bar-value{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* ---------- V4: Adhkar, Tasbeeh, and 99 Names ---------- */
.spiritual-tools-section{margin-top:20px;border:1px solid var(--line);border-radius:22px;padding:22px;background:linear-gradient(135deg,rgba(211,184,124,.06),rgba(255,255,255,.01))}
.spiritual-tool-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:16px}
.spiritual-tool-card{min-height:205px;border:1px solid var(--line);border-radius:18px;padding:20px;background:#11100d;display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden}
.spiritual-tool-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-65px;top:-60px;background:radial-gradient(circle,rgba(211,184,124,.11),transparent 70%);pointer-events:none}
.tool-symbol{width:48px;height:48px;border:1px solid var(--gold-soft);border-radius:15px;display:grid;place-items:center;color:var(--gold-2);font-size:23px;background:var(--gold-faint)}
.calligraphy-symbol{font-family:"Aref Ruqaa Ink",Amiri,serif;font-size:25px}
.spiritual-tool-card strong{display:block;margin-top:5px;font-size:20px;color:#f4eee3}.spiritual-tool-card p{color:var(--muted);font-size:12px;line-height:1.55;margin:6px 0 0}
.tool-open-btn{margin-top:auto;align-self:flex-start;border:0;background:transparent;color:var(--gold-2);font-weight:800;padding:0}.tool-open-btn:hover{color:var(--gold-3)}

.adhkar-wrap,.names-wrap{width:min(1180px,calc(100% - 48px));margin:32px auto 70px}
.adhkar-hero,.names-hero{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;border:1px solid var(--line);border-radius:24px;padding:28px;background:linear-gradient(135deg,rgba(211,184,124,.09),rgba(255,255,255,.012));box-shadow:var(--shadow)}
.adhkar-hero h1,.names-hero h1{font-family:Amiri,serif;font-size:39px;line-height:1.12;margin:7px 0 8px}.adhkar-hero p,.names-hero p{max-width:760px;color:var(--muted);line-height:1.65;margin:0;font-size:13px}
.adhkar-mode-tabs{display:flex;gap:7px;padding:6px;border:1px solid var(--line);border-radius:999px;background:#0d0c09;flex:none}
.adhkar-mode{border:0;border-radius:999px;padding:11px 16px;background:transparent;color:var(--muted);font-weight:750}.adhkar-mode.active{background:linear-gradient(135deg,#8f7547,#c9aa67);color:#090806;box-shadow:0 8px 24px rgba(179,146,88,.15)}
.adhkar-progress-card{margin:18px 0;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:16px 18px;background:#11100d}.adhkar-progress-card strong{display:block;margin-top:5px;font-size:18px}.adhkar-progress-track{height:8px;border-radius:999px;background:#2b261c;overflow:hidden}.adhkar-progress-track>div{height:100%;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--gold-2));transition:width .25s ease}
.soft-btn{border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:rgba(211,184,124,.055);color:#d8cfbf;font-weight:700;font-size:12px}.soft-btn:hover{background:rgba(211,184,124,.1)}.soft-btn.full{width:100%}
.adhkar-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}.adhkar-list{display:grid;gap:14px}
.dhikr-card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#12110e,#0e0d0a);padding:22px;transition:border-color .2s ease,transform .2s ease,background .2s ease}.dhikr-card.done{border-color:rgba(211,184,124,.5);background:linear-gradient(135deg,rgba(211,184,124,.105),#0e0d0a)}.dhikr-card:hover{transform:translateY(-1px)}
.dhikr-card-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.dhikr-title{font-size:17px;font-weight:800;color:#f3ede2}.dhikr-subtitle{font-size:11px;color:var(--muted);margin-top:4px}.dhikr-count-control{min-width:92px;border:1px solid var(--gold-soft);border-radius:14px;padding:9px 12px;background:var(--gold-faint);color:var(--gold-2);font-weight:800;text-align:center}.dhikr-count-control.done{background:linear-gradient(135deg,#917747,#c7a763);color:#0b0906;border-color:#d6ba78}
.dhikr-arabic{font-family:"Scheherazade New",Amiri,serif;font-size:31px;line-height:1.9;text-align:right;direction:rtl;color:#faf5ea;margin:18px 0 12px;padding:17px;border-top:1px solid rgba(211,184,124,.12);border-bottom:1px solid rgba(211,184,124,.12);background:rgba(255,255,255,.012);border-radius:12px;white-space:pre-line}
.dhikr-translation{font-family:Georgia,"Times New Roman",serif;color:#d7d0c4;font-size:15px;line-height:1.65}.dhikr-source{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}.source-link{color:var(--gold-2);font-size:11px;font-weight:800;text-decoration:none;border-bottom:1px dotted var(--gold-soft)}.source-grade{font-size:10px;border:1px solid rgba(103,162,116,.25);background:rgba(61,126,75,.09);color:#a8d1af;border-radius:999px;padding:5px 8px}.source-note{font-size:10px;color:#736f67}
.tasbeeh-card{position:sticky;top:105px;border:1px solid rgba(211,184,124,.32);border-radius:22px;padding:22px;background:linear-gradient(160deg,rgba(211,184,124,.09),#100f0c 35%);box-shadow:var(--shadow)}.tasbeeh-head h2{font-family:Amiri,serif;font-size:28px;margin:5px 0 3px}.tasbeeh-head p{font-size:12px;color:var(--muted);margin:0 0 17px;line-height:1.5}.tasbeeh-field{display:grid;gap:6px;margin-top:11px}.tasbeeh-field span{font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.tasbeeh-field select,.tasbeeh-field input{width:100%;border:1px solid var(--line);background:#0d0c09;color:var(--text);border-radius:12px;padding:11px;outline:none}.tasbeeh-phrase{font-family:"Aref Ruqaa Ink",Amiri,serif;color:var(--gold-3);text-align:center;font-size:28px;margin:22px 0 12px;min-height:47px}.tasbeeh-button{width:190px;height:190px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;align-content:center;border:1px solid #d1b475;background:radial-gradient(circle at 32% 24%,#e5ca8d,#ab8b51 48%,#6e5731 100%);color:#0b0906;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 18px 46px rgba(179,146,88,.18),0 0 30px rgba(211,184,124,.09);transition:transform .08s ease}.tasbeeh-button:active{transform:scale(.975)}.tasbeeh-button span{font-size:51px;font-weight:800;line-height:1}.tasbeeh-button small{font-size:10px;margin-top:8px;letter-spacing:.12em;text-transform:uppercase}.tasbeeh-meter{height:7px;background:#2b261c;border-radius:999px;overflow:hidden}.tasbeeh-meter div{height:100%;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--gold-3));transition:width .18s ease}.tasbeeh-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;margin:8px 0 14px}.tasbeeh-meta strong{color:var(--gold-2)}

.names-source-note{max-width:330px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#0e0d0a;display:grid;gap:7px}.names-source-note strong{color:var(--gold-2)}.names-source-note span{font-size:12px}.names-source-note small{color:var(--muted);font-size:10px;line-height:1.45}
.names-toolbar{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:18px 0}.names-search{display:grid;gap:6px;flex:1;max-width:500px}.names-search span{font-size:10px;color:var(--muted);letter-spacing:.13em;text-transform:uppercase}.names-search input{border:1px solid var(--line);background:#11100d;color:var(--text);border-radius:13px;padding:13px 15px;outline:none}.names-count{font-size:12px;color:var(--muted);padding-bottom:11px}.names-count span{color:var(--gold-2);font-weight:800}
.names-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.name-card{position:relative;min-height:214px;border:1px solid var(--line);border-radius:19px;padding:20px;background:linear-gradient(155deg,rgba(211,184,124,.055),#0f0e0b 36%);overflow:hidden;transition:transform .18s ease,border-color .18s ease}.name-card:hover{transform:translateY(-2px);border-color:rgba(211,184,124,.42)}.name-number{position:absolute;right:15px;top:14px;font-size:11px;color:#6f685d}.name-arabic{font-family:"Aref Ruqaa Ink",Amiri,serif;font-size:42px;color:var(--gold-3);text-align:center;direction:rtl;line-height:1.45;margin:12px 0 6px;text-shadow:0 0 18px rgba(211,184,124,.08)}.name-translit{text-align:center;font-weight:800;font-size:14px;color:#e9e0d0}.name-meaning{text-align:center;color:var(--muted);font-family:Georgia,serif;font-size:14px;line-height:1.5;margin-top:8px}.names-footnote{margin-top:18px;border:1px solid var(--line);border-radius:17px;padding:18px;background:#11100d}.names-footnote strong{color:var(--gold-2)}.names-footnote p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.55}

@media(max-width:1100px){.spiritual-tool-grid{grid-template-columns:1fr}.adhkar-layout{grid-template-columns:1fr}.tasbeeh-card{position:static}.names-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.adhkar-wrap,.names-wrap{width:min(100% - 24px,760px);margin-top:18px}.adhkar-hero,.names-hero{display:grid;padding:21px}.adhkar-mode-tabs{justify-self:start}.adhkar-progress-card{grid-template-columns:1fr}.names-source-note{max-width:none}.names-grid{grid-template-columns:1fr}.dhikr-card-head{display:grid}.dhikr-count-control{justify-self:start}.tasbeeh-button{width:165px;height:165px}.spiritual-tools-section{padding:16px}}


/* ========================= OURQURAN V5 ========================= */
body{padding-bottom:112px}
.v5-topbar{grid-template-columns:1fr auto!important;min-height:78px}
.v5-topbar .top-stats{justify-self:end}
.v5-home-wrap{padding-bottom:24px}
.home-welcome{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px}
.home-welcome h1{font-size:42px;letter-spacing:-.045em;margin:7px 0 6px}
.home-welcome p{margin:0;color:var(--muted);font-size:14px}
.share-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(211,184,124,.32);background:linear-gradient(135deg,rgba(211,184,124,.12),rgba(211,184,124,.035));color:var(--gold-3);border-radius:14px;padding:12px 16px;font-weight:800;font-size:12px;white-space:nowrap;transition:.18s ease}
.share-btn:hover{transform:translateY(-1px);border-color:rgba(211,184,124,.5);background:rgba(211,184,124,.13)}
.habit-week-card{border:1px solid var(--line);border-radius:21px;padding:20px 22px;background:linear-gradient(180deg,#12100d,#0e0d0b);margin-bottom:14px}
.compact-head{align-items:center}.streak-badge{display:flex;align-items:center;gap:7px;border:1px solid rgba(211,184,124,.26);border-radius:999px;padding:8px 12px;color:#bfb5a4;font-size:11px;background:rgba(211,184,124,.045)}.streak-badge span{color:var(--gold-2)}.streak-badge strong{color:var(--gold-3)}
.week-habit-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:18px}
.habit-day{display:grid;place-items:center;gap:8px;border:1px solid rgba(211,184,124,.12);border-radius:15px;padding:12px 8px;background:#0d0c0a;min-height:86px}.habit-day .day-name{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#817a70}.habit-day .day-dot{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid #3b362d;color:#6e685f;font-size:11px}.habit-day .day-count{font-size:9px;color:#6f695f}.habit-day.active{border-color:rgba(211,184,124,.27);background:rgba(211,184,124,.04)}.habit-day.active .day-dot{border-color:var(--gold-soft);color:var(--gold-3);background:rgba(211,184,124,.09)}.habit-day.goal-hit .day-dot{background:linear-gradient(135deg,#9b7d46,#d0b36f);color:#090806;border-color:#d4ba7a;box-shadow:0 0 18px rgba(211,184,124,.12)}.habit-day.today{box-shadow:inset 0 0 0 1px rgba(211,184,124,.18)}
.home-primary-grid{display:grid;grid-template-columns:1.6fr .9fr .75fr;gap:14px;margin-bottom:14px}.continue-card,.record-card,.streak-card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,#14120e,#0d0c0a);padding:23px;min-height:252px}.continue-card{position:relative;overflow:hidden;border-color:rgba(211,184,124,.36);background:radial-gradient(circle at 88% 18%,rgba(211,184,124,.12),transparent 28%),linear-gradient(150deg,rgba(211,184,124,.12),#12100d 46%,#0c0b09)}.continue-card:after{content:"";position:absolute;width:190px;height:190px;border:1px solid rgba(211,184,124,.11);border-radius:50%;right:-75px;top:-75px}.continue-copy{position:relative;z-index:1}.continue-card h2{font-size:27px;margin:7px 0 5px}.continue-card p{margin:0;color:var(--muted);font-size:12px}.continue-location{display:flex;align-items:center;gap:10px;margin-top:20px}.continue-location strong{color:var(--gold-3)}.continue-location span{border-left:1px solid var(--line);padding-left:10px;color:#968e82;font-size:12px}.continue-progress-wrap{margin-top:23px;position:relative;z-index:1}.continue-progress-top{display:flex;justify-content:space-between;font-size:11px;color:#aaa194;margin-bottom:8px}.continue-progress-top strong{color:var(--gold-3)}.hero-track{height:9px}.primary-cta{position:relative;z-index:1;width:100%;margin-top:18px;display:flex;align-items:center;justify-content:space-between;border:1px solid #ddc27e;border-radius:14px;padding:14px 16px;background:linear-gradient(135deg,#9b7d46,#d5b874);color:#090806;font-weight:850;box-shadow:0 12px 28px rgba(179,146,88,.15);transition:.18s ease}.primary-cta:hover{transform:translateY(-1px);filter:brightness(1.04)}.compact-cta{width:auto;margin:0;min-width:190px}
.record-card,.streak-card{display:flex;flex-direction:column}.record-icon,.streak-flame{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;border:1px solid rgba(211,184,124,.24);background:rgba(211,184,124,.07);color:var(--gold-2);margin-bottom:16px}.record-card>strong,.streak-card>strong{font-size:33px;letter-spacing:-.035em;color:var(--gold-3);margin-top:9px}.record-unit{font-family:Georgia,serif;color:#bcae91;font-size:12px;margin-top:1px}.record-date{font-size:10px;color:#746e64;margin-top:6px}.record-progress-block{margin-top:auto;padding-top:18px}.record-progress-copy{display:flex;justify-content:space-between;color:#918a7f;font-size:10px;margin-bottom:7px}.record-progress-copy strong{color:#d9c69e}.record-fill{background:linear-gradient(90deg,#8b7040,#e1c37c)}.record-message{font-size:10px;color:#7e786f;line-height:1.45;margin-top:7px}.streak-flame{font-size:16px}.streak-separator{height:1px;background:rgba(211,184,124,.12);margin:18px 0 10px}.mini-stat-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:11px;color:#8f887d}.mini-stat-row strong{color:#ddd4c5;font-size:11px}
.v5-period-grid{grid-template-columns:repeat(4,1fr)}.all-time-mini{background:linear-gradient(135deg,rgba(211,184,124,.09),#0f0e0b)}
.reader-session-top{display:flex;justify-content:space-between;align-items:center;color:#777168;font-size:11px;margin-bottom:12px}.back-home-btn{border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:#11100d;color:#d4cab9;font-weight:750}.back-home-btn:hover{border-color:rgba(211,184,124,.38);color:var(--gold-3)}
.profile-wrap{width:min(1120px,calc(100% - 48px));margin:31px auto 60px}.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);border-radius:24px;padding:28px;background:radial-gradient(circle at 15% 0%,rgba(211,184,124,.11),transparent 29%),linear-gradient(180deg,#13110e,#0f0d0b);box-shadow:var(--shadow)}.profile-identity{display:flex;align-items:center;gap:18px}.profile-avatar{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#957947,#d3b87c);color:#0a0907;font-size:29px;font-weight:900;box-shadow:0 14px 34px rgba(179,146,88,.13)}.profile-hero h1{font-size:34px;margin:5px 0 3px}.profile-hero p{margin:0;color:var(--muted);font-size:11px}.profile-edit-card{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--line);border-radius:18px;padding:18px 20px;background:#11100d;margin-top:14px}.profile-edit-card strong{font-size:13px}.profile-edit-card p{margin:5px 0 0;color:var(--muted);font-size:10px}.profile-name-control{display:flex;gap:8px}.profile-name-control input{min-width:240px;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:#0c0b09;color:var(--text);outline:none}.profile-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.profile-stat-grid article{min-height:145px;border:1px solid var(--line);border-radius:19px;padding:20px;background:linear-gradient(180deg,#12100d,#0e0d0b);display:flex;flex-direction:column;justify-content:center}.profile-stat-grid span{font-size:10px;color:#8e877d;text-transform:uppercase;letter-spacing:.1em}.profile-stat-grid strong{font-size:27px;color:var(--gold-3);margin-top:8px}.profile-stat-grid small{font-size:10px;color:#716b62;margin-top:6px}.profile-record-stat{border-color:rgba(211,184,124,.35)!important;background:linear-gradient(135deg,rgba(211,184,124,.1),#0e0d0b)!important}.profile-future-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;border:1px dashed rgba(211,184,124,.26);border-radius:19px;padding:20px;margin-top:14px;background:rgba(211,184,124,.025)}.profile-future-card p{margin:5px 0 0;color:#817b71;font-size:11px;line-height:1.55}
.bottom-nav{position:fixed;z-index:35;left:50%;bottom:20px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(92px,128px));gap:5px;padding:7px;border:1px solid rgba(211,184,124,.22);border-radius:22px;background:rgba(11,10,8,.9);backdrop-filter:blur(20px);box-shadow:0 18px 50px rgba(0,0,0,.48)}.bottom-nav-btn{min-height:62px;border:0;border-radius:16px;background:transparent;color:#787168;display:grid;place-items:center;align-content:center;gap:4px;font-size:10px;font-weight:750;transition:.18s ease}.bottom-nav-btn:hover{color:#d7cdbd;background:rgba(211,184,124,.045)}.bottom-nav-btn.active{color:var(--gold-3);background:linear-gradient(145deg,rgba(211,184,124,.14),rgba(211,184,124,.045));box-shadow:inset 0 0 0 1px rgba(211,184,124,.14)}.bottom-nav-icon{font-size:20px;line-height:1}.arabic-nav{font-family:"Aref Ruqaa Ink",Amiri,serif;font-size:20px}
.settings-drawer{z-index:60}.drawer-overlay{z-index:55}.toast{z-index:75;bottom:104px}
@media(max-width:1100px){.home-primary-grid{grid-template-columns:1fr 1fr}.continue-card{grid-column:1/-1}.v5-period-grid{grid-template-columns:repeat(2,1fr)}.profile-stat-grid{grid-template-columns:repeat(2,1fr)}.bottom-nav{grid-template-columns:repeat(5,minmax(82px,1fr));width:min(680px,calc(100% - 22px))}}
@media(max-width:820px){body{padding-bottom:98px}.v5-topbar{grid-template-columns:1fr!important}.v5-topbar .top-stats{grid-column:1!important;grid-row:2!important;justify-self:stretch!important;overflow-x:auto}.home-welcome,.profile-hero,.profile-edit-card{align-items:stretch;flex-direction:column}.home-primary-grid{grid-template-columns:1fr}.continue-card{grid-column:auto}.v5-period-grid{grid-template-columns:1fr 1fr}.profile-wrap{width:min(100% - 24px,760px);margin-top:18px}.profile-name-control{width:100%}.profile-name-control input{min-width:0;flex:1}.profile-future-card{grid-template-columns:auto 1fr}.profile-future-card .compact-cta{grid-column:1/-1;width:100%}.bottom-nav{bottom:10px;border-radius:18px;padding:5px}.bottom-nav-btn{min-height:58px}.bottom-nav-btn span:last-child{font-size:9px}.week-habit-row{gap:5px}.habit-day{padding:9px 3px;min-height:77px}.habit-day .day-count{display:none}}
@media(max-width:560px){.v5-period-grid,.profile-stat-grid{grid-template-columns:1fr}.home-welcome h1{font-size:35px}.bottom-nav{grid-template-columns:repeat(5,1fr)}.bottom-nav-btn{min-width:0}.bottom-nav-icon{font-size:18px}.profile-avatar{width:60px;height:60px}.profile-hero{padding:21px}.home-welcome{align-items:flex-start}}


/* V6 — readability, social profile, greeting */
html{
  --ui-scale:1.08;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
html[data-text-size="comfortable"]{--ui-scale:1}
html[data-text-size="large"]{--ui-scale:1.08}
html[data-text-size="xlarge"]{--ui-scale:1.18}
body{font-weight:500;letter-spacing:0}
html[data-high-contrast="true"]{--text:#fffaf1;--muted:#c4bcaf;--gold-3:#f5dda4;--line:rgba(222,195,135,.29)}
html[data-high-contrast="true"] .period-range,
html[data-high-contrast="true"] .record-date,
html[data-high-contrast="true"] .record-message,
html[data-high-contrast="true"] .source-note{color:#aaa296}

/* Keep information readable without making the layout childish. */
.eyebrow,.brand-sub,.stat-stack span,.select-wrap span,.period-kicker,.reward-label,.social-label{font-size:calc(11px * var(--ui-scale))}
.stat-stack strong{font-size:calc(14px * var(--ui-scale))}
.home-welcome p,.continue-card p,.profile-hero p,.profile-edit-card p,.profile-future-card p,.setting-item p,.names-footnote p,.dhikr-subtitle,.record-unit,.mini-stat-row,.status-chip{font-size:calc(12px * var(--ui-scale))}
.period-detail,.period-range,.record-date,.record-message,.source-link,.source-note,.source-grade,.habit-day .day-name,.habit-day .day-count{font-size:calc(11px * var(--ui-scale))}
.translation{font-size:calc(20px * var(--ui-scale));line-height:1.78;color:#e8e1d6}
.mushaf-arabic{font-size:clamp(calc(40px * var(--ui-scale)),4.6vw,calc(60px * var(--ui-scale)));line-height:2.08;text-shadow:none;-webkit-font-smoothing:antialiased}
.dhikr-arabic{font-size:calc(31px * var(--ui-scale));line-height:1.95;text-shadow:none}
.dhikr-translation{font-size:calc(15px * var(--ui-scale));line-height:1.72;color:#e1dbd0}
.name-arabic{font-size:calc(42px * var(--ui-scale));text-shadow:none}
.name-translit,.name-meaning{font-size:calc(14px * var(--ui-scale))}
.setting-item strong{font-size:calc(14px * var(--ui-scale))}
.setting-item select,.setting-item input[type=number]{font-size:calc(14px * var(--ui-scale));min-height:45px}

.home-welcome h1{font-size:clamp(34px,4vw,48px);line-height:1.08}
.greeting-prefix{font-weight:650;color:#f6efe3}
#homeGreetingName{color:var(--gold-3)}
.welcome-actions,.profile-share-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.share-site-btn{background:linear-gradient(135deg,#967947,#d0b36f);border-color:#d9bd78;color:#090806;box-shadow:0 10px 26px rgba(179,146,88,.12)}

.social-profile-card{margin-top:14px;border:1px solid rgba(211,184,124,.28);border-radius:22px;padding:22px;background:linear-gradient(160deg,rgba(211,184,124,.07),#100f0c 38%,#0d0c0a);box-shadow:0 18px 44px rgba(0,0,0,.18)}
.social-card-head{display:flex;justify-content:space-between;gap:24px;align-items:center;padding-bottom:17px;border-bottom:1px solid rgba(211,184,124,.12)}
.social-card-head h2{font-size:25px;margin:5px 0 5px}.social-card-head p{max-width:690px;color:var(--muted);font-size:13px;line-height:1.6;margin:0}
.invite-cta{margin:0;min-width:180px}
.friend-code-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid rgba(211,184,124,.1)}
.friend-code-row>div{display:grid;gap:5px}.friend-code-row strong{font-size:20px;color:var(--gold-3);letter-spacing:.08em}
.friend-search-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;padding:17px 0}
.friend-search-row label{display:grid;gap:7px}.friend-search-row input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#0c0b09;color:var(--text);outline:none;font-size:15px}.friend-search-row input:focus{border-color:rgba(211,184,124,.55);box-shadow:0 0 0 3px rgba(211,184,124,.06)}
.friend-add-btn{min-height:46px;padding-inline:18px}
.friends-list{display:grid;gap:9px}.friend-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid rgba(211,184,124,.14);border-radius:15px;padding:12px 14px;background:#0d0c0a}.friend-mini-avatar{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#715a34,#c7aa6b);color:#090806;font-weight:900}.friend-main{display:grid;gap:3px}.friend-main strong{font-size:14px}.friend-main span{font-size:11px;color:var(--muted)}.friend-status{font-size:10px;color:var(--gold-2);border:1px solid rgba(211,184,124,.2);border-radius:999px;padding:6px 9px}.friend-remove{border:0;background:transparent;color:#8f8678;font-size:17px;padding:6px}.friend-remove:hover{color:#f0c3c3}.empty-friends{border:1px dashed rgba(211,184,124,.17);border-radius:14px;padding:15px;color:#91897d;font-size:12px;text-align:center}.social-backend-note{margin-top:14px;color:#8c857a;font-size:11px;line-height:1.55}.social-backend-note strong{color:#bfb5a4}.incoming-invite-box{margin-bottom:12px;border:1px solid rgba(122,176,128,.28);background:rgba(62,122,70,.08);border-radius:14px;padding:13px}.incoming-invite-box strong{color:#cce1cf}.incoming-invite-actions{display:flex;gap:8px;margin-top:10px}

.ayah-stage.exit-next{animation:exitNext .16s ease forwards}.ayah-stage.enter-next{animation:enterNext .24s cubic-bezier(.2,.7,.2,1) both}.ayah-stage.exit-prev{animation:exitPrev .16s ease forwards}.ayah-stage.enter-prev{animation:enterPrev .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes exitNext{to{opacity:0;transform:translateX(-22px)}}
@keyframes enterNext{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes exitPrev{to{opacity:0;transform:translateX(22px)}}
@keyframes enterPrev{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

@media(max-width:820px){.welcome-actions,.profile-share-actions{justify-content:flex-start}.social-card-head{display:grid}.invite-cta{width:100%}.friend-search-row{grid-template-columns:1fr}.friend-add-btn{width:100%}}


/* =========================================================
   V7 CLEAN READER UI — high contrast, crisp typography
   ========================================================= */
:root{
  --bg:#090909;
  --bg-soft:#0e0e0e;
  --panel:#121212;
  --panel-2:#171717;
  --text:#f7f7f5;
  --muted:#b7b7b2;
  --gold:#cda85f;
  --gold-2:#dfbd76;
  --gold-3:#f0d493;
  --gold-soft:#725d34;
  --gold-faint:rgba(205,168,95,.10);
  --line:#302c25;
  --shadow:0 18px 50px rgba(0,0,0,.34);
}
html{font-size:16px;background:#090909;color-scheme:dark;font-synthesis:none}
body{background:#090909;color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:auto;text-rendering:geometricPrecision;letter-spacing:0}
.topbar.v5-topbar{background:#0b0b0b;border-bottom:1px solid #252525;backdrop-filter:none}
.bottom-nav{background:#101010;border-color:#34302a;backdrop-filter:none;box-shadow:0 16px 38px rgba(0,0,0,.44)}
.bottom-nav-btn{color:#aaa9a5;font-size:12px}.bottom-nav-btn.active{color:#f0d493;background:#1c1811;box-shadow:inset 0 0 0 1px #4b402b}.bottom-nav-btn:hover{color:#f2f2ef;background:#171717}
.brand-title{font-family:Inter,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.025em}.brand-sub{font-size:12px;color:#d8b66f}.eyebrow,.period-kicker,.reward-label,.social-label,.select-wrap span{font-size:12px;line-height:1.4;color:#d8b66f;letter-spacing:.11em}
.stat-stack strong{font-size:16px}.stat-stack span{font-size:12px;color:#c0bfbb}
.home-welcome h1{font-size:clamp(38px,4vw,50px);letter-spacing:-.035em}.home-welcome p,.dashboard-hero p,.social-card-head p,.profile-hero p,.setting-item p,.adhkar-hero p{font-size:15px;line-height:1.7;color:#c4c3be}
.continue-card,.record-card,.streak-card,.period-card,.chart-card,.summary-card,.profile-hero,.profile-edit-card,.social-profile-card,.profile-stat-grid article,.spiritual-tool-card,.adhkar-progress-card,.tasbeeh-card,.names-toolbar,.names-footnote{background:#121212;border-color:#2d2b27;box-shadow:none}
.continue-card,.record-card,.period-card.featured,.profile-record-stat{background:#14120e;border-color:#4a3d26}
.primary-cta,.nav-btn.primary,.share-site-btn{background:#d0aa60;color:#0c0c0b;border-color:#e0bf79;box-shadow:none;font-weight:800}.primary-cta:hover,.nav-btn.primary:hover,.share-site-btn:hover{background:#ddba73;filter:none}.share-btn,.soft-btn,.back-home-btn,.small-action{background:#161616;color:#f1f0ec;border-color:#38342d}.share-btn:hover,.soft-btn:hover,.back-home-btn:hover,.small-action:hover{background:#1d1d1d;border-color:#5a4b31;transform:none;filter:none}
.mushaf-card{background:#101010;border-color:#433823;box-shadow:0 18px 45px rgba(0,0,0,.3)}
.mushaf-arabic{font-family:"Noto Naskh Arabic","Scheherazade New",Amiri,serif;font-size:clamp(calc(46px * var(--ui-scale)),4.8vw,calc(66px * var(--ui-scale)));font-weight:500;line-height:1.95;color:#ffffff;text-shadow:none;-webkit-font-smoothing:auto;text-rendering:optimizeLegibility;font-kerning:normal;font-feature-settings:"liga" 1,"calt" 1}
.translation{font-family:Inter,"Segoe UI",sans-serif;font-size:calc(21px * var(--ui-scale));font-weight:500;line-height:1.72;color:#ecebe6;max-width:900px}
.surah-heading h1{font-family:Inter,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.03em}.surah-english,.meta-center,.meta-right,.status-chip,.method-note{color:#bdbcb7}
.ayah-stage{transform:none!important;will-change:opacity}.ayah-stage.exit-next,.ayah-stage.exit-prev{animation:v7FadeOut .14s ease forwards}.ayah-stage.enter-next,.ayah-stage.enter-prev{animation:v7FadeIn .20s ease both}@keyframes v7FadeOut{to{opacity:0}}@keyframes v7FadeIn{from{opacity:0}to{opacity:1}}
.select-wrap select,.setting-item select,.setting-item input[type=number],.profile-name-control input,.friend-search-row input,.names-search input,.tasbeeh-field select,.tasbeeh-field input{background:#0d0d0d;color:#f7f7f5;border-color:#38342d;font-size:15px;min-height:48px}
.period-card>strong,.record-card>strong,.profile-stat-grid strong,.all-time-card strong,.session-big{color:#edcf8b}.period-detail,.period-range,.record-date,.record-message,.mini-stat-row,.profile-stat-grid small{font-size:12px;color:#aaa9a4}
.reward-box{background:#121212;border-color:#34312c}.reward-box.current{background:#17130d;border-color:#5a4829}.reward-number strong{color:#edcf8b}.reward-note{font-size:12px;color:#b9b7b2}
.adhkar-wrap{width:min(1180px,calc(100% - 48px))}.adhkar-hero h1{font-size:clamp(36px,4vw,48px);line-height:1.1;letter-spacing:-.035em}.adhkar-mode{font-size:14px;min-height:46px}.adhkar-list{gap:14px}
.dhikr-card{background:#111111;border:1px solid #302d27;border-radius:20px;padding:24px;box-shadow:none}.dhikr-card.done{border-color:#5d523a;background:#12110e}.dhikr-title{font-size:20px;font-weight:800;color:#f7f7f5;letter-spacing:-.015em}.dhikr-subtitle{font-size:13px;color:#bcbab4;margin-top:4px}.dhikr-timing{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.timing-badge{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;padding:5px 9px;border:1px solid #3b3426;background:#17140e;color:#dabb76;font-size:11px;font-weight:700}.timing-badge.shared{border-color:#304033;background:#101713;color:#9dcea6}
.dhikr-arabic{font-family:"Noto Naskh Arabic","Scheherazade New",Amiri,serif;font-size:calc(35px * var(--ui-scale));font-weight:500;line-height:1.9;color:#fff;white-space:normal;text-align:right;text-shadow:none;-webkit-font-smoothing:auto;text-rendering:optimizeLegibility}.dhikr-translation{font-family:Inter,"Segoe UI",sans-serif;font-size:calc(16px * var(--ui-scale));font-weight:500;line-height:1.75;color:#e4e3de;border-top:1px solid #292724;padding-top:17px}.dhikr-count-control{min-width:112px;min-height:48px;font-size:14px;font-weight:800}.dhikr-source{gap:9px}.source-link,.source-grade,.source-note{font-size:12px}.source-link{color:#e2be74;text-decoration-thickness:1px;text-underline-offset:3px}.source-grade{color:#b8d7ba;background:#111a12;border-color:#304631}.source-note{color:#a7a6a1}
.tasbeeh-phrase{font-family:"Noto Naskh Arabic",Amiri,serif;font-size:34px;color:#fff}.name-arabic{font-family:"Noto Naskh Arabic",Amiri,serif;color:#fff;font-size:calc(46px * var(--ui-scale))}.name-translit{color:#e8c77f}.name-meaning{color:#deddd8;font-size:15px}
.settings-drawer{background:#101010;border-left-color:#34302a}.drawer-head{background:#111;border-bottom-color:#292929}.setting-item{background:#141414;border-color:#2f2d29}.setting-item strong{font-size:16px}.setting-item p{font-size:13px;color:#bab9b5}
.share-sheet{position:fixed;inset:0;z-index:80;display:none}.share-sheet.open{display:block}.share-sheet-overlay{position:absolute;inset:0;background:rgba(0,0,0,.72)}.share-sheet-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,calc(100% - 28px));background:#111;border:1px solid #3a3429;border-radius:22px;padding:24px;box-shadow:0 26px 80px rgba(0,0,0,.6)}.share-sheet-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.share-sheet-head h3{font-size:26px;margin:5px 0 0}.share-sheet-description{font-size:15px;line-height:1.65;color:#d7d6d1;margin:16px 0}.share-preview-notice{border:1px solid #4f4129;background:#17140e;color:#d8c49c;border-radius:13px;padding:12px 14px;font-size:13px;line-height:1.55;margin-bottom:15px}.share-actions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.share-action-card{min-height:112px;border:1px solid #34312c;border-radius:15px;background:#161616;color:#f5f4ef;text-decoration:none;padding:13px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;text-align:left}.share-action-card:hover{background:#1e1e1e;border-color:#59492f}.share-action-card:disabled{opacity:.42;cursor:not-allowed}.share-action-icon{font-size:22px;color:#e5c276}.share-action-card strong{font-size:14px}.share-action-card small{font-size:11px;color:#aaa9a4}.share-link-row{width:100%;margin-top:12px;min-height:48px;border:1px solid #34312c;border-radius:13px;background:#0d0d0d;color:#f3f2ee;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 13px}.share-link-row strong{font-size:11px;color:#c5a968;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-link-row:disabled{opacity:.55;cursor:not-allowed}
.toast{background:#e0bd74;color:#0a0a0a;border-color:#f1d38c}
@media(max-width:760px){.share-actions-grid{grid-template-columns:1fr 1fr}.dhikr-card{padding:18px}.dhikr-card-head{align-items:flex-start}.dhikr-arabic{font-size:calc(31px * var(--ui-scale))}}

/* V7.1 TYPOGRAPHY CONSISTENCY — one UI face, one Arabic reading face */
:root{--muted:#c2c1bc;--gold:#c99f4f;--gold-2:#e0b967;--gold-3:#f0cf87;--line:#35312a}
body,.dashboard-wrap,.reader-wrap,.profile-wrap,.adhkar-wrap,.names-wrap,.settings-drawer,.share-sheet-card,
button,input,select,textarea{font-family:Inter,"Segoe UI",Arial,sans-serif}
.home-welcome h1,.dashboard-hero h1,.adhkar-hero h1,.names-hero h1,.profile-hero h1,
.section-head h2,.spiritual-tool-card h3,.tasbeeh-head h2,.modal-head h3,.share-sheet-head h3,
.record-card h2,.streak-card h2{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:800;letter-spacing:-.035em;color:#f8f8f5}
.adhkar-hero h1,.names-hero h1{font-size:clamp(36px,4vw,48px);line-height:1.12}
.period-unit,.record-unit,.reward-number span,.name-meaning{font-family:Inter,"Segoe UI",Arial,sans-serif}
.home-welcome p,.dashboard-hero p,.adhkar-hero p,.names-hero p,.profile-hero p,.summary-card p,
.future-login-note p,.tasbeeh-head p,.names-footnote p,.setting-item p,.social-card-head p{color:#c7c6c1}
.meta-center,.meta-right,.surah-english,.status-chip,.method-note,.period-detail,.period-range,.record-date,.record-message,
.mini-stat-row,.profile-stat-grid small,.reward-note,.tasbeeh-meta,.social-backend-note{color:#bdbcb7}
.period-card,.chart-card,.summary-card,.continue-card,.record-card,.streak-card,.profile-edit-card,.social-profile-card,
.spiritual-tool-card,.adhkar-progress-card,.tasbeeh-card,.names-toolbar,.names-footnote,.name-card{background:#111;border-color:#302e29}
.name-card{background:#111}.name-meaning{font-size:15px;line-height:1.55;color:#e1e0dc}
.tasbeeh-head h2{font-size:26px}.tasbeeh-field span,.muted-label,.record-date,.record-message{font-size:12px}
.bottom-nav-btn{font-size:12px}.bottom-nav-icon{font-size:19px}
.dhikr-arabic{background:#0d0d0d;border-color:#282724;padding:22px 20px;border-radius:14px}
.dhikr-translation{color:#ededE9;font-size:calc(17px * var(--ui-scale))}
.source-note{color:#b5b4af}
.adhkar-progress-card strong,.goal-value,.period-detail,.summary-row,.tasbeeh-meta{font-size:13px}
@media(max-width:760px){.home-welcome h1,.dashboard-hero h1,.adhkar-hero h1,.names-hero h1,.profile-hero h1{font-size:34px}}


/* V8 — reader control hierarchy and disciplined text sizing */
html{--ui-scale:1;--reader-scale:1}
html[data-text-size="comfortable"]{--ui-scale:1;--reader-scale:.96}
html[data-text-size="large"]{--ui-scale:1;--reader-scale:1.04}
html[data-text-size="xlarge"]{--ui-scale:1;--reader-scale:1.12}

/* Text-size setting changes reading content only, not the entire application chrome. */
.eyebrow,.brand-sub,.stat-stack span,.select-wrap span,.period-kicker,.social-label{font-size:11px}
.stat-stack strong{font-size:14px}
.home-welcome p,.continue-card p,.profile-hero p,.profile-edit-card p,.profile-future-card p,.setting-item p,.names-footnote p,.dhikr-subtitle,.record-unit,.mini-stat-row{font-size:12px}
.period-detail,.period-range,.record-date,.record-message,.source-link,.source-note,.source-grade,.habit-day .day-name,.habit-day .day-count{font-size:11px}
.setting-item strong{font-size:15px}
.setting-item select,.setting-item input[type=number]{font-size:14px;min-height:44px}

/* Reader content remains legible, but does not balloon vertically. */
.mushaf-arabic{font-size:clamp(calc(39px * var(--reader-scale)),4vw,calc(56px * var(--reader-scale)));line-height:1.78;max-width:920px;margin-inline:auto}
.translation{font-size:calc(18px * var(--reader-scale));line-height:1.58;max-width:850px}
.mushaf-reading-panel{min-height:150px}
.ayah-card{padding-bottom:24px}
.divider{margin:0 auto 16px}

/* Remove oversized reward panels; make audio preferences the visual footer of the ayah card. */
.reward-row,.reward-box{display:none!important}
.reader-quick-controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:22px auto 0;padding-top:18px;border-top:1px solid #26231e;max-width:760px}
.reader-control-btn{min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;border-radius:13px;border:1px solid #3a352c;background:#151412;color:#f2f1ed;font-size:13px;font-weight:650;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.reader-control-btn:hover{background:#1d1a15;border-color:#6b5732;transform:translateY(-1px)}
.reader-control-btn:focus-visible{outline:2px solid #e0b967;outline-offset:2px}
.reader-control-label{color:#aeadA8;font-weight:600}
.reader-control-btn strong{color:#edcf8b;font-size:13px;font-weight:800}
.reader-control-chevron{color:#8f8d88;font-size:14px;margin-left:2px}
.reader-control-dot{width:8px;height:8px;border-radius:50%;background:#cfad63;box-shadow:0 0 0 3px rgba(207,173,99,.12)}
.autoplay-control strong{min-width:22px}

/* Modern navigation: clear primary action, no tiny microcopy, no floating reward. */
.navigation.reader-navigation{display:grid;grid-template-columns:minmax(180px,240px) minmax(320px,1fr);gap:12px;margin-top:14px;align-items:stretch}
.navigation .nav-btn{min-height:68px;border-radius:16px;padding:0 22px;display:flex;align-items:center;justify-content:center;gap:14px}
.navigation .nav-btn.secondary{justify-content:flex-start;background:#121211;border-color:#34302a;color:#f1f0ec}
.navigation .nav-btn.primary{justify-content:space-between;padding-left:26px;background:#d9b569;border-color:#e5c680;color:#0d0c09}
.navigation .nav-btn strong{font-size:17px;line-height:1.15;letter-spacing:-.01em}
.navigation .nav-arrow{font-size:21px;line-height:1}
.next-button-copy{display:flex!important;align-items:center;gap:16px;text-align:left!important}
.next-earned{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border-radius:999px;background:rgba(12,12,9,.12);font-size:13px;font-weight:800;white-space:nowrap}
.gain-preview,.next-wrap{position:static!important}
.method-note{font-size:11px;line-height:1.45;margin-top:13px;color:#8f8d88}

/* Keep the bottom tab bar visually precise and app-like. */
.bottom-nav{gap:4px;padding:6px;border-radius:20px}
.bottom-nav-btn{min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:700;line-height:1.1;padding:6px 8px}
.bottom-nav-icon{font-size:18px;line-height:1}
.bottom-nav-btn.active{background:#1c1811}

/* Focus feedback when a reader chip opens a setting. */
.setting-item{transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.setting-item.setting-highlight{border-color:#b99350;background:#19160f;box-shadow:0 0 0 3px rgba(211,184,124,.09)}

/* Other Arabic reading surfaces follow the same restrained scale. */
.dhikr-arabic{font-size:calc(31px * var(--reader-scale));line-height:1.82}
.dhikr-translation{font-size:calc(16px * var(--reader-scale));line-height:1.62}
.name-arabic{font-size:calc(42px * var(--reader-scale))}
.name-translit,.name-meaning{font-size:14px}

@media(max-width:820px){
  .navigation.reader-navigation{grid-template-columns:1fr 1.25fr}
  .reader-quick-controls{gap:8px}
  .reader-control-btn{flex:1 1 180px}
}
@media(max-width:600px){
  .mushaf-arabic{font-size:calc(32px * var(--reader-scale));line-height:1.75}
  .translation{font-size:calc(16px * var(--reader-scale));line-height:1.55}
  .navigation.reader-navigation{grid-template-columns:1fr}
  .navigation .nav-btn.secondary,.navigation .nav-btn.primary{justify-content:space-between}
  .reader-control-btn{flex:1 1 100%;justify-content:space-between}
  .next-button-copy{justify-content:space-between;width:100%}
  .bottom-nav-btn{font-size:10.5px}
}

.autoplay-control.is-off .reader-control-dot{background:#6d6b66;box-shadow:none}.autoplay-control.is-off strong{color:#b7b5b0}

/* V9 — data clarity, persistent time tracking, compact reader sizing, stronger actions */
:root{
  --surface:#11110f;
  --surface-2:#151411;
  --border-strong:#443a29;
  --text-strong:#fbfaf7;
  --text-soft:#c9c7c0;
}

/* Text size now has an intentionally conservative desktop scale. */
html[data-text-size="standard"]{
  --reader-arabic-size:32px;
  --reader-translation-size:15px;
  --dhikr-arabic-size:27px;
  --names-arabic-size:36px;
}
html[data-text-size="large"]{
  --reader-arabic-size:38px;
  --reader-translation-size:17px;
  --dhikr-arabic-size:32px;
  --names-arabic-size:42px;
}
html[data-text-size="xlarge"]{
  --reader-arabic-size:44px;
  --reader-translation-size:19px;
  --dhikr-arabic-size:37px;
  --names-arabic-size:48px;
}
.mushaf-arabic{
  font-size:var(--reader-arabic-size)!important;
  line-height:1.7!important;
  max-width:940px;
}
.translation{
  font-size:var(--reader-translation-size)!important;
  line-height:1.55!important;
  max-width:860px;
}
.dhikr-arabic{font-size:var(--dhikr-arabic-size)!important;line-height:1.75!important}
.dhikr-translation{font-size:calc(var(--reader-translation-size) - 1px)!important}
.name-arabic{font-size:var(--names-arabic-size)!important}

/* Daily goal removed: the continue card is now a simple launch surface. */
.continue-simple-card{min-height:250px;display:flex;flex-direction:column;justify-content:space-between}
.continue-simple-card .primary-cta{margin-top:28px}
.reader-wrap{padding-top:8px}
.reader-meta{margin-top:10px}

/* Share actions: higher contrast, actual icon containers, obvious affordance. */
.welcome-actions,.profile-share-actions{display:flex;gap:12px;flex-wrap:wrap}
.share-btn{
  min-height:50px!important;
  padding:8px 16px 8px 9px!important;
  gap:10px!important;
  border-radius:15px!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
.share-btn-icon{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:#241f16;border:1px solid #5a492e;color:#f0c96f;
}
.share-btn-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-site-btn{
  background:#d8b363!important;color:#0b0b09!important;border-color:#e9ca83!important;
}
.share-site-btn .share-btn-icon{background:#0f0e0b;border-color:#0f0e0b;color:#efc96f}
.share-site-btn:hover{background:#e3c176!important}
.share-progress-btn{background:#171714!important;color:#f8f7f3!important;border-color:#4a4030!important}
.share-progress-btn:hover{background:#1d1b17!important;border-color:#745f39!important}

/* Time tracker hierarchy */
.time-spent-card .session-big{font-variant-numeric:tabular-nums;font-size:34px;color:#f1cf83}
.time-spent-card .summary-row strong{font-variant-numeric:tabular-nums;color:#f4e6c7}

/* Header labels are explicit so lifetime and today can never be confused. */
.stat-pill{min-width:138px}
.stat-stack span{color:#c0bdb5!important}

/* Weekly tracker is now simply read / not read; no hidden goal state. */
.habit-day.active .day-dot{background:#d1ae62!important;color:#0a0907!important;border-color:#e1c47f!important;font-weight:900}
.habit-day.goal-hit .day-dot{box-shadow:none!important}

/* Four reader preference chips stay centered and equal-weight. */
.reader-quick-controls{max-width:900px!important;gap:9px!important}
.reader-control-btn{min-width:150px;min-height:48px!important;padding:0 14px!important}
#reciterQuickBtn{min-width:210px}
.reader-control-label{font-size:12px!important}
.reader-control-btn strong{font-size:13px!important}

/* Cleaner navigation proportions */
.navigation.reader-navigation{grid-template-columns:minmax(190px,260px) minmax(350px,1fr)!important;gap:14px!important;margin-top:16px!important}
.navigation .nav-btn{min-height:64px!important}
.next-earned{background:rgba(0,0,0,.14)!important;border:1px solid rgba(0,0,0,.08);font-size:12.5px!important}

/* Settings drawer text-size selector should visually explain the new scale. */
#textSizeSetting{border-color:#4c402c}
#textSizeSetting select{font-weight:700}

@media(max-width:820px){
  html[data-text-size="standard"]{--reader-arabic-size:29px;--reader-translation-size:15px;--dhikr-arabic-size:25px;--names-arabic-size:33px}
  html[data-text-size="large"]{--reader-arabic-size:34px;--reader-translation-size:17px;--dhikr-arabic-size:29px;--names-arabic-size:38px}
  html[data-text-size="xlarge"]{--reader-arabic-size:39px;--reader-translation-size:19px;--dhikr-arabic-size:34px;--names-arabic-size:44px}
  .reader-control-btn,#reciterQuickBtn{min-width:0;flex:1 1 46%}
  .navigation.reader-navigation{grid-template-columns:1fr!important}
  .welcome-actions,.profile-share-actions{width:100%}
  .share-btn{flex:1;justify-content:flex-start}
}


/* V10 reader layout refinements */
.reader-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.reader-sidebar{position:sticky;top:92px;align-self:start}
.reader-sidebar-top{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.reader-sidebar-caption{font-size:12px;color:#a8a59f;padding-left:4px}
.sidebar-home-btn{width:fit-content;min-height:42px;padding:0 16px;border-radius:999px;font-weight:700}
.reader-sidebar-panel{border:1px solid rgba(211,184,124,.2);border-radius:22px;background:linear-gradient(180deg,#10100f,#0c0c0b);padding:14px;display:grid;gap:12px;box-shadow:0 16px 40px rgba(0,0,0,.25)}
.sidebar-select{display:grid;gap:7px}
.sidebar-select select{width:100%;min-width:0;background:#141413;border-color:#38342d;padding:13px 14px;border-radius:14px;font-size:15px;font-weight:700}
.sidebar-select.compact select{min-width:0}
.sidebar-meta-stack{display:grid;gap:10px;margin-top:2px}
.sidebar-meta-card{border:1px solid rgba(211,184,124,.14);background:#131210;border-radius:16px;padding:12px 14px;display:grid;gap:6px}
.sidebar-meta-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9f988b;font-weight:700}
.sidebar-meta-card strong{font-size:16px;color:#f5f2ea}
.reader-main{min-width:0}
.reader-main .ayah-card{margin-top:0}
.reader-main .reader-navigation{margin-top:16px}
.reader-view .reader-wrap{width:min(1280px,calc(100% - 44px))}
.reader-view .method-note{margin-top:16px}
.reader-view .reader-control-btn{padding:11px 16px;border-radius:16px;min-width:148px}
.reader-view .reader-control-btn strong{font-size:16px}
.reader-view .reader-control-label{font-size:11px}
.reader-view .navigation{grid-template-columns:220px 1fr;gap:12px}
.reader-view .navigation .nav-btn{min-height:72px;border-radius:18px}
.reader-view .navigation .nav-btn.secondary{justify-content:flex-start;padding:0 22px;gap:14px}
.reader-view .navigation .nav-btn.secondary strong{font-size:28px;font-size:18px}
.reader-view .navigation .nav-btn.primary{justify-content:space-between;align-items:center;padding:0 22px 0 24px;gap:16px}
.next-button-copy{display:flex;align-items:center;gap:10px;flex:1;text-align:left}
.next-button-copy strong{font-size:19px;line-height:1}
.next-button-side{display:flex;align-items:center;gap:14px;margin-left:auto}
.next-earned-inline{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:999px;background:rgba(12,12,11,.14);color:#181611;font-size:15px;font-weight:800;line-height:1;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(12,12,11,.08)}
.reader-view .nav-btn.primary .nav-arrow{font-size:22px;color:#15120c}
.reader-view .nav-btn.secondary .nav-arrow{font-size:22px}
.reader-view .select-wrap span{font-size:11px;color:#d0b26e;font-weight:800}
@media (max-width:1080px){
  .reader-shell{grid-template-columns:1fr}
  .reader-sidebar{position:static}
  .reader-sidebar-top{flex-direction:row;justify-content:space-between;align-items:center}
  .reader-sidebar-panel{grid-template-columns:1fr 120px 1fr 1fr;align-items:end}
  .sidebar-meta-stack{grid-template-columns:1fr 1fr;margin-top:0}
}
@media (max-width:820px){
  .reader-sidebar-panel{grid-template-columns:1fr 110px;gap:10px}
  .sidebar-meta-stack{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .reader-view .navigation{grid-template-columns:1fr}
  .reader-view .navigation .nav-btn.secondary,.reader-view .navigation .nav-btn.primary{justify-content:space-between}
}
@media (max-width:560px){
  .reader-view .reader-wrap{width:min(100% - 18px,760px)}
  .reader-sidebar-top{flex-direction:column;align-items:flex-start}
  .reader-sidebar-panel{grid-template-columns:1fr}
  .sidebar-meta-stack{grid-template-columns:1fr}
  .reader-view .reader-control-btn{min-width:0}
  .reader-view .navigation .nav-btn{min-height:64px}
  .next-earned-inline{font-size:13px;padding:10px 12px}
}


/* V11 — premium reader rail, precise nav alignment, richer profile */
.reader-shell-v11{display:grid!important;grid-template-columns:64px 224px minmax(0,1fr)!important;gap:14px!important;align-items:start!important}
.reader-icon-rail{position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:8px;width:64px;padding:10px 8px;border:1px solid #2d2922;border-radius:24px;background:rgba(15,15,14,.96);box-shadow:0 18px 55px rgba(0,0,0,.32);z-index:4}
.rail-btn{position:relative;width:46px;height:46px;border:0;border-radius:14px;display:grid;place-items:center;background:transparent;color:#9d9a93;transition:background .16s ease,color .16s ease,transform .16s ease}
.rail-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover,.rail-btn:focus-visible{background:#1b1812;color:#edcc84;outline:none;transform:translateY(-1px)}
.rail-home{background:#1c1810;color:#e7c574;box-shadow:inset 0 0 0 1px #4d4128}
.rail-divider{width:30px;height:1px;background:#302d27;margin:2px 0}
.rail-btn::after{content:attr(data-tooltip);position:absolute;left:56px;top:50%;transform:translateY(-50%) translateX(-4px);padding:7px 9px;border-radius:9px;background:#1a1916;color:#f3efe7;font-size:11px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s ease;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:20}
.rail-btn:hover::after,.rail-btn:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
.reader-floating-controls{position:sticky;top:96px;display:grid;gap:10px;padding:10px;border:1px solid #2d2922;border-radius:22px;background:rgba(13,13,12,.95);box-shadow:0 18px 55px rgba(0,0,0,.28);backdrop-filter:blur(16px);z-index:3}
.floating-session-label{padding:6px 8px 2px;color:#8d8981;font-size:11px;font-weight:700;letter-spacing:.02em}
.floating-select{display:grid;grid-template-columns:1fr;gap:8px;padding:12px;border-radius:16px;background:#151513;border:1px solid #343028;transition:border-color .16s ease,background .16s ease}
.floating-select:focus-within{border-color:#8b7040;background:#181611}
.floating-select>span{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.floating-select b{font-size:12px;color:#e4c57e;letter-spacing:.08em;text-transform:uppercase}
.floating-select small{font-size:10px;color:#858079}
.floating-select select{width:100%;min-width:0;min-height:42px;border:0!important;background:#0e0e0d!important;color:#f5f3ee!important;border-radius:12px!important;padding:0 12px!important;font-size:14px!important;font-weight:750!important;outline:1px solid #2f2c27}
.floating-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.floating-meta>div{padding:11px 12px;border-radius:14px;background:#11110f;border:1px solid #2c2924;display:grid;gap:4px}
.floating-meta span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#868178;font-weight:800}
.floating-meta strong{font-size:13px;color:#f1ede5}
.reader-main{min-width:0}
.reader-view .reader-wrap{width:min(1440px,calc(100% - 42px))!important}
.reader-view .ayah-card{margin:0!important}

/* Next action: no floating bubble, reward always sits directly beside arrow */
.reader-view .navigation{grid-template-columns:220px minmax(0,1fr)!important;gap:12px!important}
.next-action-btn{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 22px 0 24px!important;gap:20px!important}
.next-action-btn .next-label{display:block!important;font-size:18px!important;line-height:1!important;margin:0!important}
.next-action-right{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:18px!important;margin-left:auto!important;min-width:0!important}
.next-reward-text{display:inline-flex!important;align-items:center!important;white-space:nowrap!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;color:#211b0f!important;font-size:15px!important;font-weight:900!important;line-height:1!important}
.next-arrow{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;font-size:23px!important;line-height:1!important;color:#16120b!important}

/* Bottom navigation is locked to viewport center and equal-width */
.bottom-nav{left:50%!important;right:auto!important;transform:translateX(-50%)!important;margin:0!important;width:min(620px,calc(100vw - 32px))!important;grid-template-columns:repeat(5,1fr)!important;justify-items:stretch!important;box-sizing:border-box!important}
.bottom-nav-btn{width:100%!important;min-width:0!important}

/* Profile editor */
.profile-identity-copy{min-width:0}
.profile-handle{margin-top:-1px;color:#d5b66f;font-size:13px;font-weight:750}
.profile-bio-display{max-width:560px!important;margin-top:8px!important;color:#d0cec8!important;font-size:14px!important;line-height:1.55!important}
.profile-editor-card{display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;align-items:start!important;gap:24px!important;padding:22px!important}
.profile-photo-editor{display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px}
.profile-avatar-edit{border:0;background:transparent;color:#f4f0e7;display:grid;place-items:center;gap:10px;padding:0}
.profile-avatar-edit-ring{width:104px;height:104px;border-radius:30px;padding:3px;background:linear-gradient(145deg,#6f572c,#e0bd72);box-shadow:0 14px 36px rgba(179,146,88,.12)}
.profile-avatar-mini{width:100%;height:100%;border-radius:27px;background:#181713 center/cover no-repeat;display:grid;place-items:center;color:#0d0c09;font-size:34px;font-weight:900;overflow:hidden}
.profile-photo-action{font-size:12px;font-weight:800;color:#e0bf79}
.text-button{border:0;background:transparent;color:#918b82;font-size:11px;font-weight:700;padding:5px 8px}.text-button:hover{color:#f0ece5}
.profile-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.profile-field{display:grid;gap:7px}.profile-field>span{font-size:11px;color:#c5b17d;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.profile-field input,.profile-field textarea{width:100%;border:1px solid #39352e;border-radius:12px;background:#0e0e0d;color:#f7f5ef;padding:12px 13px;font:inherit;font-size:14px;outline:none;resize:vertical}
.profile-field input:focus,.profile-field textarea:focus{border-color:#8a7042;box-shadow:0 0 0 3px rgba(211,184,124,.07)}
.profile-field-wide{grid-column:1/-1;position:relative}.profile-field-wide small{position:absolute;right:10px;bottom:8px;color:#77736d;font-size:10px}
.username-input-wrap{display:grid;grid-template-columns:32px 1fr;align-items:center;border:1px solid #39352e;border-radius:12px;background:#0e0e0d;overflow:hidden}.username-input-wrap>span{display:grid;place-items:center;color:#a99a78;font-weight:800}.username-input-wrap input{border:0!important;border-left:1px solid #2f2c27!important;border-radius:0!important;box-shadow:none!important}
.profile-editor-actions{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:2px}
.profile-avatar{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}

@media(max-width:1180px){
  .reader-shell-v11{grid-template-columns:64px minmax(0,1fr)!important}
  .reader-floating-controls{grid-column:2;position:static;grid-template-columns:1fr 1fr auto;align-items:end}
  .floating-session-label{display:none}.floating-meta{min-width:180px}
  .reader-main{grid-column:2}
}
@media(max-width:860px){
  .reader-shell-v11{grid-template-columns:1fr!important}
  .reader-icon-rail{position:static;grid-row:1;flex-direction:row;width:auto;justify-content:center;padding:7px;border-radius:18px}
  .rail-divider{width:1px;height:28px;margin:0 3px}.rail-btn::after{display:none}
  .reader-floating-controls{grid-column:1;grid-template-columns:1fr 1fr;position:static}.floating-meta{grid-column:1/-1}
  .reader-main{grid-column:1}
  .reader-view .navigation{grid-template-columns:1fr!important}
  .profile-editor-card{grid-template-columns:1fr!important}.profile-fields-grid{grid-template-columns:1fr}.profile-field-wide,.profile-editor-actions{grid-column:1}
}
@media(max-width:560px){
  .reader-floating-controls{grid-template-columns:1fr}.floating-meta{grid-column:1}
  .bottom-nav{width:calc(100vw - 18px)!important}
  .next-action-right{gap:10px!important}.next-reward-text{font-size:13px!important}
}


/* V12 reader refinement */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.reader-shell-v12{display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;gap:24px!important;align-items:start!important}
.reader-shell-v12 .reader-sidebar{position:sticky;top:92px;align-self:start}
.reader-shell-v12 .reader-sidebar-top{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.reader-shell-v12 .reader-sidebar-caption{font-size:12px;color:#9f9a90;padding-left:4px}
.reader-shell-v12 .sidebar-home-btn{width:fit-content;min-height:44px;padding:0 18px;border-radius:999px;font-weight:800}
.reader-shell-v12 .reader-sidebar-panel{border:1px solid rgba(211,184,124,.2);border-radius:24px;background:linear-gradient(180deg,#10100f,#0c0c0b);padding:16px;display:grid;gap:12px;box-shadow:0 16px 40px rgba(0,0,0,.24)}
.reader-shell-v12 .sidebar-select{display:grid;gap:7px}
.reader-shell-v12 .sidebar-select select{width:100%;min-width:0;background:#141413;border-color:#38342d;padding:13px 14px;border-radius:15px;font-size:15px;font-weight:700}
.reader-shell-v12 .sidebar-meta-stack{display:grid;gap:10px;margin-top:2px}
.reader-shell-v12 .sidebar-meta-card{border:1px solid rgba(211,184,124,.14);background:#131210;border-radius:16px;padding:12px 14px;display:grid;gap:6px}
.reader-shell-v12 .sidebar-meta-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9f988b;font-weight:700}
.reader-shell-v12 .sidebar-meta-card strong{font-size:16px;color:#f5f2ea}
.reader-shell-v12 .reader-main{min-width:0;display:grid;justify-items:center}
.reader-shell-v12 .ayah-card{width:100%;max-width:920px;margin-top:0}
.reader-shell-v12 .reader-navigation-v12{width:100%;max-width:920px;margin:20px auto 0;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:18px;align-items:end}
.reader-shell-v12 .reader-quick-controls{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;justify-content:center;max-width:760px;margin:26px auto 0}
.reader-shell-v12 .reader-control-btn{min-height:58px;border-radius:18px;background:#141311;border:1px solid #332f28;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 16px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.reader-shell-v12 .reader-control-btn:hover{background:#1a1815;border-color:#625131;transform:translateY(-1px)}
.reader-shell-v12 .reader-control-label{font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;color:#9f9a90}
.reader-shell-v12 .reader-control-btn strong{font-size:15px!important;color:#f2e1a6;font-weight:800;line-height:1.15}
.reader-shell-v12 .reader-control-chevron{display:none!important}
.reader-shell-v12 .autoplay-control{gap:6px}
.reader-shell-v12 .reader-control-dot{width:8px;height:8px;border-radius:50%;background:#d7b669;box-shadow:0 0 0 4px rgba(215,182,105,.1)}
.reader-shell-v12 .arrow-nav-btn,.reader-shell-v12 .done-home-btn{min-height:96px;border-radius:30px;font-weight:800;font-size:28px;display:flex;align-items:center;justify-content:center}
.reader-shell-v12 .prev-arrow-btn{background:#0f0f0f;border:2px solid rgba(244,244,244,.9);color:#ffffff}
.reader-shell-v12 .prev-arrow-btn:hover{background:#151515;border-color:#ffffff}
.reader-shell-v12 .prev-arrow-btn .nav-arrow{font-size:56px;line-height:1;font-weight:400}
.reader-shell-v12 .done-home-btn{background:#0f0f0f;border:1px solid #282521;color:#ffffff;font-size:26px;letter-spacing:-.02em}
.reader-shell-v12 .done-home-btn:hover{background:#171717;border-color:#3d372d}
.reader-shell-v12 .next-action-wrap{display:grid;gap:10px;align-items:end}
.reader-shell-v12 .next-top-reward{min-height:34px;text-align:center;color:#f5f1ea;font-size:32px;font-weight:900;letter-spacing:-.03em}
.reader-shell-v12 .next-arrow-btn{background:#f1eef3;border:1px solid rgba(255,255,255,.65);color:#090909}
.reader-shell-v12 .next-arrow-btn:hover{background:#fcf9fe}
.reader-shell-v12 .next-arrow-btn .nav-arrow{font-size:56px;line-height:1;font-weight:400;color:#101010}
.reader-shell-v12 .method-note{text-align:center;max-width:920px}
.reader-shell-v12 .surah-heading,.reader-shell-v12 .translation,.reader-shell-v12 .mushaf-heading-rule,.reader-shell-v12 .mushaf-reading-panel{margin-left:auto;margin-right:auto}
.reader-shell-v12 .mushaf-reading-panel{max-width:820px}
.reader-shell-v12 .translation{max-width:780px}
@media (max-width:1120px){
  .reader-shell-v12{grid-template-columns:1fr!important;gap:18px!important}
  .reader-shell-v12 .reader-sidebar{position:static;width:100%;max-width:920px;margin:0 auto}
  .reader-shell-v12 .reader-sidebar-top{flex-direction:row;justify-content:space-between;align-items:center}
  .reader-shell-v12 .reader-sidebar-panel{grid-template-columns:1.3fr .8fr 1fr 1fr;align-items:end}
  .reader-shell-v12 .sidebar-meta-stack{grid-template-columns:1fr 1fr;margin-top:0}
}
@media (max-width:860px){
  .reader-shell-v12 .reader-sidebar-panel{grid-template-columns:1fr 110px;gap:10px}
  .reader-shell-v12 .sidebar-meta-stack{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .reader-shell-v12 .reader-quick-controls{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
  .reader-shell-v12 .reader-navigation-v12{grid-template-columns:1fr;max-width:520px}
  .reader-shell-v12 .next-action-wrap{width:100%}
}
@media (max-width:560px){
  .reader-shell-v12 .reader-sidebar-top{flex-direction:column;align-items:flex-start}
  .reader-shell-v12 .reader-sidebar-panel{grid-template-columns:1fr}
  .reader-shell-v12 .sidebar-meta-stack{grid-template-columns:1fr}
  .reader-shell-v12 .reader-quick-controls{grid-template-columns:1fr}
  .reader-shell-v12 .arrow-nav-btn,.reader-shell-v12 .done-home-btn{min-height:84px;border-radius:26px}
  .reader-shell-v12 .prev-arrow-btn .nav-arrow,.reader-shell-v12 .next-arrow-btn .nav-arrow{font-size:46px}
  .reader-shell-v12 .next-top-reward{font-size:26px}
}


/* =========================================================
   V13 — Reader alignment + clickable brand
   ========================================================= */

.brand-home-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.brand-home-btn:hover .brand-title{color:#f7df9e}
.brand-home-btn:focus-visible{
  outline:2px solid #ddb966;
  outline-offset:7px;
  border-radius:12px;
}

/* The sidebar starts directly with the selectors now. */
.reader-shell-v12 .reader-sidebar-panel{
  margin-top:0!important;
}

/* Three controls are always one horizontal action row on desktop.
   The reward is absolutely placed above the right button, so it
   never pushes the Next arrow onto another row. */
.reader-navigation-v13{
  width:100%;
  max-width:920px;
  margin:54px auto 0;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:18px!important;
}

.reader-action-btn{
  height:92px;
  min-height:92px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.reader-prev-btn{
  flex:0 0 190px;
  border:2px solid rgba(250,250,250,.9);
  background:#0e0e0e;
  color:#fff;
}

.reader-prev-btn:hover:not(:disabled){
  background:#151515;
  border-color:#fff;
  transform:translateY(-1px);
}

.reader-done-btn{
  flex:1 1 420px;
  border:1px solid #2a2824;
  background:#101010;
  color:#fff;
  font-size:27px;
  font-weight:700;
  letter-spacing:-.025em;
}

.reader-done-btn:hover{
  background:#181818;
  border-color:#3c382f;
  transform:translateY(-1px);
}

.reader-next-wrap{
  position:relative;
  flex:0 0 190px;
  min-width:190px;
  display:flex;
  align-items:stretch;
}

.reader-next-btn{
  width:100%;
  border:1px solid rgba(255,255,255,.85);
  background:#f2eff4;
  color:#080808;
}

.reader-next-btn:hover:not(:disabled){
  background:#fff;
  transform:translateY(-1px);
}

.reader-action-arrow{
  display:block;
  font-size:55px;
  font-weight:350;
  line-height:1;
  transform:translateY(-2px);
}

.reader-next-reward{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  white-space:nowrap;
  color:#f5f3ed;
  font-size:31px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.025em;
}

/* Override any earlier generic navigation rules. */
.reader-navigation-v13 .reader-action-btn{
  padding:0!important;
}
.reader-navigation-v13 #prevBtn,
.reader-navigation-v13 #nextBtn{
  min-height:92px!important;
}

/* Keep the whole reader main axis visually centered. */
.reader-shell-v12 .reader-main{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
.reader-shell-v12 .ayah-card,
.reader-shell-v12 .method-note,
.reader-navigation-v13{
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:860px){
  .reader-navigation-v13{
    gap:10px!important;
    margin-top:50px;
  }
  .reader-prev-btn,
  .reader-next-wrap{
    flex-basis:112px;
    min-width:112px;
  }
  .reader-done-btn{
    flex-basis:auto;
    font-size:21px;
  }
  .reader-action-btn{
    height:76px;
    min-height:76px;
    border-radius:22px;
  }
  .reader-navigation-v13 #prevBtn,
  .reader-navigation-v13 #nextBtn{
    min-height:76px!important;
  }
  .reader-action-arrow{font-size:43px}
  .reader-next-reward{font-size:24px}
}

@media(max-width:520px){
  .reader-navigation-v13{
    gap:8px!important;
  }
  .reader-prev-btn,
  .reader-next-wrap{
    flex-basis:82px;
    min-width:82px;
  }
  .reader-done-btn{
    font-size:17px;
  }
  .reader-action-btn{
    height:66px;
    min-height:66px;
    border-radius:19px;
  }
  .reader-navigation-v13 #prevBtn,
  .reader-navigation-v13 #nextBtn{
    min-height:66px!important;
  }
  .reader-action-arrow{font-size:36px}
  .reader-next-reward{font-size:20px;bottom:calc(100% + 8px)}
}


/* =========================================================
   V14 — Clickable tool cards, centered reader shell, unified CTA
   ========================================================= */

/* Center sidebar + reader as one exact visual unit. */
.reader-view .reader-wrap{
  width:100%!important;
  max-width:none!important;
  margin:32px auto 80px!important;
  padding:0 24px;
}
.reader-shell-v12{
  width:min(1174px,100%)!important;
  margin:0 auto!important;
  grid-template-columns:230px minmax(0,920px)!important;
  gap:24px!important;
  justify-content:center!important;
  align-items:start!important;
}
.reader-shell-v12 .reader-sidebar{
  width:230px!important;
  justify-self:center!important;
}
.reader-shell-v12 .reader-sidebar-panel{
  width:230px!important;
  padding:16px!important;
  gap:12px!important;
  border-radius:22px!important;
}
.reader-shell-v12 .sidebar-select select{
  min-height:48px;
}
.reader-shell-v12 .sidebar-meta-card{
  min-height:64px;
  justify-content:center;
}
.reader-shell-v12 .reader-main{
  width:100%!important;
  max-width:920px!important;
  justify-self:center!important;
}

/* Entire spiritual tools are now the interaction target. */
.clickable-tool-card{
  cursor:pointer;
  user-select:none;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.clickable-tool-card:hover{
  transform:translateY(-3px);
  border-color:#6e5934!important;
  background:#151412!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
.clickable-tool-card:focus-visible{
  outline:2px solid #dfbd71;
  outline-offset:3px;
}
.tool-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.tool-card-arrow{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#e4c16f;
  background:#17140f;
  border:1px solid #4a3d26;
  font-size:20px;
  line-height:1;
  transition:transform .16s ease,background .16s ease;
}
.clickable-tool-card:hover .tool-card-arrow{
  transform:translateX(3px);
  background:#211b11;
}

/* One identical reading CTA at the bottom of every non-reader destination. */
.tab-reader-cta{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:34px auto 10px;
  padding:6px 0 22px;
}
.tab-continue-reading{
  width:min(360px,100%);
  min-height:62px;
  border:1px solid #e0bf79;
  border-radius:18px;
  background:#d5af63;
  color:#0d0c09;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:0 22px;
  font-size:17px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(191,151,74,.10);
  transition:transform .15s ease,background .15s ease;
}
.tab-continue-reading:hover{
  background:#e1bd73;
  transform:translateY(-1px);
}
.tab-continue-reading span:last-child{font-size:21px}
.drawer-reader-cta{padding:14px 18px 4px;display:flex;justify-content:center}
.drawer-continue-reading{width:100%;min-height:56px;border-radius:15px}

/* Removed profile dashboard/stat blocks leave cleaner breathing room. */
.profile-wrap .tab-reader-cta{margin-top:28px}

@media(max-width:1120px){
  .reader-shell-v12{
    width:min(920px,100%)!important;
    grid-template-columns:1fr!important;
  }
  .reader-shell-v12 .reader-sidebar{
    width:100%!important;
    max-width:920px!important;
  }
  .reader-shell-v12 .reader-sidebar-panel{
    width:100%!important;
    grid-template-columns:1.3fr .8fr 1fr 1fr!important;
  }
}
@media(max-width:860px){
  .reader-shell-v12 .reader-sidebar-panel{
    grid-template-columns:1fr 110px!important;
  }
  .reader-shell-v12 .sidebar-meta-stack{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:560px){
  .reader-view .reader-wrap{padding:0 10px}
  .reader-shell-v12 .reader-sidebar-panel{grid-template-columns:1fr!important}
  .reader-shell-v12 .sidebar-meta-stack{grid-template-columns:1fr}
  .tab-reader-cta{padding-bottom:14px}
  .tab-continue-reading{width:100%}
}


/* =========================================================
   V15 — Unified tracking, exact reader alignment, site themes
   ========================================================= */

/* ---------- simplified tracking ---------- */
.v15-continue-card{
  margin-top:16px;
}
.tracking-hub-card{
  margin-top:16px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:26px;
  background:var(--theme-panel,#111);
  padding:26px;
  box-shadow:var(--theme-shadow,0 22px 60px rgba(0,0,0,.28));
}
.tracking-hub-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--theme-border,var(--line));
}
.tracking-hub-head h2{
  margin:5px 0 0;
  font-size:26px;
  letter-spacing:-.025em;
}
.tracking-streak{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  padding:10px 14px;
  border-radius:999px;
  background:var(--theme-soft,var(--gold-faint));
  border:1px solid var(--theme-border,var(--line));
}
.tracking-streak-icon{color:var(--theme-accent,var(--gold-2))}
.tracking-streak div{display:grid;gap:1px}
.tracking-streak strong{font-size:14px}
.tracking-streak small{font-size:10px;color:var(--theme-muted,var(--muted))}
.tracking-primary{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:0;
  padding:28px 0;
  border-bottom:1px solid var(--theme-border,var(--line));
}
.tracking-today,
.tracking-record{
  padding:4px 28px;
}
.tracking-today{padding-left:0;border-right:1px solid var(--theme-border,var(--line))}
.tracking-label{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--theme-accent,var(--gold-2));
}
.tracking-big-number{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:8px 0 4px;
}
.tracking-big-number strong{
  font-size:52px;
  line-height:1;
  letter-spacing:-.045em;
  color:var(--theme-accent-strong,var(--gold-3));
}
.tracking-big-number span{font-size:15px;color:var(--theme-muted,var(--muted))}
.tracking-sub{font-size:12px;color:var(--theme-muted,var(--muted));line-height:1.5}
.tracking-record-value{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin:8px 0 4px;
}
.tracking-record-value strong{
  font-size:34px;
  color:var(--theme-text,var(--text));
}
.tracking-record-value span{font-size:12px;color:var(--theme-muted,var(--muted))}
.tracking-record-progress{margin-top:14px}
.tracking-record-copy{display:flex;justify-content:space-between;font-size:11px;color:var(--theme-muted,var(--muted));margin-bottom:7px}
.tracking-record-copy strong{color:var(--theme-text,var(--text))}
.tracking-record-message{font-size:11px;color:var(--theme-muted,var(--muted));margin-top:8px}
.tracking-period-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--theme-border,var(--line));
}
.tracking-period{
  padding:22px 24px;
  display:grid;
  gap:5px;
  border-right:1px solid var(--theme-border,var(--line));
}
.tracking-period:first-child{padding-left:0}
.tracking-period:last-child{border-right:0}
.tracking-period>span{
  font-size:10px;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--theme-muted,var(--muted));
}
.tracking-period>strong{
  font-size:28px;
  color:var(--theme-accent-strong,var(--gold-3));
}
.tracking-period small{font-size:10px;color:var(--theme-muted,var(--muted));line-height:1.4}
.tracking-time-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-bottom:1px solid var(--theme-border,var(--line));
}
.tracking-time-row>div{
  padding:18px 12px;
  display:grid;
  gap:5px;
  border-right:1px solid var(--theme-border,var(--line));
}
.tracking-time-row>div:first-child{padding-left:0}
.tracking-time-row>div:last-child{border-right:0}
.tracking-time-row span{font-size:10px;color:var(--theme-muted,var(--muted))}
.tracking-time-row strong{font-size:13px;color:var(--theme-text,var(--text))}
.tracking-activity{padding:22px 0 18px}
.tracking-activity-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.tracking-activity-head span{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--theme-accent,var(--gold-2))}
.tracking-activity-head small{font-size:10px;color:var(--theme-muted,var(--muted))}
.tracking-weekly-bars{height:140px!important}
.tracking-foot{
  display:flex;
  justify-content:flex-end;
  gap:26px;
  padding-top:14px;
  border-top:1px solid var(--theme-border,var(--line));
  font-size:11px;
  color:var(--theme-muted,var(--muted));
}
.tracking-foot strong{color:var(--theme-text,var(--text));margin-left:5px}

/* ---------- reader: reward is inside the white Next control ---------- */
.reader-next-wrap{
  position:relative!important;
  display:flex!important;
  align-items:stretch!important;
}
.reader-next-btn{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}
.reader-next-reward-inside{
  display:block;
  color:#0a0a0a!important;
  font-size:17px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.015em;
  margin-bottom:1px;
}
.reader-next-btn .reader-action-arrow{
  color:#0a0a0a!important;
  font-size:46px!important;
  line-height:.95!important;
}
.reader-next-reward{display:none!important}

/* ---------- reader quick settings: equal, modern, no cramped dot ---------- */
.reader-shell-v12 .reader-quick-controls{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  max-width:780px!important;
  width:100%!important;
}
.reader-shell-v12 .reader-control-btn{
  min-width:0!important;
  min-height:52px!important;
  padding:0 14px!important;
  border-radius:15px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  white-space:nowrap;
  overflow:hidden;
}
.reader-shell-v12 .reader-control-label{
  font-size:11px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  flex:none;
}
.reader-shell-v12 .reader-control-btn strong{
  font-size:13px!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reader-shell-v12 .reader-control-dot{display:none!important}

/* ---------- bottom nav lines up with the Qur'an card center ---------- */
body[data-view="readerView"] .bottom-nav{
  left:calc(50% + 127px)!important;
}
@media(max-width:1120px){
  body[data-view="readerView"] .bottom-nav{left:50%!important}
}

/* ---------- themes ---------- */
body[data-theme="kaaba"]{
  --theme-bg:#080806;
  --theme-bg-2:#0d0c09;
  --theme-panel:#11100d;
  --theme-panel-2:#15130f;
  --theme-text:#f5f1e8;
  --theme-muted:#aaa398;
  --theme-accent:#c8a764;
  --theme-accent-strong:#efd58f;
  --theme-border:rgba(204,171,101,.25);
  --theme-soft:rgba(204,171,101,.10);
  --theme-quran:#fffaf1;
  --theme-primary:#d5af63;
  --theme-primary-text:#0b0907;
  --theme-shadow:0 22px 60px rgba(0,0,0,.36);
}
body[data-theme="sunset"]{
  --theme-bg:#150c08;
  --theme-bg-2:#211008;
  --theme-panel:#24140d;
  --theme-panel-2:#2c190f;
  --theme-text:#fff1df;
  --theme-muted:#c7aa91;
  --theme-accent:#e49445;
  --theme-accent-strong:#ffc46f;
  --theme-border:rgba(229,143,65,.30);
  --theme-soft:rgba(229,143,65,.12);
  --theme-quran:#fff5e9;
  --theme-primary:#e39a4c;
  --theme-primary-text:#1b0d05;
  --theme-shadow:0 22px 60px rgba(43,14,3,.38);
}
body[data-theme="dark"]{
  --theme-bg:#090b0e;
  --theme-bg-2:#0f1216;
  --theme-panel:#13171c;
  --theme-panel-2:#171c22;
  --theme-text:#f2f4f7;
  --theme-muted:#a1a8b2;
  --theme-accent:#b8bec8;
  --theme-accent-strong:#e2e6ec;
  --theme-border:rgba(185,193,204,.20);
  --theme-soft:rgba(185,193,204,.08);
  --theme-quran:#ffffff;
  --theme-primary:#d7dce3;
  --theme-primary-text:#0a0c0f;
  --theme-shadow:0 22px 60px rgba(0,0,0,.36);
}
body[data-theme="light"]{
  --theme-bg:#f2efe8;
  --theme-bg-2:#e9e4da;
  --theme-panel:#fffdf8;
  --theme-panel-2:#f7f2e9;
  --theme-text:#1c1915;
  --theme-muted:#726b61;
  --theme-accent:#9a712e;
  --theme-accent-strong:#76531f;
  --theme-border:rgba(87,70,43,.20);
  --theme-soft:rgba(154,113,46,.09);
  --theme-quran:#16120e;
  --theme-primary:#b88a42;
  --theme-primary-text:#fffdf7;
  --theme-shadow:0 18px 50px rgba(70,55,35,.11);
}

body[data-theme]{
  background:
    radial-gradient(circle at 12% -5%,var(--theme-soft),transparent 29%),
    linear-gradient(180deg,var(--theme-bg),var(--theme-bg-2) 60%,var(--theme-bg))!important;
  color:var(--theme-text)!important;
}
body[data-theme] .topbar{
  background:color-mix(in srgb,var(--theme-bg) 92%, transparent)!important;
  border-bottom-color:var(--theme-border)!important;
}
body[data-theme] .bottom-nav,
body[data-theme] .settings-drawer,
body[data-theme] .share-sheet-card,
body[data-theme] .tracking-hub-card,
body[data-theme] .continue-card,
body[data-theme] .habit-week-card,
body[data-theme] .spiritual-tools-section,
body[data-theme] .spiritual-tool-card,
body[data-theme] .profile-hero,
body[data-theme] .profile-edit-card,
body[data-theme] .friends-card,
body[data-theme] .adhkar-hero,
body[data-theme] .names-hero,
body[data-theme] .adhkar-progress-card,
body[data-theme] .dhikr-card,
body[data-theme] .tasbeeh-card,
body[data-theme] .name-card,
body[data-theme] .names-footnote,
body[data-theme] .setting-item,
body[data-theme] .reader-sidebar-panel{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body[data-theme] .ayah-card{
  background:linear-gradient(180deg,var(--theme-panel-2),var(--theme-panel))!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
body[data-theme] .mushaf-arabic,
body[data-theme] .dhikr-arabic{
  color:var(--theme-quran)!important;
  text-shadow:none!important;
}
body[data-theme] .translation,
body[data-theme] .dhikr-translation,
body[data-theme] .home-welcome p,
body[data-theme] .tracking-sub,
body[data-theme] .period-detail,
body[data-theme] .period-range,
body[data-theme] .spiritual-tool-card p,
body[data-theme] .adhkar-hero p,
body[data-theme] .names-hero p,
body[data-theme] .setting-item p{
  color:var(--theme-muted)!important;
}
body[data-theme] .eyebrow,
body[data-theme] .period-kicker,
body[data-theme] .tracking-label,
body[data-theme] .brand-sub{
  color:var(--theme-accent)!important;
}
body[data-theme] .primary-cta,
body[data-theme] .tab-continue-reading,
body[data-theme] .share-site-btn{
  background:var(--theme-primary)!important;
  border-color:var(--theme-primary)!important;
  color:var(--theme-primary-text)!important;
}
body[data-theme] select,
body[data-theme] input,
body[data-theme] textarea,
body[data-theme] .reader-control-btn,
body[data-theme] .sidebar-meta-card,
body[data-theme] .share-btn,
body[data-theme] .soft-btn{
  background:var(--theme-panel-2)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .reader-control-btn strong,
body[data-theme] .names-source-note strong,
body[data-theme] .name-arabic,
body[data-theme] .tasbeeh-phrase{
  color:var(--theme-accent-strong)!important;
}
body[data-theme] .progress-track,
body[data-theme] .adhkar-progress-track,
body[data-theme] .tasbeeh-meter{
  background:color-mix(in srgb,var(--theme-muted) 18%, transparent)!important;
}
body[data-theme] .progress-fill,
body[data-theme] .adhkar-progress-track>div,
body[data-theme] .tasbeeh-meter div{
  background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-strong))!important;
}
body[data-theme] .bottom-nav-btn{color:var(--theme-muted)!important}
body[data-theme] .bottom-nav-btn.active{
  color:var(--theme-accent-strong)!important;
  background:var(--theme-soft)!important;
}
body[data-theme="light"] .topbar{backdrop-filter:none!important}
body[data-theme="light"] .reader-prev-btn,
body[data-theme="light"] .reader-done-btn{
  background:#29251f!important;
  color:#fff!important;
  border-color:#40392f!important;
}
body[data-theme="light"] .method-note{color:#6f675e!important}
body[data-theme="light"] .gold-heart3d{filter:saturate(.9)}
body[data-theme="light"] .reader-next-btn{
  background:#1d1b18!important;
  border-color:#1d1b18!important;
}
body[data-theme="light"] .reader-next-reward-inside,
body[data-theme="light"] .reader-next-btn .reader-action-arrow{
  color:#fff!important;
}

/* Theme chooser */
.theme-options{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:5px;
}
.theme-option{
  min-height:52px;
  border:1px solid var(--theme-border,var(--line));
  border-radius:13px;
  background:var(--theme-panel-2,#141311);
  color:var(--theme-text,var(--text));
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  font-weight:750;
  font-size:12px;
}
.theme-option.active{
  border-color:var(--theme-accent,var(--gold-2));
  box-shadow:inset 0 0 0 1px var(--theme-accent,var(--gold-2));
}
.theme-swatch{
  width:24px;
  height:24px;
  border-radius:50%;
  flex:none;
  border:1px solid rgba(255,255,255,.20);
}
.swatch-kaaba{background:linear-gradient(135deg,#090806 50%,#d0aa60 50%)}
.swatch-sunset{background:linear-gradient(135deg,#1b0d07 50%,#e49445 50%)}
.swatch-dark{background:linear-gradient(135deg,#0b0e12 50%,#c9ced6 50%)}
.swatch-light{background:linear-gradient(135deg,#f6f2e9 50%,#9a712e 50%)}

@media(max-width:860px){
  .tracking-primary{grid-template-columns:1fr}
  .tracking-today{padding:0 0 22px;border-right:0;border-bottom:1px solid var(--theme-border,var(--line))}
  .tracking-record{padding:22px 0 0}
  .tracking-period-row{grid-template-columns:1fr}
  .tracking-period{padding:16px 0;border-right:0;border-bottom:1px solid var(--theme-border,var(--line))}
  .tracking-period:last-child{border-bottom:0}
  .tracking-time-row{grid-template-columns:1fr 1fr}
  .tracking-time-row>div{border-right:0;border-bottom:1px solid var(--theme-border,var(--line))}
  .tracking-time-row>div:first-child{padding-left:12px}
  .reader-shell-v12 .reader-quick-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .tracking-hub-card{padding:20px}
  .tracking-hub-head{flex-direction:column}
  .tracking-big-number strong{font-size:42px}
  .tracking-time-row{grid-template-columns:1fr}
  .tracking-foot{justify-content:flex-start;flex-wrap:wrap}
  .reader-shell-v12 .reader-quick-controls{grid-template-columns:1fr!important}
}


/* =========================================================
   V16 — COMPLETE THEME / CONTRAST AUDIT
   Every major surface uses semantic theme variables.
   No tab is allowed to keep a legacy black/brown surface.
   ========================================================= */

/* ---------- Accessible palette refinements ---------- */
body[data-theme="kaaba"]{
  --theme-bg:#080806;
  --theme-bg-2:#0d0c09;
  --theme-panel:#12110e;
  --theme-panel-2:#191711;
  --theme-panel-3:#0d0d0b;
  --theme-text:#fffdf7;
  --theme-muted:#c7c0b4;
  --theme-faint:#9e978b;
  --theme-accent:#d6b46a;
  --theme-accent-strong:#f1d58d;
  --theme-border:rgba(221,186,109,.30);
  --theme-border-soft:rgba(221,186,109,.17);
  --theme-soft:rgba(221,186,109,.10);
  --theme-hover:rgba(221,186,109,.08);
  --theme-quran:#fffdf7;
  --theme-primary:#dbb565;
  --theme-primary-hover:#e6c477;
  --theme-primary-text:#100c06;
  --theme-input:#0d0d0b;
  --theme-input-text:#fffdf7;
  --theme-focus:#e7c36e;
  --theme-success:#bfe6c5;
  --theme-success-bg:rgba(76,143,91,.16);
  --theme-success-border:rgba(111,187,126,.34);
  --theme-danger:#ffd1d1;
  --theme-danger-bg:rgba(170,61,61,.15);
  --theme-shadow:0 22px 60px rgba(0,0,0,.40);
}
body[data-theme="sunset"]{
  --theme-bg:#160b06;
  --theme-bg-2:#211008;
  --theme-panel:#26150d;
  --theme-panel-2:#311a0e;
  --theme-panel-3:#1b0e08;
  --theme-text:#fff9f1;
  --theme-muted:#e0c5ad;
  --theme-faint:#bd9c82;
  --theme-accent:#f0a24f;
  --theme-accent-strong:#ffd18a;
  --theme-border:rgba(240,162,79,.34);
  --theme-border-soft:rgba(240,162,79,.20);
  --theme-soft:rgba(240,162,79,.12);
  --theme-hover:rgba(240,162,79,.10);
  --theme-quran:#fffaf4;
  --theme-primary:#ef9f4d;
  --theme-primary-hover:#ffb25f;
  --theme-primary-text:#1c0d05;
  --theme-input:#190d08;
  --theme-input-text:#fff9f1;
  --theme-focus:#ffb35e;
  --theme-success:#ccebd1;
  --theme-success-bg:rgba(77,142,90,.18);
  --theme-success-border:rgba(117,189,131,.36);
  --theme-danger:#ffd4cc;
  --theme-danger-bg:rgba(178,65,50,.17);
  --theme-shadow:0 22px 60px rgba(37,11,2,.42);
}
body[data-theme="dark"]{
  --theme-bg:#090b0e;
  --theme-bg-2:#0e1115;
  --theme-panel:#15191e;
  --theme-panel-2:#1c2128;
  --theme-panel-3:#101318;
  --theme-text:#fbfcfd;
  --theme-muted:#c1c8d1;
  --theme-faint:#929ba7;
  --theme-accent:#c6cdd7;
  --theme-accent-strong:#eef1f5;
  --theme-border:rgba(199,207,218,.27);
  --theme-border-soft:rgba(199,207,218,.15);
  --theme-soft:rgba(199,207,218,.08);
  --theme-hover:rgba(199,207,218,.07);
  --theme-quran:#ffffff;
  --theme-primary:#dce1e8;
  --theme-primary-hover:#f0f3f7;
  --theme-primary-text:#0b0e12;
  --theme-input:#0f1318;
  --theme-input-text:#fbfcfd;
  --theme-focus:#dce1e8;
  --theme-success:#c3e8cb;
  --theme-success-bg:rgba(71,138,85,.17);
  --theme-success-border:rgba(107,178,121,.34);
  --theme-danger:#ffd0d0;
  --theme-danger-bg:rgba(160,59,59,.17);
  --theme-shadow:0 22px 60px rgba(0,0,0,.42);
}
body[data-theme="light"]{
  --theme-bg:#f4f1ea;
  --theme-bg-2:#ece7de;
  --theme-panel:#ffffff;
  --theme-panel-2:#f5f1e9;
  --theme-panel-3:#ebe5da;
  --theme-text:#171512;
  --theme-muted:#5d574f;
  --theme-faint:#756e65;
  --theme-accent:#7d581b;
  --theme-accent-strong:#5e4012;
  --theme-border:rgba(55,45,31,.23);
  --theme-border-soft:rgba(55,45,31,.13);
  --theme-soft:rgba(125,88,27,.09);
  --theme-hover:rgba(125,88,27,.07);
  --theme-quran:#11100e;
  --theme-primary:#966b25;
  --theme-primary-hover:#7f5718;
  --theme-primary-text:#ffffff;
  --theme-input:#ffffff;
  --theme-input-text:#171512;
  --theme-focus:#896124;
  --theme-success:#1d6b2f;
  --theme-success-bg:#e8f5ea;
  --theme-success-border:#9acba4;
  --theme-danger:#8f2727;
  --theme-danger-bg:#faeaea;
  --theme-shadow:0 18px 44px rgba(56,44,28,.12);
}

/* ---------- Browser canvas and universal text ---------- */
html[data-theme]{
  background:var(--theme-bg)!important;
}
body[data-theme]{
  color:var(--theme-text)!important;
  background:
    radial-gradient(circle at 12% -4%,var(--theme-soft),transparent 28%),
    linear-gradient(180deg,var(--theme-bg),var(--theme-bg-2) 58%,var(--theme-bg))!important;
}
body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] .brand-title,
body[data-theme] .section-head h2,
body[data-theme] .share-sheet-head h3{
  color:var(--theme-text)!important;
}
body[data-theme] p,
body[data-theme] small,
body[data-theme] .muted-label{
  color:var(--theme-muted);
}
body[data-theme] ::selection{
  background:var(--theme-accent);
  color:var(--theme-primary-text);
}
body[data-theme] ::placeholder{
  color:var(--theme-faint)!important;
  opacity:1;
}

/* ---------- Core application chrome ---------- */
body[data-theme] .topbar{
  background:color-mix(in srgb,var(--theme-bg) 94%,transparent)!important;
  border-color:var(--theme-border-soft)!important;
}
body[data-theme] .brand-mark,
body[data-theme] .icon-btn,
body[data-theme] .top-stats{
  background:var(--theme-soft)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .brand-mark,
body[data-theme] .brand-sub,
body[data-theme] .stat-icon{
  color:var(--theme-accent-strong)!important;
}
body[data-theme] .stat-stack strong{color:var(--theme-text)!important}
body[data-theme] .stat-stack span{color:var(--theme-muted)!important}

body[data-theme] .bottom-nav{
  background:color-mix(in srgb,var(--theme-panel) 96%,transparent)!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
body[data-theme] .bottom-nav-btn{
  color:var(--theme-muted)!important;
  background:transparent!important;
}
body[data-theme] .bottom-nav-btn:hover{
  color:var(--theme-text)!important;
  background:var(--theme-hover)!important;
}
body[data-theme] .bottom-nav-btn.active{
  color:var(--theme-accent-strong)!important;
  background:var(--theme-soft)!important;
  box-shadow:inset 0 0 0 1px var(--theme-border-soft)!important;
}

/* ---------- Generic controls ---------- */
body[data-theme] button,
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea{
  color:inherit;
}
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea,
body[data-theme] .profile-field input,
body[data-theme] .profile-field textarea,
body[data-theme] .username-input-wrap,
body[data-theme] .tasbeeh-field input,
body[data-theme] .tasbeeh-field select,
body[data-theme] .names-search input,
body[data-theme] .setting-item select,
body[data-theme] .setting-item input[type=number],
body[data-theme] .sidebar-select select{
  background:var(--theme-input)!important;
  color:var(--theme-input-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] input:focus,
body[data-theme] select:focus,
body[data-theme] textarea:focus,
body[data-theme] .profile-field input:focus,
body[data-theme] .profile-field textarea:focus{
  border-color:var(--theme-focus)!important;
  outline:2px solid color-mix(in srgb,var(--theme-focus) 24%,transparent)!important;
  outline-offset:1px;
  box-shadow:none!important;
}
body[data-theme] .eyebrow,
body[data-theme] .period-kicker,
body[data-theme] .social-label,
body[data-theme] .profile-field>span,
body[data-theme] .tracking-label,
body[data-theme] .names-count span,
body[data-theme] .source-link{
  color:var(--theme-accent)!important;
}

/* ---------- HOME / dashboard ---------- */
body[data-theme] .home-welcome p,
body[data-theme] .continue-card p,
body[data-theme] .tracking-sub,
body[data-theme] .tracking-record-message,
body[data-theme] .tracking-period small,
body[data-theme] .tracking-time-row span,
body[data-theme] .tracking-activity-head small,
body[data-theme] .tracking-foot{
  color:var(--theme-muted)!important;
}
body[data-theme] .habit-week-card,
body[data-theme] .continue-card,
body[data-theme] .tracking-hub-card,
body[data-theme] .spiritual-tools-section{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
body[data-theme] .habit-day,
body[data-theme] .spiritual-tool-card,
body[data-theme] .tracking-streak{
  background:var(--theme-panel-2)!important;
  border-color:var(--theme-border-soft)!important;
  color:var(--theme-text)!important;
}
body[data-theme] .spiritual-tool-card p{color:var(--theme-muted)!important}
body[data-theme] .spiritual-tool-card strong{color:var(--theme-text)!important}
body[data-theme] .tool-symbol{
  background:var(--theme-soft)!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-accent-strong)!important;
}
body[data-theme] .clickable-tool-card:hover{
  background:var(--theme-hover)!important;
  border-color:var(--theme-accent)!important;
}

/* ---------- QUR'AN reader ---------- */
body[data-theme] .reader-sidebar-panel,
body[data-theme] .ayah-card{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
body[data-theme] .sidebar-meta-card,
body[data-theme] .reader-control-btn{
  background:var(--theme-panel-2)!important;
  border-color:var(--theme-border-soft)!important;
  color:var(--theme-text)!important;
}
body[data-theme] .sidebar-meta-label,
body[data-theme] .reader-control-label,
body[data-theme] .surah-english,
body[data-theme] .method-note{
  color:var(--theme-muted)!important;
}
body[data-theme] .sidebar-meta-card strong,
body[data-theme] .reader-control-btn strong{
  color:var(--theme-accent-strong)!important;
}
body[data-theme] .reader-control-btn:hover{
  background:var(--theme-hover)!important;
  border-color:var(--theme-accent)!important;
}
body[data-theme] .mushaf-arabic{
  color:var(--theme-quran)!important;
  text-shadow:none!important;
}
body[data-theme] .translation{
  color:var(--theme-text)!important;
}
body[data-theme] .reader-prev-btn,
body[data-theme] .reader-done-btn{
  background:var(--theme-panel-3)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .reader-next-btn{
  background:var(--theme-primary)!important;
  border-color:var(--theme-primary)!important;
}
body[data-theme] .reader-next-btn:hover{
  background:var(--theme-primary-hover)!important;
}
body[data-theme] .reader-next-reward-inside,
body[data-theme] .reader-next-btn .reader-action-arrow{
  color:var(--theme-primary-text)!important;
}
body[data-theme] .small-action{
  background:var(--theme-panel-2)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .small-action:hover{
  background:var(--theme-hover)!important;
}

/* ---------- ADHKAR: full high-contrast pass ---------- */
body[data-theme] .adhkar-hero{
  background:linear-gradient(145deg,var(--theme-panel),var(--theme-panel-2))!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
body[data-theme] .adhkar-hero p{color:var(--theme-muted)!important}
body[data-theme] .adhkar-mode-tabs{
  background:var(--theme-panel-3)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .adhkar-mode{
  color:var(--theme-muted)!important;
}
body[data-theme] .adhkar-mode:hover{
  color:var(--theme-text)!important;
  background:var(--theme-hover)!important;
}
body[data-theme] .adhkar-mode.active{
  background:var(--theme-primary)!important;
  color:var(--theme-primary-text)!important;
  box-shadow:none!important;
}
body[data-theme] .adhkar-progress-card,
body[data-theme] .dhikr-card,
body[data-theme] .tasbeeh-card{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border)!important;
  box-shadow:none!important;
}
body[data-theme] .dhikr-card.done{
  background:
    linear-gradient(135deg,var(--theme-soft),transparent 55%),
    var(--theme-panel)!important;
  border-color:var(--theme-accent)!important;
}
body[data-theme] .dhikr-title,
body[data-theme] .tasbeeh-head h2{
  color:var(--theme-text)!important;
}
body[data-theme] .dhikr-subtitle,
body[data-theme] .tasbeeh-head p,
body[data-theme] .tasbeeh-field span,
body[data-theme] .tasbeeh-meta,
body[data-theme] .source-note{
  color:var(--theme-muted)!important;
}
body[data-theme] .dhikr-arabic{
  background:var(--theme-panel-2)!important;
  color:var(--theme-quran)!important;
  border-color:var(--theme-border-soft)!important;
  text-shadow:none!important;
}
body[data-theme] .dhikr-translation{
  color:var(--theme-text)!important;
}
body[data-theme] .dhikr-count-control{
  background:var(--theme-soft)!important;
  color:var(--theme-accent-strong)!important;
  border-color:var(--theme-accent)!important;
}
body[data-theme] .dhikr-count-control.done{
  background:var(--theme-primary)!important;
  color:var(--theme-primary-text)!important;
  border-color:var(--theme-primary)!important;
}
body[data-theme] .source-grade{
  background:var(--theme-success-bg)!important;
  color:var(--theme-success)!important;
  border-color:var(--theme-success-border)!important;
}
body[data-theme] .source-link{
  border-color:var(--theme-accent)!important;
}
body[data-theme] .tasbeeh-phrase,
body[data-theme] .tasbeeh-meta strong{
  color:var(--theme-accent-strong)!important;
}
body[data-theme] .tasbeeh-button{
  background:linear-gradient(145deg,var(--theme-accent-strong),var(--theme-primary))!important;
  color:var(--theme-primary-text)!important;
  border-color:var(--theme-accent)!important;
  box-shadow:0 16px 38px color-mix(in srgb,var(--theme-accent) 18%,transparent)!important;
}
body[data-theme] .adhkar-progress-track,
body[data-theme] .tasbeeh-meter{
  background:color-mix(in srgb,var(--theme-muted) 18%,transparent)!important;
}
body[data-theme] .adhkar-progress-track>div,
body[data-theme] .tasbeeh-meter div{
  background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-strong))!important;
}

/* ---------- 99 NAMES: remove legacy black/brown blocks ---------- */
body[data-theme] .names-hero{
  background:linear-gradient(145deg,var(--theme-panel),var(--theme-panel-2))!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
body[data-theme] .names-hero p{color:var(--theme-muted)!important}
body[data-theme] .names-source-note{
  background:var(--theme-panel-2)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .names-source-note strong{color:var(--theme-accent-strong)!important}
body[data-theme] .names-source-note span{color:var(--theme-text)!important}
body[data-theme] .names-source-note small{color:var(--theme-muted)!important}
body[data-theme] .names-toolbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body[data-theme] .names-search span,
body[data-theme] .names-count{
  color:var(--theme-muted)!important;
}
body[data-theme] .names-search input{
  background:var(--theme-input)!important;
  color:var(--theme-input-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .name-card{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border-soft)!important;
  color:var(--theme-text)!important;
  box-shadow:none!important;
}
body[data-theme] .name-card:hover{
  background:var(--theme-hover)!important;
  border-color:var(--theme-accent)!important;
}
body[data-theme] .name-number{color:var(--theme-faint)!important}
body[data-theme] .name-arabic{
  color:var(--theme-accent-strong)!important;
  text-shadow:none!important;
}
body[data-theme] .name-translit{
  color:var(--theme-text)!important;
}
body[data-theme] .name-meaning{
  color:var(--theme-muted)!important;
}
body[data-theme] .names-footnote{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .names-footnote strong{color:var(--theme-accent-strong)!important}
body[data-theme] .names-footnote p{color:var(--theme-muted)!important}

/* ---------- PROFILE / SOCIAL ---------- */
body[data-theme] .profile-hero,
body[data-theme] .profile-edit-card,
body[data-theme] .social-profile-card,
body[data-theme] .friends-card{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border)!important;
  box-shadow:none!important;
}
body[data-theme] .profile-hero p,
body[data-theme] .profile-edit-card p,
body[data-theme] .profile-bio-display,
body[data-theme] .social-card-head p,
body[data-theme] .social-backend-note{
  color:var(--theme-muted)!important;
}
body[data-theme] .profile-handle,
body[data-theme] .profile-photo-action,
body[data-theme] .friend-code-row strong{
  color:var(--theme-accent-strong)!important;
}
body[data-theme] .profile-avatar-edit{
  color:var(--theme-text)!important;
}
body[data-theme] .profile-avatar-edit-ring{
  background:linear-gradient(145deg,var(--theme-accent),var(--theme-accent-strong))!important;
}
body[data-theme] .profile-avatar-mini{
  background-color:var(--theme-panel-2)!important;
  color:var(--theme-primary-text)!important;
}
body[data-theme] .friend-code-row,
body[data-theme] .friend-search-row,
body[data-theme] .friends-list>div{
  background:var(--theme-panel-2)!important;
  border-color:var(--theme-border-soft)!important;
  color:var(--theme-text)!important;
}
body[data-theme] .friend-search-row input{
  background:var(--theme-input)!important;
  color:var(--theme-input-text)!important;
}
body[data-theme] .friend-add-btn{
  background:var(--theme-primary)!important;
  color:var(--theme-primary-text)!important;
  border-color:var(--theme-primary)!important;
}
body[data-theme] .text-button{
  color:var(--theme-muted)!important;
}
body[data-theme] .text-button:hover{color:var(--theme-text)!important}

/* ---------- SETTINGS drawer ---------- */
body[data-theme] .drawer-overlay{
  background:rgba(0,0,0,.52)!important;
}
body[data-theme] .settings-drawer{
  background:var(--theme-panel)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
body[data-theme] .drawer-head,
body[data-theme] .drawer-foot{
  border-color:var(--theme-border-soft)!important;
}
body[data-theme] .drawer-foot{color:var(--theme-muted)!important}
body[data-theme] .setting-item{
  background:var(--theme-panel-2)!important;
  border-color:var(--theme-border-soft)!important;
}
body[data-theme] .setting-item p{color:var(--theme-muted)!important}
body[data-theme] .setting-item.setting-highlight{
  background:var(--theme-soft)!important;
  border-color:var(--theme-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 13%,transparent)!important;
}
body[data-theme] .switch-ui{
  background:color-mix(in srgb,var(--theme-muted) 28%,transparent)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .switch-ui:after{background:var(--theme-faint)!important}
body[data-theme] .switch input:checked+.switch-ui{
  background:var(--theme-primary)!important;
}
body[data-theme] .switch input:checked+.switch-ui:after{
  background:var(--theme-primary-text)!important;
}
body[data-theme] .danger-btn{
  background:var(--theme-danger-bg)!important;
  color:var(--theme-danger)!important;
  border-color:color-mix(in srgb,var(--theme-danger) 40%,transparent)!important;
}

/* ---------- SHARE sheet ---------- */
body[data-theme] .share-sheet-card{
  background:var(--theme-panel)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .share-sheet-description{color:var(--theme-muted)!important}
body[data-theme] .share-preview-notice{
  background:var(--theme-soft)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .share-action-card,
body[data-theme] .share-link-row{
  background:var(--theme-panel-2)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border-soft)!important;
}
body[data-theme] .share-action-card:hover{
  background:var(--theme-hover)!important;
  border-color:var(--theme-accent)!important;
}
body[data-theme] .share-action-card small{color:var(--theme-muted)!important}
body[data-theme] .share-action-icon,
body[data-theme] .share-link-row strong{
  color:var(--theme-accent-strong)!important;
}

/* ---------- Continue reading and universal primary actions ---------- */
body[data-theme] .primary-cta,
body[data-theme] .tab-continue-reading,
body[data-theme] .share-site-btn{
  background:var(--theme-primary)!important;
  color:var(--theme-primary-text)!important;
  border-color:var(--theme-primary)!important;
}
body[data-theme] .primary-cta:hover,
body[data-theme] .tab-continue-reading:hover,
body[data-theme] .share-site-btn:hover{
  background:var(--theme-primary-hover)!important;
}

/* ---------- Light-theme specific clarity ---------- */
body[data-theme="light"]{
  color-scheme:light;
}
body[data-theme="light"] .topbar{
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(16px)!important;
}
body[data-theme="light"] .bottom-nav{
  background:rgba(255,255,255,.97)!important;
}
body[data-theme="light"] .reader-prev-btn,
body[data-theme="light"] .reader-done-btn{
  background:#24211d!important;
  color:#fff!important;
  border-color:#24211d!important;
}
body[data-theme="light"] .reader-next-btn{
  background:#9d722f!important;
}
body[data-theme="light"] .reader-next-reward-inside,
body[data-theme="light"] .reader-next-btn .reader-action-arrow{
  color:#fff!important;
}
body[data-theme="light"] .dhikr-arabic{
  background:#f7f3eb!important;
  color:#11100e!important;
}
body[data-theme="light"] .name-arabic{
  color:#6b4814!important;
}
body[data-theme="light"] .name-translit,
body[data-theme="light"] .dhikr-translation{
  color:#201d19!important;
}
body[data-theme="light"] .source-grade{
  color:#155625!important;
}
body[data-theme="light"] .share-sheet-overlay,
body[data-theme="light"] .drawer-overlay{
  background:rgba(28,24,20,.42)!important;
}

/* ---------- Sunset should be warm, not muddy / random black ---------- */
body[data-theme="sunset"] .names-toolbar,
body[data-theme="sunset"] .adhkar-mode-tabs,
body[data-theme="sunset"] .reader-sidebar-panel{
  background:var(--theme-panel)!important;
}
body[data-theme="sunset"] .name-card,
body[data-theme="sunset"] .dhikr-card,
body[data-theme="sunset"] .tasbeeh-card{
  background:var(--theme-panel)!important;
}

/* ---------- Theme chooser itself stays legible in every theme ---------- */
body[data-theme] .theme-option{
  background:var(--theme-panel-3)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .theme-option:hover{
  background:var(--theme-hover)!important;
}
body[data-theme] .theme-option.active{
  border-color:var(--theme-accent)!important;
  box-shadow:inset 0 0 0 1px var(--theme-accent)!important;
}

/* ---------- Visible keyboard focus ---------- */
body[data-theme] button:focus-visible,
body[data-theme] a:focus-visible,
body[data-theme] input:focus-visible,
body[data-theme] select:focus-visible,
body[data-theme] textarea:focus-visible{
  outline:3px solid color-mix(in srgb,var(--theme-focus) 68%,transparent)!important;
  outline-offset:3px!important;
}

/* ---------- Responsive consistency ---------- */
@media(max-width:760px){
  body[data-theme] .names-hero,
  body[data-theme] .adhkar-hero,
  body[data-theme] .profile-hero{
    background:var(--theme-panel)!important;
  }
}


/* =========================================================
   V17 — VISUAL CLARITY / THEME INTEGRITY + READER CONTROLS
   ========================================================= */

/* One semantic color contract per theme. These extra variables are used by
   high-risk components (counter, source callouts, icon buttons). */
body[data-theme="kaaba"]{
  --theme-counter-bg:#ddb766;
  --theme-counter-text:#120d05;
  --theme-callout:#17140e;
  --theme-callout-text:#fffaf0;
}
body[data-theme="sunset"]{
  --theme-counter-bg:#ffb15f;
  --theme-counter-text:#261006;
  --theme-callout:#32180d;
  --theme-callout-text:#fff8ef;
}
body[data-theme="dark"]{
  --theme-counter-bg:#e4e8ee;
  --theme-counter-text:#0b0e12;
  --theme-callout:#1b2026;
  --theme-callout-text:#fbfcfd;
}
body[data-theme="light"]{
  --theme-counter-bg:#845d20;
  --theme-counter-text:#ffffff;
  --theme-callout:#f7f2e9;
  --theme-callout-text:#171512;
}

/* ---------- Home greeting: no invisible cream/yellow text in Light ---------- */
body[data-theme] .home-welcome h1,
body[data-theme] .greeting-prefix{
  color:var(--theme-text)!important;
  text-shadow:none!important;
}
body[data-theme] #homeGreetingName{
  color:var(--theme-accent-strong)!important;
  text-shadow:none!important;
}
body[data-theme="light"] #homeGreetingName{color:#704c15!important}

/* ---------- Settings drawer: the header/body/footer must change too ---------- */
body[data-theme] .settings-drawer,
body[data-theme] .drawer-head,
body[data-theme] .drawer-body,
body[data-theme] .drawer-foot{
  background:var(--theme-panel)!important;
  color:var(--theme-text)!important;
}
body[data-theme] .drawer-head{
  border-bottom-color:var(--theme-border-soft)!important;
}
body[data-theme] .drawer-foot{
  border-top-color:var(--theme-border-soft)!important;
  color:var(--theme-muted)!important;
}
body[data-theme] .drawer-head h3{color:var(--theme-text)!important}
body[data-theme] .drawer-head .icon-btn{
  background:var(--theme-panel-2)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}

/* ---------- Reader heading is deliberately LEFT aligned ---------- */
.reader-shell-v12 .card-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  width:100%!important;
}
.reader-shell-v12 .surah-heading{
  margin:0!important;
  width:100%!important;
  max-width:none!important;
  text-align:left!important;
  justify-self:start!important;
  align-self:flex-start!important;
}
.reader-shell-v12 .surah-heading h1,
.reader-shell-v12 .surah-english,
.reader-shell-v12 .surah-heading .eyebrow{
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* ---------- Five reader controls with Play/Pause as the center icon ---------- */
.reader-shell-v12 .reader-quick-controls-v17{
  display:grid!important;
  grid-template-columns:minmax(150px,1fr) minmax(120px,.85fr) 60px minmax(120px,.85fr) minmax(120px,.85fr)!important;
  gap:10px!important;
  align-items:center!important;
  width:min(100%,820px)!important;
  max-width:820px!important;
  margin:26px auto 0!important;
}
.reader-shell-v12 .reader-quick-controls-v17 .reader-control-btn{
  min-height:54px!important;
  height:54px!important;
  padding:0 14px!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:row!important;
  justify-content:center!important;
  align-items:center!important;
  gap:7px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  background:var(--theme-panel-2)!important;
  color:var(--theme-text)!important;
  border:1px solid var(--theme-border-soft)!important;
  box-shadow:none!important;
}
.reader-shell-v12 .reader-quick-controls-v17 .reader-control-btn:hover{
  background:var(--theme-hover)!important;
  border-color:var(--theme-accent)!important;
  transform:translateY(-1px)!important;
}
.reader-shell-v12 .reader-quick-controls-v17 .reader-control-label{
  color:var(--theme-muted)!important;
  font-size:11px!important;
  font-weight:650!important;
}
.reader-shell-v12 .reader-quick-controls-v17 .reader-control-btn strong{
  color:var(--theme-accent-strong)!important;
  font-size:13px!important;
  font-weight:800!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.reader-audio-icon-btn{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid var(--theme-accent)!important;
  background:var(--theme-primary)!important;
  color:var(--theme-primary-text)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--theme-accent) 18%,transparent)!important;
  transition:transform .14s ease,background .14s ease,border-color .14s ease!important;
}
.reader-audio-icon-btn:hover{
  background:var(--theme-primary-hover)!important;
  transform:translateY(-1px) scale(1.02)!important;
}
.reader-audio-icon-btn:active{transform:scale(.96)!important}
.reader-audio-glyph{
  font-size:20px!important;
  line-height:1!important;
  color:inherit!important;
  transform:translateX(1px);
}

/* ---------- Tasbeeh: count AND helper text always use the same contrast ---------- */
body[data-theme] .tasbeeh-card{
  background:var(--theme-panel)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .tasbeeh-head h2{color:var(--theme-text)!important}
body[data-theme] .tasbeeh-head p,
body[data-theme] .tasbeeh-field>span{color:var(--theme-muted)!important}
body[data-theme] .tasbeeh-phrase{color:var(--theme-accent-strong)!important}
body[data-theme] .tasbeeh-button{
  background:var(--theme-counter-bg)!important;
  color:var(--theme-counter-text)!important;
  border:2px solid color-mix(in srgb,var(--theme-counter-text) 18%,var(--theme-counter-bg))!important;
  box-shadow:0 14px 34px color-mix(in srgb,var(--theme-counter-bg) 22%,transparent)!important;
}
body[data-theme] .tasbeeh-button span,
body[data-theme] .tasbeeh-button small{
  color:var(--theme-counter-text)!important;
  opacity:1!important;
  text-shadow:none!important;
}
body[data-theme] .tasbeeh-button small{
  font-weight:800!important;
  letter-spacing:.10em!important;
}
body[data-theme] .tasbeeh-meta,
body[data-theme] .tasbeeh-meta span{color:var(--theme-muted)!important}
body[data-theme] .tasbeeh-meta strong{color:var(--theme-text)!important}

/* ---------- Adhkar: every text layer has an explicit readable color ---------- */
body[data-theme] .adhkar-wrap,
body[data-theme] .adhkar-list{
  color:var(--theme-text)!important;
}
body[data-theme] .adhkar-hero,
body[data-theme] .adhkar-progress-card,
body[data-theme] .dhikr-card{
  background:var(--theme-panel)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .adhkar-hero h1,
body[data-theme] .dhikr-title,
body[data-theme] .dhikr-translation{
  color:var(--theme-text)!important;
}
body[data-theme] .adhkar-hero p,
body[data-theme] .dhikr-subtitle,
body[data-theme] .source-note{
  color:var(--theme-muted)!important;
}
body[data-theme] .dhikr-arabic{
  background:var(--theme-panel-2)!important;
  color:var(--theme-quran)!important;
  border-color:var(--theme-border-soft)!important;
}
body[data-theme="light"] .dhikr-card,
body[data-theme="light"] .tasbeeh-card,
body[data-theme="light"] .adhkar-progress-card{
  background:#ffffff!important;
}
body[data-theme="light"] .dhikr-arabic{
  background:#f5f1e9!important;
  color:#14110d!important;
}

/* ---------- 99 Names: zero legacy black strip / random brown surfaces ---------- */
body[data-theme] .names-wrap{
  color:var(--theme-text)!important;
}
body[data-theme] .names-hero,
body[data-theme] .names-source-note,
body[data-theme] .name-card,
body[data-theme] .names-footnote{
  background:var(--theme-panel)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .names-source-note{
  background:var(--theme-callout)!important;
  color:var(--theme-callout-text)!important;
}
body[data-theme] .names-source-note span{color:var(--theme-callout-text)!important}
body[data-theme] .names-source-note small{color:var(--theme-muted)!important}
body[data-theme] .names-toolbar{
  background:transparent!important;
  color:var(--theme-text)!important;
  border:0!important;
}
body[data-theme] .names-search input{
  background:var(--theme-input)!important;
  color:var(--theme-input-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .name-number{color:var(--theme-faint)!important}
body[data-theme] .name-arabic{
  color:var(--theme-accent-strong)!important;
  text-shadow:none!important;
}
body[data-theme] .name-translit{color:var(--theme-text)!important}
body[data-theme] .name-meaning{color:var(--theme-muted)!important}
body[data-theme="light"] .names-hero,
body[data-theme="light"] .names-source-note,
body[data-theme="light"] .name-card,
body[data-theme="light"] .names-footnote{
  background:#ffffff!important;
}
body[data-theme="light"] .names-source-note{background:#f5f1e9!important}
body[data-theme="light"] .name-arabic{color:#664412!important}
body[data-theme="light"] .name-translit{color:#171512!important}
body[data-theme="light"] .name-meaning{color:#514b43!important}

/* ---------- Profile and share controls also obey the palette ---------- */
body[data-theme] .profile-hero,
body[data-theme] .profile-edit-card,
body[data-theme] .social-profile-card,
body[data-theme] .friends-card{
  background:var(--theme-panel)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .share-progress-btn{
  background:var(--theme-panel-2)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[data-theme] .share-progress-btn .share-btn-icon{
  background:var(--theme-panel-3)!important;
  color:var(--theme-accent-strong)!important;
  border-color:var(--theme-border-soft)!important;
}
body[data-theme] .share-site-btn .share-btn-icon{
  background:color-mix(in srgb,var(--theme-primary-text) 88%,transparent)!important;
  color:var(--theme-primary)!important;
  border-color:transparent!important;
}

/* ---------- Light theme: explicit dark text on every pale surface ---------- */
body[data-theme="light"] .home-welcome p,
body[data-theme="light"] .tracking-sub,
body[data-theme="light"] .spiritual-tool-card p,
body[data-theme="light"] .profile-hero p,
body[data-theme="light"] .profile-edit-card p,
body[data-theme="light"] .adhkar-hero p,
body[data-theme="light"] .names-hero p,
body[data-theme="light"] .setting-item p{
  color:#514b43!important;
}
body[data-theme="light"] .tracking-hub-card,
body[data-theme="light"] .habit-week-card,
body[data-theme="light"] .continue-card,
body[data-theme="light"] .spiritual-tools-section,
body[data-theme="light"] .spiritual-tool-card,
body[data-theme="light"] .profile-hero,
body[data-theme="light"] .profile-edit-card,
body[data-theme="light"] .friends-card,
body[data-theme="light"] .settings-drawer,
body[data-theme="light"] .setting-item{
  background:#ffffff!important;
}
body[data-theme="light"] .reader-control-btn{
  background:#f3efe7!important;
  color:#171512!important;
}
body[data-theme="light"] .reader-control-label{color:#5d574f!important}
body[data-theme="light"] .reader-control-btn strong{color:#684714!important}

/* ---------- Sunset: eliminate leftover pitch-black component backgrounds ---------- */
body[data-theme="sunset"] .settings-drawer,
body[data-theme="sunset"] .drawer-head,
body[data-theme="sunset"] .drawer-body,
body[data-theme="sunset"] .drawer-foot,
body[data-theme="sunset"] .adhkar-hero,
body[data-theme="sunset"] .adhkar-progress-card,
body[data-theme="sunset"] .dhikr-card,
body[data-theme="sunset"] .tasbeeh-card,
body[data-theme="sunset"] .names-hero,
body[data-theme="sunset"] .names-source-note,
body[data-theme="sunset"] .name-card,
body[data-theme="sunset"] .names-footnote,
body[data-theme="sunset"] .profile-hero,
body[data-theme="sunset"] .profile-edit-card,
body[data-theme="sunset"] .friends-card{
  border-color:var(--theme-border)!important;
}

/* ---------- Responsive reader controls ---------- */
@media(max-width:900px){
  .reader-shell-v12 .reader-quick-controls-v17{
    grid-template-columns:1fr 1fr 58px 1fr 1fr!important;
  }
}
@media(max-width:700px){
  .reader-shell-v12 .reader-quick-controls-v17{
    grid-template-columns:1fr 1fr 58px!important;
  }
  .reader-shell-v12 .reader-quick-controls-v17 #autoplayQuickBtn,
  .reader-shell-v12 .reader-quick-controls-v17 #textSizeQuickBtn{
    grid-column:auto!important;
  }
}
@media(max-width:520px){
  .reader-shell-v12 .reader-quick-controls-v17{
    grid-template-columns:1fr 54px 1fr!important;
  }
  .reader-shell-v12 .reader-quick-controls-v17 #reciterQuickBtn{grid-column:1/-1!important}
  .reader-shell-v12 .reader-quick-controls-v17 #speedQuickBtn{grid-column:1!important}
  .reader-shell-v12 .reader-quick-controls-v17 .reader-audio-icon-btn{grid-column:2!important}
  .reader-shell-v12 .reader-quick-controls-v17 #autoplayQuickBtn{grid-column:3!important}
  .reader-shell-v12 .reader-quick-controls-v17 #textSizeQuickBtn{grid-column:1/-1!important}
}


/* =========================================================
   V18 — reliable audio controls + Support + Feedback
   ========================================================= */

/* Topbar global utility buttons */
.v5-topbar{
  grid-template-columns:1fr auto auto!important;
  gap:16px!important;
}
.site-utility-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.site-utility-btn{
  min-height:42px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid var(--theme-border,var(--line));
  background:var(--theme-panel-2,#151412);
  color:var(--theme-text,#fff);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.site-utility-btn:hover{
  background:var(--theme-hover,rgba(255,255,255,.05));
  border-color:var(--theme-accent,#d5b46b);
}
.site-utility-icon{
  display:grid;
  place-items:center;
  min-width:20px;
  font-size:15px;
  color:var(--theme-accent-strong,#f1d58d);
}
.support-utility-btn{
  background:var(--theme-soft,rgba(213,180,107,.10));
}
.feedback-icon{font-size:13px}

@media(max-width:1050px){
  .v5-topbar{grid-template-columns:1fr auto!important}
  .site-utility-actions{
    grid-column:1/-1;
    grid-row:2;
    justify-self:center;
  }
  .v5-topbar .top-stats{
    grid-column:2!important;
    grid-row:1!important;
  }
}
@media(max-width:820px){
  .v5-topbar{grid-template-columns:1fr!important}
  .v5-topbar .top-stats{
    grid-column:1!important;
    grid-row:2!important;
  }
  .site-utility-actions{
    grid-column:1!important;
    grid-row:3!important;
    width:100%;
  }
  .site-utility-btn{flex:1}
}

/* Support + Feedback modal system */
body.utility-modal-open{overflow:hidden}
.utility-modal{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  place-items:center;
  padding:24px;
}
.utility-modal.open{display:grid}
.utility-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(6px);
}
.utility-modal-card{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  max-height:min(760px,calc(100vh - 40px));
  overflow:auto;
  border:1px solid var(--theme-border,var(--line));
  border-radius:26px;
  padding:24px;
  background:var(--theme-panel,#111);
  color:var(--theme-text,#fff);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
}
.utility-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.utility-modal-head h3{
  margin:5px 0 0;
  color:var(--theme-text,#fff)!important;
  font-size:26px;
  letter-spacing:-.025em;
}
.utility-modal-copy{
  margin:16px 0;
  color:var(--theme-muted,#bbb)!important;
  font-size:14px;
  line-height:1.65;
}
.support-heart{
  width:74px;
  height:74px;
  margin:24px auto 10px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:linear-gradient(145deg,var(--theme-accent-strong,#f1d58d),var(--theme-primary,#d5af63));
  color:var(--theme-primary-text,#0b0907);
  font-size:34px;
  box-shadow:0 16px 38px color-mix(in srgb,var(--theme-accent) 22%,transparent);
}
.support-points{
  display:grid;
  gap:8px;
  margin:18px 0;
  padding:16px;
  border-radius:17px;
  background:var(--theme-panel-2,#171512);
  border:1px solid var(--theme-border-soft,var(--line));
  color:var(--theme-text,#fff);
  font-size:12px;
}
.support-payment-btn,
.feedback-submit-btn{
  min-height:54px;
  width:100%;
  border-radius:16px;
  border:1px solid var(--theme-primary,#d5af63);
  background:var(--theme-primary,#d5af63);
  color:var(--theme-primary-text,#0b0907)!important;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 18px;
  font-weight:900;
  font-size:15px;
}
.support-payment-btn:hover,
.feedback-submit-btn:hover{
  background:var(--theme-primary-hover,var(--theme-primary));
}
.support-disclaimer,
.feedback-privacy{
  display:block;
  margin-top:11px;
  text-align:center;
  color:var(--theme-muted,#aaa)!important;
  font-size:10px;
  line-height:1.5;
}
.operator-setup-notice{
  margin:14px 0;
  padding:13px 14px;
  border-radius:14px;
  background:var(--theme-soft,rgba(213,180,107,.1));
  color:var(--theme-text,#fff);
  border:1px dashed var(--theme-accent,#d5b46b);
  font-size:12px;
  line-height:1.5;
}

.feedback-form{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.feedback-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.feedback-field{
  display:grid;
  gap:7px;
}
.feedback-field>span{
  color:var(--theme-muted,#aaa);
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
}
.feedback-field input,
.feedback-field select,
.feedback-field textarea{
  width:100%;
  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:14px!important;
  background:var(--theme-input,#111)!important;
  color:var(--theme-input-text,#fff)!important;
  padding:12px 13px!important;
  font:inherit;
  resize:vertical;
}
.feedback-field textarea{min-height:140px}
.feedback-field small{
  justify-self:end;
  color:var(--theme-muted,#aaa)!important;
  font-size:10px;
}
.feedback-status{
  min-height:18px;
  color:var(--theme-accent-strong,#f1d58d);
  font-size:12px;
  font-weight:700;
}
.feedback-submit-btn{
  cursor:pointer;
}
.feedback-submit-btn:disabled{
  opacity:.6;
  cursor:wait;
}

body[data-theme="light"] .utility-modal-overlay{
  background:rgba(33,27,20,.42);
}
body[data-theme="light"] .utility-modal-card{
  background:#fff!important;
}
body[data-theme="light"] .support-points{
  background:#f5f1e9!important;
}
body[data-theme="light"] .site-utility-btn{
  background:#fff!important;
}

/* Audio icon visibly communicates play/pause state */
.reader-audio-icon-btn{
  position:relative;
}
.reader-audio-icon-btn[aria-label^="Pause"]{
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--theme-accent) 12%,transparent),
    0 10px 26px color-mix(in srgb,var(--theme-accent) 24%,transparent)!important;
}

/* Better native speed control readability */
#speedSelect option,
#reciterSelect option{
  color:#111;
  background:#fff;
}

@media(max-width:620px){
  .utility-modal{padding:12px}
  .utility-modal-card{padding:19px;border-radius:21px}
  .feedback-row{grid-template-columns:1fr}
}


/* =========================================================
   V19 — Profile social card cleanup
   ========================================================= */
body[data-theme] .social-profile-card{
  background:var(--theme-panel)!important;
  border-color:var(--theme-border)!important;
  overflow:hidden;
}
body[data-theme] .friend-code-row,
body[data-theme] .friend-search-row{
  background:transparent!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  margin:0!important;
}
body[data-theme] .friend-code-row{
  padding:20px 0!important;
  border-top:1px solid var(--theme-border-soft)!important;
  border-bottom:1px solid var(--theme-border-soft)!important;
}
body[data-theme] .friend-search-row{
  padding:20px 0!important;
  border:0!important;
}
body[data-theme] .friend-code-row>div{
  background:transparent!important;
}
body[data-theme] .friend-search-row label{
  background:transparent!important;
}
body[data-theme] .friend-search-row input{
  background:var(--theme-input)!important;
  color:var(--theme-input-text)!important;
  border:1px solid var(--theme-border)!important;
  box-shadow:none!important;
}
body[data-theme] .friends-list{
  background:transparent!important;
}
body[data-theme] .friends-list>div,
body[data-theme] .friend-row{
  background:var(--theme-panel-2)!important;
  border-color:var(--theme-border-soft)!important;
}
body[data-theme] .empty-friends{
  background:transparent!important;
  border:1px dashed var(--theme-border)!important;
  color:var(--theme-muted)!important;
}
body[data-theme] .social-backend-note{
  padding-top:14px;
  margin-top:16px!important;
  border-top:1px solid var(--theme-border-soft);
  background:transparent!important;
  color:var(--theme-muted)!important;
}
body[data-theme] .social-backend-note strong{
  color:var(--theme-text)!important;
}
body[data-theme="light"] .friend-code-row,
body[data-theme="light"] .friend-search-row{
  background:#fff!important;
}
body[data-theme="light"] .friends-list>div,
body[data-theme="light"] .friend-row{
  background:#f7f3eb!important;
}

/* Audio reliability note in Settings-style copy, if surfaced later. */
.audio-reliability-note{
  color:var(--theme-muted);
  font-size:10px;
  line-height:1.45;
}


/* V20 — Ko-fi support integration */
.support-modal-card .support-heart{
  font-family:Inter,system-ui,sans-serif;
}
.support-payment-btn{
  text-decoration:none!important;
}
.support-payment-btn::before{
  content:"☕";
  margin-right:8px;
}


/* V48 — compact local Reader session clock in the top stats capsule */
.top-stats .session-pill{min-width:138px}
.top-stats .session-clock-icon{font-size:17px;line-height:1}
@media(max-width:600px){.top-stats .session-pill{min-width:132px}}

/* V49 final dashboard cleanup: the weekly consistency tracker and compact
   top metrics remain; the redundant all-at-a-glance stats panel is retired. */
.dashboard-view .tracking-hub-card {
  display: none !important;
}

/* V50 dashboard copy cleanup: keep the continue destination crisp in every theme. */
.continue-simple-card .continue-location{margin-top:16px}
.continue-simple-card .continue-location strong{
  color:var(--theme-text,var(--text))!important;
  opacity:1!important;
  font-size:20px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:-.015em;
}


/* V51 — compact resume card + signed-in synced Hasanaat tracker */
.dashboard-view .v15-continue-card{
  min-height:0;
  padding:22px 24px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:30px;
  align-items:center;
}
.dashboard-view .v15-continue-card .continue-reader-block{
  min-width:0;
  position:relative;
  z-index:1;
}
.dashboard-view .v15-continue-card .continue-copy{
  min-height:0;
}
.dashboard-view .v15-continue-card .continue-position-kicker{
  display:block;
  color:var(--theme-text,var(--text))!important;
  opacity:1!important;
  font-size:18px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:none;
  overflow-wrap:anywhere;
}
.dashboard-view .v15-continue-card .primary-cta{
  margin-top:18px;
}
.continue-hasanaat-tracker{
  display:none;
  min-width:0;
  position:relative;
  z-index:1;
  padding-left:28px;
  border-left:1px solid var(--theme-border,var(--line));
}
body[data-auth-state="signed-in"] .continue-hasanaat-tracker{
  display:block;
}
.continue-tracker-title{
  display:block;
  margin-bottom:12px;
  color:var(--theme-accent-strong,var(--gold-3));
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
}
.continue-tracker-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.continue-tracker-stat{
  min-width:0;
  padding:13px 12px;
  border:1px solid var(--theme-border-soft,var(--line));
  border-radius:15px;
  background:var(--theme-soft,rgba(255,255,255,.025));
}
.continue-tracker-stat span{
  display:block;
  color:var(--theme-muted,var(--muted));
  font-size:9px;
  line-height:1.1;
  font-weight:850;
  letter-spacing:.08em;
  white-space:nowrap;
}
.continue-tracker-stat strong{
  display:block;
  margin-top:7px;
  color:var(--theme-text,var(--text));
  font-size:20px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
@media(max-width:980px){
  .dashboard-view .v15-continue-card{
    grid-template-columns:1fr;
    gap:20px;
  }
  .continue-hasanaat-tracker{
    padding-left:0;
    padding-top:20px;
    border-left:0;
    border-top:1px solid var(--theme-border,var(--line));
  }
}
@media(max-width:560px){
  .dashboard-view .v15-continue-card{padding:18px}
  .dashboard-view .v15-continue-card .continue-position-kicker{font-size:16px}
  .continue-tracker-grid{gap:7px}
  .continue-tracker-stat{padding:11px 9px}
  .continue-tracker-stat strong{font-size:17px}
}