/* ============================================================
   Salman — My Daily Companion · design system
   Calm dark emerald + gold. Light "day" theme via body.light.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#0a0f1c; --bg2:#0e1626; --card:#141d33; --card2:#1a2540;
  --gold:#e8c15a; --gold2:#f5d67b; --gold-dim:rgba(232,193,90,.14);
  --em:#10b981; --em2:#0d9668; --em-dim:rgba(16,185,129,.12);
  --txt:#f1f5f9; --mut:#8b98b8; --line:rgba(255,255,255,.07);
  --danger:#f87171; --radius:18px;
  --head-h:70px;            /* fixed header height (content) */
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-ar:'Amiri','Traditional Arabic',serif;
}
body.light{
  --bg:#f4f1e8; --bg2:#eae5d5; --card:#ffffff; --card2:#f5f2e8;
  --txt:#202a3a; --mut:#6d768c; --line:rgba(32,42,58,.1);
  --gold2:#9a6f0a; --gold-dim:rgba(154,111,10,.1);
}

/* ---------- base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  margin:0; padding:0;
  min-height:100%; min-height:-webkit-fill-available;
  font-family:var(--font-ui); color:var(--txt);
  background:radial-gradient(1200px 600px at 50% -10%, #16223d 0%, var(--bg) 55%) fixed, var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-top:82px; padding-top:calc(var(--head-h) + env(safe-area-inset-top));
  padding-bottom:24px; padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
body.light{background:var(--bg);}
.ar{font-family:var(--font-ar); direction:rtl; text-align:center;}
img{max-width:100%;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---------- header (fixed, solid — no backdrop-filter) ---------- */
.apphead{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
}
.homebtn{background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;border-radius:14px;}
.homebtn img{width:46px;height:46px;border-radius:14px;display:block;box-shadow:0 2px 10px rgba(0,0,0,.25);}
body.light .homebtn img{box-shadow:0 2px 10px rgba(32,42,58,.18);}
.hi{font-size:14px;color:var(--mut);}
.hi b{color:var(--gold2);font-weight:700;}
.hdate{font-size:12px;color:var(--mut);margin-top:2px;}
.themebtn{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  width:42px; height:42px; font-size:19px; cursor:pointer; flex-shrink:0; color:var(--txt);
}

/* ---------- layout ---------- */
main{display:block;}
.screen{display:none; padding:18px 16px 8px; max-width:560px; margin:0 auto;}
.screen.active{display:block; animation:fadein .22s ease;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- cards & type ---------- */
.card{
  background:linear-gradient(160deg,var(--card),var(--card2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:12px; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
body.light .card{box-shadow:0 4px 16px rgba(32,42,58,.08);}
.card.gold{border-color:rgba(232,193,90,.35);}
.row{display:flex;align-items:center;gap:10px;}
.grow{flex:1;min-width:0;}
.mut{color:var(--mut);} .small{font-size:12.5px;}
.sec{font-size:15px;color:var(--gold);margin:6px 2px 12px;font-weight:700;}
.backbtn{background:none;border:none;color:var(--gold2);font-size:15px;font-weight:700;cursor:pointer;padding:2px 2px 10px;}

/* ---------- home: hero + tiles ---------- */
.khero{display:flex;justify-content:center;margin:4px 0 12px;}
.khero img{width:104px;height:104px;border-radius:26px;box-shadow:0 6px 24px rgba(0,0,0,.28);}
body.light .khero img{box-shadow:0 6px 24px rgba(32,42,58,.16);}
.homesub{margin:2px 2px 12px;}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile{
  border:none;border-radius:20px;padding:20px 16px;min-height:122px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:3px;
  cursor:pointer;color:#fff;text-align:left;position:relative;overflow:hidden;
}
.tile.wide{grid-column:span 2;min-height:158px;}
.tile .t-ic{font-size:30px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));}
.tile.wide .t-ic{font-size:38px;}
.tile .t-label{font-size:16px;font-weight:700;}
.tile .t-sub{font-size:12.5px;opacity:.9;font-variant-numeric:tabular-nums;}
.tile::after{content:'';position:absolute;inset:0;background:radial-gradient(320px 170px at 85% -10%,rgba(255,255,255,.16),transparent 70%);pointer-events:none;}
.tile:active{transform:scale(.97);}
.t-pray{background:linear-gradient(135deg,#065f46,#0d9488);}
.t-zikr{background:linear-gradient(135deg,#5b21b6,#8b5cf6);}
.t-quran{background:linear-gradient(135deg,#92400e,#d97706);}
.t-duas{background:linear-gradient(135deg,#9f1239,#fb7185);}
.t-gym{background:linear-gradient(135deg,#9a3412,#fb923c);}
.t-todo{background:linear-gradient(135deg,#115e59,#2dd4bf);}

/* ---------- prayers ---------- */
.hero{
  background:linear-gradient(150deg,#123b31,#0c5c44 60%,#0a7a54);
  border:1px solid rgba(16,185,129,.4); border-radius:22px;
  padding:22px 18px; text-align:center; margin-bottom:14px; position:relative; overflow:hidden;
}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(400px 200px at 50% -40px,rgba(245,214,123,.25),transparent 70%);pointer-events:none;}
.hero .lbl{font-size:12px;letter-spacing:2px;color:#bff0dd;text-transform:uppercase;position:relative;}
.hero .big{font-size:34px;font-weight:800;color:#fff;margin:6px 0 2px;font-variant-numeric:tabular-nums;position:relative;}
.hero .sub{font-size:15px;color:#d9f7ea;position:relative;}
.ptime{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);}
.ptime:last-child{border:none;}
.ptime .nm{font-weight:600;font-size:15px;}
.ptime .tm{color:var(--mut);font-variant-numeric:tabular-nums;}
.ptime.next .nm{color:var(--gold2);}
.ptime.next .tm{color:var(--gold2);font-weight:700;}
.ptime.next{background:var(--gold-dim);border-radius:12px;padding-left:12px;padding-right:12px;}

/* ---------- checkboxes ---------- */
.cb{
  width:24px;height:24px;border-radius:8px;border:2px solid var(--mut);flex-shrink:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:transparent;font-size:14px;font-weight:800;background:transparent;padding:0;
}
.cb.big{width:30px;height:30px;border-radius:9px;font-size:16px;}
.cb.on{background:var(--em);border-color:var(--em);color:#fff;}
.ptime .cb{width:24px;height:24px;}
.ptime.done .cb{background:var(--em);border-color:var(--em);color:#fff;}
.ptime.done .nm{color:var(--mut);}

/* ---------- lists: zikr / tasks ---------- */
.task{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);}
.task:last-child{border:none;}
.task.done .tt{text-decoration:line-through;color:var(--mut);}
.task .x{color:var(--mut);background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;flex-shrink:0;}
.z-ar{font-size:19px;text-align:left;color:var(--txt);}
.z-tr{font-size:12.5px;color:var(--mut);margin-top:2px;}

/* ---------- progress ---------- */
.prog{height:10px;background:rgba(127,140,160,.18);border-radius:99px;overflow:hidden;margin:10px 0;}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--em),var(--gold2));border-radius:99px;transition:width .3s;}

/* ---------- quran ---------- */
.qnum{
  width:30px;height:30px;border-radius:50%;background:var(--gold-dim);color:var(--gold2);
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.qtext{font-size:21px;line-height:2.2;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);white-space:pre-line;}
.qdone .qtext{opacity:.5;}
.q-t{font-weight:700;font-size:15px;}
.q-v{font-size:12.5px;color:var(--mut);}

/* ---------- duas ---------- */
.dua{cursor:pointer;}
.dua-head{display:flex;align-items:center;gap:12px;}
.dua-t{font-weight:700;font-size:15px;}
.dua-chev{color:var(--mut);background:none;border:none;font-size:20px;cursor:pointer;padding:0 4px;flex-shrink:0;transition:transform .2s;}
.dua.open .dua-chev{transform:rotate(90deg);}
.d-ar{font-size:22px;line-height:2;color:var(--gold2);margin-top:10px;}
.d-body{display:none;margin-top:10px;border-top:1px solid var(--line);padding-top:10px;}
.dua.open .d-body{display:block;}
.d-tr{font-size:13.5px;color:var(--gold2);}
.d-en{font-size:13px;color:var(--mut);margin-top:6px;}
.d-src{font-size:11.5px;color:var(--mut);margin-top:8px;opacity:.75;}

/* ---------- gym ---------- */
.gymbtn{
  width:100%;border:none;border-radius:14px;padding:16px 18px;font-size:16px;font-weight:700;cursor:pointer;
  background:linear-gradient(160deg,var(--em),var(--em2));color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.gymbtn.done{background:var(--card);border:1px solid var(--em);color:var(--em);}
.gymbtn:active{transform:scale(.98);}

/* ---------- todo ---------- */
input,textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit;
}
input:focus,textarea:focus{outline:none;border-color:var(--gold);}
textarea{resize:vertical;min-height:76px;-webkit-overflow-scrolling:touch;}
.btn{
  background:linear-gradient(160deg,var(--em),var(--em2));color:#fff;border:none;border-radius:14px;
  padding:13px 18px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.3px;
}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt);}
.btn:active{transform:scale(.98);}
.btnrow{display:flex;gap:10px;}
.btnrow .btn{flex:1;}

/* ---------- wide screens ---------- */
@media (min-width:700px){
  .screen{max-width:640px;}
  .khero img{width:120px;height:120px;}
}
@media (min-width:1200px){
  .screen{max-width:680px;}
}

/* stat cards + history rows */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.stat3 .card{margin:0;text-align:center;padding:14px 6px;}
.stat3 .n{font-size:24px;font-weight:800;color:var(--gold2);font-variant-numeric:tabular-nums;}
.stat3 .l{font-size:12px;color:var(--mut);margin-top:4px;}
.xbtn{background:none;border:none;color:var(--mut);font-size:22px;cursor:pointer;padding:2px 10px;line-height:1;border-radius:8px;}
.xbtn:hover{color:var(--danger);}
#qJuz{max-width:110px;}
#qGoal{max-width:110px;text-align:center;margin:0;}