/* MuslimOs — Application styles */
:root{
  --bg0:#04050A;--bg1:#07080F;--bg2:#0B0D18;--bg3:#10121F;--bg4:#161828;--bg5:#1D2035;
  --fg0:#EEE9DC;--fg1:#BDB59A;--fg2:#7A7260;--fg3:#4A4438;--fg4:#282420;
  --gold:#C49A0A;--gold2:#E8C840;--gold3:#F2DA80;
  --gold-bg:rgba(196,154,10,.08);--gold-border:rgba(196,154,10,.16);
  --gold-grad:linear-gradient(135deg,#C49A0A,#E8C840);
  --gold-grad2:linear-gradient(135deg,#A07808,#DDB830);
  --blue:#3D6AB8;--blue2:#6E9EE8;--blue-bg:rgba(61,106,184,.1);--blue-border:rgba(61,106,184,.2);
  --green:#28B87A;--green-bg:rgba(40,184,122,.1);--green-border:rgba(40,184,122,.2);
  --red:#CC4444;--red-bg:rgba(204,68,68,.1);
  --orange:#CC8030;--orange-bg:rgba(204,128,48,.1);--orange-border:rgba(204,128,48,.2);
  --border:rgba(196,154,10,.07);--border2:rgba(255,255,255,.06);--border3:rgba(255,255,255,.03);
  --rail:68px;--th:52px;--dh:60px;--r:12px;--r2:8px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-ar:'Amiri',serif;
}

[data-theme="day"]{
  --bg0:#F5F5F0;--bg1:#EEEEE8;--bg2:#E5E5DE;--bg3:#DCDCD4;--bg4:#D0D0C8;
  --fg0:#1A1A14;--fg1:#3A3A30;--fg2:#6A6A60;--fg3:#9A9A90;--fg4:#B8B8B0;
  --border:rgba(0,0,0,.06);--border2:rgba(0,0,0,.08);--border3:rgba(0,0,0,.04);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg0);color:var(--fg0);font-family:var(--font);line-height:1.6;
  overflow:hidden;height:100dvh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,textarea,select{font-family:var(--font)}
::selection{background:rgba(196,154,10,.2);color:var(--fg0)}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(196,154,10,.2);border-radius:2px}

#sky{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4}
#_loadScreen{
  position:fixed;inset:0;z-index:10000;background:var(--bg0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
#_loadBar{width:0%;max-width:180px;height:2px;background:var(--gold-grad2);transition:width .4s ease;border-radius:1px}

/* Toast */
.toast-el{
  position:fixed;left:0;right:0;bottom:80px;z-index:9999;
  display:flex;justify-content:center;pointer-events:none;padding:0 16px;
}
.toast{
  background:rgba(11,13,24,.97);border:1px solid var(--gold-border);
  color:var(--fg0);border-radius:20px;padding:10px 18px;
  font-size:.825rem;font-weight:600;white-space:nowrap;
  animation:floatUp .3s ease;box-shadow:0 8px 32px rgba(0,0,0,.4);
}

/* Sidebar desktop */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:200;
  background:var(--bg1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .28s cubic-bezier(.4,0,.2,1);
}
.sidebar:hover{width:240px;box-shadow:4px 0 32px rgba(0,0,0,.5)}
.sb-brand{
  display:flex;align-items:center;padding:16px 0 14px;
  border-bottom:1px solid var(--border);flex-shrink:0;min-height:60px;overflow:hidden;
}
.sb-logo,.sb-logo-fallback{
  width:var(--rail);height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-logo img{max-height:28px;max-width:40px}
.sb-logo-fallback{
  font-size:1.1rem;width:32px;height:32px;border-radius:9px;margin:auto;
  background:var(--gold-grad2);border:1.5px solid var(--gold-border);
}
.sb-brand-text{opacity:0;transition:opacity .15s;white-space:nowrap;overflow:hidden}
.sidebar:hover .sb-brand-text{opacity:1}
.sb-name{
  font-size:.95rem;font-weight:800;letter-spacing:-.3px;
  background:var(--gold-grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sb-tagline{font-size:.6rem;color:var(--fg3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-top:1px}
.sb-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;padding:6px 0 12px;scrollbar-width:none;
}
.sb-scroll::-webkit-scrollbar{display:none}
.sb-sec{
  padding:10px var(--rail) 3px;font-size:.55rem;font-weight:800;color:var(--fg3);
  text-transform:uppercase;letter-spacing:1.5px;opacity:0;transition:opacity .15s;white-space:nowrap;
}
.sidebar:hover .sb-sec{opacity:1}
.sb-item{
  display:flex;align-items:center;height:40px;padding:0;cursor:pointer;
  position:relative;overflow:hidden;white-space:nowrap;background:var(--bg1);transition:background .12s;
  border:none;width:100%;font-family:var(--font);text-align:left;
}
.sb-item:hover{background:var(--bg3)}
.sb-item.active{background:var(--gold-bg)}
.sb-item.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  background:var(--gold-grad2);
}
.sb-ico{
  width:var(--rail);height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-ico svg{width:17px;height:17px;stroke-width:1.8;color:var(--fg3);transition:color .12s}
.sb-item:hover .sb-ico svg,.sb-item.active .sb-ico svg{color:var(--gold2)}
.sb-label{
  font-size:.825rem;font-weight:500;color:var(--fg2);flex:1;
  opacity:0;transition:opacity .15s,color .12s;overflow:hidden;text-overflow:ellipsis;
}
.sidebar:hover .sb-label{opacity:1}
.sb-item:hover .sb-label{color:var(--fg0)}
.sb-item.active .sb-label{color:var(--gold2);font-weight:700}
.sb-user{
  padding:10px 0;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;cursor:pointer;overflow:hidden;
}
.sb-user:hover{background:rgba(255,255,255,.03)}
.sb-user-av{width:var(--rail);height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-user-av-inner{
  width:30px;height:30px;border-radius:50%;background:var(--gold-grad2);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;overflow:hidden;
  border:1.5px solid var(--gold-border);
}
.sb-user-av-inner img{width:100%;height:100%;object-fit:cover}
.sb-user-info{opacity:0;transition:opacity .15s;white-space:nowrap;flex:1;min-width:0;overflow:hidden}
.sidebar:hover .sb-user-info{opacity:1}
.sb-user-name{font-size:.775rem;font-weight:700;color:var(--fg0);overflow:hidden;text-overflow:ellipsis}
.sb-user-plan{font-size:.6rem;color:var(--gold2);font-weight:600;margin-top:1px}

/* Mobile sidebar */
.mob-backdrop{
  position:fixed;inset:0;z-index:490;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s;display:none;
}
.mob-backdrop.show{display:block;opacity:1;pointer-events:all}
.mob-sidebar{
  position:fixed;top:0;bottom:0;left:0;width:280px;z-index:500;
  background:var(--bg1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden;
}
.mob-sidebar.show{transform:translateX(0)}
.mob-sidebar .sb-label,.mob-sidebar .sb-tagline,.mob-sidebar .sb-name,
.mob-sidebar .sb-sec,.mob-sidebar .sb-user-info,.mob-sidebar .sb-brand-text{opacity:1}

/* Topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--th);z-index:150;
  display:none;align-items:center;gap:6px;padding:0 12px;
  background:rgba(4,5,10,.92);backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);border-bottom:1px solid var(--border);
}
.topbar.scrolled{background:rgba(4,5,10,.98)}
.topbar-title{flex:1;text-align:center;font-size:.9rem;font-weight:700;color:var(--fg0);letter-spacing:-.2px}
.ic-btn,.icon-btn{
  width:34px;height:34px;border-radius:var(--r2);border:none;background:transparent;
  color:var(--fg2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .12s;flex-shrink:0;
}
.ic-btn:hover,.icon-btn:hover{background:rgba(255,255,255,.06);color:var(--fg0)}
.ic-btn svg{width:17px;height:17px;stroke-width:1.8}

/* Layout */
#wrap{
  position:fixed;top:0;right:0;bottom:0;left:var(--rail);
  display:flex;flex-direction:column;overflow:hidden;
}
#main{
  flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;
  overscroll-behavior-y:contain;position:relative;z-index:1;
}

/* Dock */
.dock{
  position:fixed;bottom:0;left:0;right:0;z-index:150;height:var(--dh);
  display:none;background:rgba(4,5,10,.95);backdrop-filter:blur(24px);
  border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);
}
.dk{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 2px;border:none;background:transparent;
  color:var(--fg4);cursor:pointer;transition:all .15s;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.dk svg{width:21px;height:21px;stroke-width:1.7;transition:all .18s}
.dk span{font-size:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.dk.active{color:var(--gold2)}
.dk.active svg{stroke:var(--gold2)}
.dk.active::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:30px;height:2px;border-radius:0 0 3px 3px;background:var(--gold-grad2);
}

/* Audio player */
.audio{
  display:none;flex-direction:column;
  position:fixed;bottom:0;left:var(--rail);right:0;z-index:140;
  background:rgba(7,8,15,.97);backdrop-filter:blur(20px);border-top:1px solid var(--border);
}
.audio.show{display:flex !important}
.audio-prog{height:2px;background:rgba(255,255,255,.05);cursor:pointer;position:relative}
.audio-prog-fill{height:100%;background:var(--gold-grad2);transition:width .1s linear}
.audio-body{display:flex;align-items:center;gap:12px;padding:10px 16px}
.audio-art{
  width:34px;height:34px;border-radius:8px;background:var(--gold-bg);
  border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;
}
.audio-art svg{color:var(--gold2);width:16px;height:16px}
.audio-info{flex:1;min-width:0}
.audio-name{font-size:.775rem;font-weight:700;color:var(--fg0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-time{font-size:.675rem;color:var(--fg3);margin-top:1px}
.audio-btns{display:flex;align-items:center;gap:4px}
.a-btn{
  width:34px;height:34px;border-radius:50%;background:var(--gold-grad2);color:#000;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s;flex-shrink:0;
}
.a-btn:hover{transform:scale(1.07)}
.a-side,.a-skip{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid var(--border2);color:var(--fg2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.575rem;font-weight:800;
}
.a-side:hover,.a-skip:hover{background:rgba(255,255,255,.08);color:var(--fg0)}
.a-side svg{width:13px;height:13px}

/* Pages */
.page{min-height:100%;animation:pageIn .22s ease-out both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes floatUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.page-hero{
  padding:26px 20px 22px;background:linear-gradient(170deg,var(--bg2) 0%,var(--bg0) 100%);
  border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}
.page-hero::after{
  content:'';position:absolute;top:-80px;right:-80px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(196,154,10,.06) 0%,transparent 70%);pointer-events:none;
}
.page-hero-eyebrow{
  font-size:.575rem;font-weight:800;color:var(--gold);text-transform:uppercase;
  letter-spacing:1.8px;margin-bottom:7px;display:flex;align-items:center;gap:8px;
}
.page-hero-eyebrow::before{content:'';width:14px;height:1px;background:var(--gold)}
.page-hero-title{font-size:1.55rem;font-weight:900;color:var(--fg0);letter-spacing:-.5px;line-height:1.1;margin-bottom:5px}
.page-hero-sub{font-size:.8rem;color:var(--fg2);line-height:1.5}
.sec-title,.sec-eyebrow{
  padding:14px 20px 8px;font-size:.6rem;font-weight:800;color:var(--fg3);
  text-transform:uppercase;letter-spacing:1.3px;
}
.sub-hdr,.subhdr{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  background:var(--bg0);border-bottom:1px solid var(--border3);
  position:sticky;top:0;z-index:8;min-height:48px;
}
.sub-hdr-title,.subhdr-title{
  flex:1;font-size:.875rem;font-weight:700;color:var(--fg0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.back{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;
  border:1px solid var(--border2);background:rgba(255,255,255,.04);
  color:var(--fg2);font-size:.775rem;font-weight:600;cursor:pointer;transition:all .12s;font-family:var(--font);
}
.back:hover{background:rgba(255,255,255,.07);color:var(--fg0)}
.back svg{width:11px;height:11px;stroke-width:2.5}

.input,.search-in,.auth-input{
  background:var(--bg3);border:1.5px solid var(--border2);border-radius:var(--r);
  color:var(--fg0);font-family:var(--font);font-size:.875rem;outline:none;
  transition:border-color .15s,box-shadow .15s;padding:10px 14px;width:100%;
}
.input::placeholder,.search-in::placeholder,.auth-input::placeholder{color:var(--fg3)}
.input:focus,.search-in:focus,.auth-input:focus{
  border-color:rgba(196,154,10,.35);box-shadow:0 0 0 3px rgba(196,154,10,.07);
}
.search-wrap{padding:10px 14px;border-bottom:1px solid var(--border3);background:var(--bg0);position:sticky;top:0;z-index:7}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border-radius:var(--r);border:none;cursor:pointer;
  font-family:var(--font);font-size:.85rem;font-weight:700;transition:all .15s;
}
.btn-gold,.btn-primary{background:var(--gold-grad2);color:#000;box-shadow:0 4px 16px rgba(196,154,10,.2)}
.btn-gold:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(196,154,10,.35)}
.btn-ghost,.btn-secondary{background:transparent;color:var(--fg1);border:1.5px solid var(--border2)}
.btn-ghost:hover,.btn-secondary:hover{background:rgba(255,255,255,.04)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(204,68,68,.3)}
.btn-w{width:100%}
.btn-sm{padding:7px 14px;font-size:.8rem}

.row{
  display:flex;align-items:center;gap:14px;padding:14px 20px;
  border-bottom:1px solid var(--border3);cursor:pointer;transition:background .1s;
}
.row:hover{background:rgba(255,255,255,.02)}
.row-ico{
  width:38px;height:38px;border-radius:11px;background:var(--bg3);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  flex-shrink:0;border:1px solid var(--border2);
}
.row-body{flex:1;min-width:0}
.row-title{font-size:.875rem;font-weight:700;color:var(--fg0);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:.725rem;color:var(--fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-chevron,.row-right{color:var(--fg4);flex-shrink:0}
.row-chevron svg{width:13px;height:13px;stroke-width:2}

/* Prayers & stats */
.prayers{display:flex;gap:1px;background:var(--border3);overflow:hidden}
.pray{
  flex:1;padding:10px 6px;text-align:center;background:var(--bg1);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.pray.next{background:rgba(196,154,10,.07)}
.pray-icon{font-size:1rem;line-height:1}
.pray-name{font-size:.575rem;font-weight:800;color:var(--fg3);text-transform:uppercase;letter-spacing:.5px}
.pray-time{font-size:.7rem;font-weight:700;color:var(--fg2)}
.pray.next .pray-time{color:var(--gold2)}
.pray-badge{font-size:.5rem;font-weight:800;color:var(--gold);background:var(--gold-bg);padding:1px 5px;border-radius:6px;border:1px solid var(--gold-border)}
.stats-row{display:flex;gap:1px;background:var(--border3)}
.stat{flex:1;padding:12px 8px;text-align:center;background:var(--bg1);display:flex;flex-direction:column;align-items:center;gap:3px}
.stat-ico{font-size:1.1rem}
.stat-val{font-size:.95rem;font-weight:900;color:var(--fg0)}
.stat-lbl{font-size:.55rem;font-weight:700;color:var(--fg3);text-transform:uppercase;letter-spacing:.5px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}
.quick-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;
  border-radius:var(--r);background:var(--bg2);border:1px solid var(--border);
  cursor:pointer;transition:all .15s;text-align:center;
}
.quick-btn:hover{background:var(--bg3);border-color:var(--gold-border);transform:translateY(-1px)}
.quick-ico{font-size:1.4rem}
.quick-lbl{font-size:.65rem;font-weight:700;color:var(--fg2)}

/* Filters & pills */
.filters,.filter-bar{
  display:flex;gap:6px;padding:10px 14px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--border3);background:var(--bg0);position:sticky;top:0;z-index:10;
}
.filters::-webkit-scrollbar,.filter-bar::-webkit-scrollbar{display:none}
.pill,.filter-chip{
  padding:6px 14px;border-radius:20px;border:1.5px solid var(--border2);
  background:transparent;color:var(--fg2);font-family:var(--font);font-size:.75rem;
  font-weight:700;cursor:pointer;white-space:nowrap;transition:all .12s;flex-shrink:0;
}
.pill:hover,.filter-chip:hover{color:var(--fg0);border-color:var(--border2)}
.pill.on,.filter-chip.active{border-color:var(--gold-border);background:var(--gold-bg);color:var(--gold2)}

/* Coran */
.surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--border3)}
.surah{
  background:var(--bg0);padding:16px 14px 48px;cursor:pointer;position:relative;
  overflow:hidden;transition:background .1s;
}
.surah:hover{background:rgba(196,154,10,.03)}
.surah-num{font-size:.6rem;font-weight:800;color:var(--gold);letter-spacing:.5px;margin-bottom:7px}
.surah-name{font-size:.9rem;font-weight:800;color:var(--fg0);margin-bottom:2px}
.surah-fr{font-size:.7rem;color:var(--fg2);margin-bottom:3px}
.surah-tr{font-size:.675rem;color:var(--fg3);margin-bottom:4px}
.surah-ar{font-family:var(--font-ar);font-size:1rem;color:rgba(196,154,10,.65);direction:rtl;position:absolute;bottom:9px;right:12px}
.surah-meta{display:flex;align-items:center;gap:6px;font-size:.6rem;color:var(--fg3)}
.surah-type{display:inline-block;font-size:.52rem;font-weight:800;padding:2px 6px;border-radius:4px;text-transform:uppercase;background:rgba(255,255,255,.04);color:var(--fg3);border:1px solid var(--border2)}
.surah-play{
  position:absolute;bottom:9px;left:10px;width:24px;height:24px;border-radius:50%;
  background:var(--gold-grad2);color:#000;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:1;transition:transform .12s;
}
.surah-play:hover{transform:scale(1.1)}
.surah-play.on{box-shadow:0 0 0 2px var(--gold2)}
.surah-play svg{width:10px;height:10px}
.surah-read{
  position:absolute;bottom:9px;left:40px;padding:3px 8px;border-radius:6px;
  background:rgba(61,106,184,.15);border:1px solid rgba(61,106,184,.25);
  color:var(--blue2);font-size:.575rem;font-weight:700;cursor:pointer;z-index:1;
}

/* Adhkar & hadiths */
.dhikr,.adh-card{padding:18px 20px;border-bottom:1px solid var(--border3);transition:opacity .2s}
.dhikr.done{opacity:.55}
.adh-ar{font-family:var(--font-ar);font-size:1.25rem;color:var(--gold2);direction:rtl;text-align:right;line-height:2;margin-bottom:8px}
.adh-tr{font-size:.8rem;color:var(--fg2);line-height:1.6;margin-bottom:6px}
.adh-fr{font-size:.85rem;color:var(--fg1);line-height:1.65;margin-bottom:10px}
.adh-footer{display:flex;align-items:center;justify-content:space-between}
.adh-count{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:14px;background:var(--gold-bg);border:1px solid var(--gold-border);font-size:.7rem;font-weight:800;color:var(--gold2);cursor:pointer}
.had-card,.hadith{padding:16px 20px;border-bottom:1px solid var(--border3)}
.had-card{border-left:3px solid transparent}
.had-card:hover{border-left-color:var(--gold-border)}
.had-num{font-size:.6rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.had-ar,.hadith-ar{font-family:var(--font-ar);font-size:1rem;color:var(--fg1);direction:rtl;text-align:right;line-height:2;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border3)}
.had-txt,.hadith-fr{font-size:.85rem;color:var(--fg1);line-height:1.75}
.hadith-src{font-size:.7rem;color:var(--fg3);font-weight:700;margin-top:6px}
.col-card{
  padding:16px 18px;background:var(--bg2);border-radius:var(--r);border:1px solid var(--border);
  cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:14px;
}
.col-card:hover{border-color:var(--gold-border);transform:translateY(-1px)}
.col-ico{font-size:1.4rem;flex-shrink:0}
.col-name{font-size:.875rem;font-weight:700;color:var(--fg0);margin-bottom:2px}
.col-count{font-size:.7rem;color:var(--fg3)}

/* Journal */
.j-card{padding:16px 20px;border-bottom:1px solid var(--border3);cursor:pointer;transition:background .1s}
.j-card:hover{background:rgba(255,255,255,.02)}
.j-title{font-size:.875rem;font-weight:700;color:var(--fg0);margin-bottom:3px}
.j-preview{font-size:.775rem;color:var(--fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.j-meta{font-size:.675rem;color:var(--fg4);display:flex;gap:8px}
.j-sep{padding:8px 20px;font-size:.575rem;font-weight:800;color:var(--fg4);text-transform:uppercase;letter-spacing:1.2px;border-bottom:1px solid var(--border3);background:var(--bg1)}

/* Tasbih */
.tasbih-count{
  font-size:5rem;font-weight:900;letter-spacing:-4px;line-height:1;text-align:center;
  background:var(--gold-grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tasbih-btn{
  width:156px;height:156px;border-radius:50%;
  background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1.5px solid var(--gold-border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:2.5rem;
  box-shadow:0 0 40px rgba(196,154,10,.06);transition:all .12s;
}
.tasbih-btn:active{transform:scale(.97)}

/* Settings */
.settings-section{border-bottom:1px solid var(--border)}
.settings-section-title{padding:14px 20px 7px;font-size:.575rem;font-weight:800;color:var(--fg3);text-transform:uppercase;letter-spacing:1.5px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border3);cursor:pointer;transition:background .1s}
.settings-row:hover{background:rgba(255,255,255,.02)}
.settings-row-left{display:flex;align-items:center;gap:12px}
.settings-row-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.settings-row-label{font-size:.85rem;font-weight:600;color:var(--fg0)}
.settings-row-sub{font-size:.7rem;color:var(--fg3);margin-top:1px}
.settings-row-right{color:var(--fg3);font-size:.775rem;display:flex;align-items:center;gap:4px}
.toggle{width:42px;height:22px;border-radius:11px;background:var(--bg4);border:1px solid var(--border2);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.toggle.on{background:var(--gold);border-color:var(--gold-border)}
.toggle.on::after{transform:translateX(20px)}
.plan-badge{padding:3px 9px;border-radius:18px;font-size:.6rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.plan-free{background:rgba(255,255,255,.05);color:var(--fg2)}
.plan-starter{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.plan-premium{background:var(--blue-bg);color:var(--blue2);border:1px solid var(--blue-border)}
.plan-ultimate{background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-border)}

/* Shop */
.plan-card{border-radius:var(--r);padding:22px 18px;border:1px solid var(--border);background:var(--bg2);position:relative;overflow:hidden;transition:all .18s}
.plan-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.plan-card.popular{border-color:rgba(61,106,184,.25);background:linear-gradient(160deg,#080D1C,#0A0F20)}
.plan-card.popular::before{
  content:'Populaire';position:absolute;top:12px;right:12px;font-size:.575rem;font-weight:800;
  color:var(--blue2);background:var(--blue-bg);border:1px solid var(--blue-border);
  padding:3px 8px;border-radius:6px;text-transform:uppercase;
}

/* Quiz */
.quiz-option,.quiz-opt{
  width:100%;padding:13px 16px;margin-bottom:8px;border-radius:var(--r);
  border:1.5px solid var(--border2);background:var(--bg2);color:var(--fg0);
  cursor:pointer;transition:all .12s;font-family:var(--font);font-size:.875rem;text-align:left;
}
.quiz-option:hover,.quiz-opt:hover{border-color:var(--gold-border);background:var(--gold-bg)}
.quiz-option.correct,.quiz-opt.correct{border-color:var(--green-border);background:var(--green-bg);color:var(--green)}
.quiz-option.wrong,.quiz-opt.wrong{border-color:rgba(204,68,68,.3);background:var(--red-bg);color:var(--red)}
.quiz-lbl{font-size:.575rem;font-weight:800;color:var(--fg3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.quiz-q{font-size:1rem;font-weight:700;color:var(--fg0);line-height:1.5;margin-bottom:16px}

/* Tracker / calendar */
.week-grid{display:flex;gap:4px;padding:14px 16px}
.week-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:8px}
.week-day.today{background:rgba(196,154,10,.08)}
.wd-name{font-size:.55rem;font-weight:800;color:var(--fg3);text-transform:uppercase}
.wd-num{font-size:.75rem;font-weight:700;color:var(--fg0)}
.wd-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.wd-dot{width:5px;height:5px;border-radius:50%;background:var(--bg4)}
.wd-dot.done{background:var(--green)}
.wd-dot.miss{background:var(--bg4)}
.tg-cell{
  min-width:36px;min-height:36px;border-radius:8px;border:1.5px solid var(--border2);
  background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.tg-cell:hover{border-color:var(--border2)}
.tg-cell.done{background:var(--green-bg);border-color:var(--green-border)}
.tg-today-col{background:rgba(196,154,10,.07);border-radius:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;max-width:480px;margin:0 auto}
.cal-cell{
  aspect-ratio:1;border-radius:8px;background:var(--bg3);border:1px solid var(--border3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;max-width:60px;font-size:.8rem;
}
.cal-cell:hover{border-color:var(--border2)}
.cal-cell.today{background:var(--gold-bg);border-color:var(--gold-border)}
.cal-cell.other{opacity:.35}

/* Scholars */
.scholar{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--border3);cursor:pointer}
.scholar:hover{background:rgba(255,255,255,.02)}
.scholar-era{font-size:.6rem;font-weight:800;color:var(--gold);text-transform:uppercase;background:var(--gold-bg);padding:2px 7px;border-radius:5px;border:1px solid var(--gold-border)}

/* Verset & jeûne */
.verse-card{margin:14px 16px;padding:18px;background:var(--bg2);border-radius:var(--r);border:1px solid var(--border);border-left:3px solid var(--gold)}
.verse-ar{font-family:var(--font-ar);font-size:1.3rem;color:var(--gold2);direction:rtl;text-align:right;line-height:2.2;margin-bottom:10px}
.verse-fr{font-size:.875rem;color:var(--fg1);line-height:1.75;margin-bottom:6px}
.verse-ref{font-size:.7rem;font-weight:700;color:var(--fg3)}
.fast-day{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--border3)}
.fast-day-name{font-size:.875rem;font-weight:600;color:var(--fg0)}
.obj-card{padding:16px 20px;border-bottom:1px solid var(--border3);display:flex;align-items:center;gap:14px;cursor:pointer}
.obj-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.obj-check.done{background:var(--green);border-color:var(--green);color:#fff}

/* Coran video */
.qv-video-wrap{flex:1;position:relative;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.qv-canvas{width:100%;height:100%;object-fit:contain}
.qv-sub-ar{font-family:var(--font-ar);font-size:1.4rem;color:var(--gold2);direction:rtl;text-align:center;line-height:2;padding:6px 16px}
.qv-sub-fr{font-size:.875rem;color:var(--fg1);text-align:center;line-height:1.6;padding:4px 16px}

/* Auth page */
.auth-page{position:fixed;inset:0;z-index:2000;background:var(--bg0);display:flex;overflow:hidden}
.auth-hero{display:none;flex:1;flex-direction:column;justify-content:center;padding:48px;position:relative}
.auth-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(196,154,10,.06),transparent 70%);pointer-events:none}
.auth-hero-title{font-size:2rem;font-weight:900;color:var(--fg0);margin-bottom:12px;line-height:1.1}
.auth-hero-sub{font-size:1rem;color:var(--fg2);line-height:1.6;margin-bottom:24px}
.auth-feature{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--fg1)}
.auth-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;overflow-y:auto;position:relative;max-width:440px;margin:0 auto;width:100%}
.auth-logo{text-align:center;margin-bottom:24px}
.auth-logo-icon{font-size:2rem;margin-bottom:8px;display:block}
.auth-logo-title{font-size:1.3rem;font-weight:900;color:var(--fg0)}
.auth-logo-sub{font-size:.8rem;color:var(--fg2)}
.auth-tabs{display:flex;gap:4px;background:var(--bg3);border-radius:10px;padding:4px;margin-bottom:22px;width:100%}
.auth-tab{flex:1;padding:8px;border-radius:8px;border:none;background:transparent;color:var(--fg3);font-family:var(--font);font-size:.85rem;font-weight:700;cursor:pointer}
.auth-tab.active{background:var(--bg1);color:var(--fg0);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.auth-google,.auth-google-btn{
  width:100%;padding:12px;border-radius:var(--r);border:1.5px solid var(--border2);
  background:rgba(255,255,255,.03);color:var(--fg0);font-family:var(--font);font-size:.875rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;
}
.auth-google:hover,.auth-google-btn:hover{background:rgba(255,255,255,.06)}
.auth-divider{text-align:center;font-size:.75rem;color:var(--fg3);margin:12px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:44%;height:1px;background:var(--border2)}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.auth-submit{width:100%;padding:13px;border-radius:var(--r);border:none;background:var(--gold-grad2);color:#000;font-weight:800;cursor:pointer;margin-top:4px}
.auth-err{display:none;padding:10px 14px;border-radius:8px;background:rgba(204,68,68,.08);border:1px solid rgba(204,68,68,.2);color:#E08080;font-size:.8rem;margin-bottom:8px}
.auth-switch{text-align:center;font-size:.8rem;color:var(--fg3);margin-top:6px}
.auth-switch span{color:var(--gold2);cursor:pointer;font-weight:700}
.auth-skip{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--fg3);font-size:.8rem;cursor:pointer}
.auth-overlay{position:fixed;inset:0;z-index:400;background:rgba(4,5,10,.97);display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:28px 24px;max-width:360px;width:100%;animation:fadeScale .28s ease}
.auth-title{font-size:1.3rem;font-weight:900;color:var(--fg0);text-align:center;margin-bottom:5px}
.auth-sub{font-size:.825rem;color:var(--fg2);text-align:center;margin-bottom:24px}

/* Modals & overlays */
.modal-bg{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:24px;max-width:360px;width:100%;animation:fadeScale .25s ease}
.modal-title{font-size:.875rem;font-weight:700;color:var(--fg0);margin-bottom:4px}
.modal-sub{font-size:.775rem;color:var(--fg2);margin-bottom:14px}
.paywall-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:20px}
.paywall-card{background:var(--bg2);border:1px solid var(--gold-border);border-radius:18px;padding:28px 24px;max-width:340px;width:100%;text-align:center;animation:fadeScale .28s ease}

/* Mots croisés */
.cw-wrap{overflow:auto;padding:16px;display:flex;justify-content:center}
.cw-grid{display:inline-grid;gap:2px;background:var(--bg4);padding:3px;border-radius:8px;border:1px solid var(--border)}
.cw-cell{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--border2);font-size:.9rem;font-weight:800;color:var(--fg0);cursor:pointer;border-radius:3px;position:relative}
.cw-cell.blk{background:var(--bg0)!important;border-color:var(--bg0)!important;pointer-events:none}
.cw-cell.ok{background:rgba(40,184,122,.15)!important;border-color:rgba(40,184,122,.4)!important;color:var(--green)}
.cw-cell.err{background:rgba(204,68,68,.12)!important;border-color:rgba(204,68,68,.3)!important;color:var(--red)}
.cw-n{position:absolute;top:1px;left:2px;font-size:.38rem;font-weight:900;color:var(--fg3)}

/* ─── Dashboard ─── */
.dash-hero{
  padding:22px 20px 18px;background:linear-gradient(160deg,var(--bg2),var(--bg0));
  border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}
.dash-hero::before{
  content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(196,154,10,.08),transparent 70%);pointer-events:none;
}
.dash-hero-inner{position:relative;z-index:1}
.dash-greet{font-size:.675rem;font-weight:600;color:var(--fg3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:5px}
.dash-title{font-size:1.5rem;font-weight:900;color:var(--fg0);letter-spacing:-.4px;margin-bottom:16px}
.dash-verse{
  background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:var(--r);
  padding:14px 16px;margin-bottom:12px;
}
.dash-verse-ar{font-family:var(--font-ar);font-size:1.3rem;color:var(--gold2);line-height:2.2;margin-bottom:8px;direction:rtl;text-align:right}
.dash-verse-fr{font-size:.8rem;color:var(--fg2);line-height:1.65;margin-bottom:8px}
.dash-verse-foot{display:flex;align-items:center;justify-content:space-between}
.dash-verse-ref{font-size:.675rem;font-weight:700;color:var(--gold)}
.dash-verse-btn{
  width:28px;height:28px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);
  color:var(--fg2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;
  transition:all .12s;
}
.dash-verse-btn:hover{border-color:var(--gold-border);color:var(--gold2)}
.dash-dates{display:flex;align-items:center;justify-content:space-between;font-size:.675rem;color:var(--fg3)}
.dash-stats{display:flex;border-bottom:1px solid var(--border3)}
.dash-stat{
  flex:1;padding:12px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;
  border-right:1px solid var(--border3);
}
.dash-stat:last-child{border-right:none}
.dash-stat-ico{font-size:1.05rem}
.dash-stat-val{font-size:.9rem;font-weight:900;color:var(--fg0)}
.dash-stat-lbl{font-size:.52rem;font-weight:700;color:var(--fg3);text-transform:uppercase;letter-spacing:.5px}
.dash-section{border-bottom:1px solid var(--border3)}
.dash-section-hdr{padding:10px 20px 5px;font-size:.6rem;font-weight:800;color:var(--fg3);text-transform:uppercase;letter-spacing:1.3px}
.dash-prayers{padding:6px 16px 8px}
.dash-city-row{display:flex;align-items:center;gap:8px;padding:8px 20px 12px;border-top:1px solid var(--border3)}
.dash-city-input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--fg0);font-size:.8rem}
.dash-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px 20px}
.dash-quick{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;
  border-radius:var(--r);background:var(--bg2);border:1px solid var(--border);cursor:pointer;
  transition:all .15s;text-align:center;
}
.dash-quick:hover{background:var(--bg3);border-color:var(--gold-border);transform:translateY(-2px)}
.dash-quick-ico{font-size:1.35rem}
.dash-quick-lbl{font-size:.65rem;font-weight:700;color:var(--fg2)}
.page-pad{height:88px}

/* ─── Shop ─── */
.shop-hero{
  padding:32px 20px 26px;text-align:center;border-bottom:1px solid var(--border);
  background:linear-gradient(160deg,var(--bg2),var(--bg0));position:relative;overflow:hidden;
}
.shop-hero::after{
  content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(196,154,10,.1),transparent 65%);
  pointer-events:none;
}
.shop-hero-inner{position:relative;z-index:1}
.shop-hero-ico{font-size:2rem;margin-bottom:8px}
.shop-hero-title{font-size:1.55rem;font-weight:900;color:var(--fg0);margin-bottom:6px;letter-spacing:-.3px}
.shop-hero-sub{font-size:.875rem;color:var(--fg2)}
.shop-badge-active{
  display:inline-flex;margin-top:12px;padding:6px 14px;border-radius:20px;
  background:var(--green-bg);border:1px solid var(--green-border);
  color:var(--green);font-size:.75rem;font-weight:700;
}
.shop-trial{
  margin:16px;padding:18px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(196,154,10,.1),rgba(196,154,10,.03));
  border:1.5px solid var(--gold-border);
}
.shop-plan-card{
  border-radius:18px;overflow:hidden;border:2px solid var(--border2);
  background:var(--bg2);position:relative;transition:border-color .15s,transform .15s;
}
.shop-plan-card:hover{transform:translateY(-2px)}
.shop-plan-card.pop{border-color:rgba(196,154,10,.35)}
.shop-plan-card.current{border-color:var(--green-border)}
.shop-plans{padding:16px;display:flex;flex-direction:column;gap:12px}
.shop-guarantees{
  margin:0 16px 16px;padding:16px;background:var(--bg1);border-radius:var(--r);border:1px solid var(--border);
}
.shop-faq{margin:0 16px 16px}

/* ─── Load screen ─── */
#_loadScreen .load-logo{font-size:2.5rem;margin-bottom:6px}
#_loadScreen .load-brand{font-size:1.15rem;font-weight:900;color:var(--fg0)}
#_loadScreen .load-brand span{color:var(--gold2)}
#_loadScreen .load-track{width:160px;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-top:14px}
#_loadScreen #_loadBar{height:100%;width:0;background:var(--gold-grad2);border-radius:2px;transition:width .45s ease}

/* ─── Fullscreen player ─── */
.fp-overlay{
  display:none;position:fixed;inset:0;z-index:600;background:var(--bg0);
  flex-direction:column;align-items:center;justify-content:center;padding:32px;
}
.fp-overlay.show{display:flex}
.fp-close{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);color:var(--fg1);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.fp-art{
  width:180px;height:180px;border-radius:22px;background:var(--gold-grad);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  box-shadow:0 20px 56px rgba(0,0,0,.5);
}
.fp-title{font-size:1.35rem;font-weight:800;text-align:center;margin-bottom:4px}
.fp-sub{font-size:.75rem;color:var(--fg2);margin-bottom:22px}
.fp-prog{width:100%;max-width:300px;height:4px;background:var(--bg4);border-radius:2px;cursor:pointer;margin-bottom:6px}
.fp-prog-fill{height:100%;background:var(--gold-grad2);border-radius:2px;transition:width .1s}
.fp-times{display:flex;justify-content:space-between;width:100%;max-width:300px;font-size:.65rem;color:var(--fg3);margin-bottom:20px}
.fp-controls{display:flex;align-items:center;gap:10px}

/* Misc */
.ac-item{padding:10px 16px;cursor:pointer;font-size:.875rem;color:var(--fg1);border-bottom:1px solid var(--border3)}
.ac-item:hover{background:rgba(255,255,255,.04)}
.ac-list.show{display:block}
.loader{width:18px;height:18px;border-radius:50%;border:2px solid rgba(196,154,10,.15);border-top-color:var(--gold2);animation:spin .7s linear infinite}
.skeleton{background:var(--bg3);border-radius:6px;position:relative;overflow:hidden}
.pin-key{padding:15px 0;border-radius:12px;border:1px solid var(--border);background:var(--bg3);color:var(--fg0);font-size:20px;font-weight:800;cursor:pointer}
.tp-row{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border3)}
.tp-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.user-av{width:38px;height:38px;border-radius:50%;background:var(--gold-grad2);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gold-border);overflow:hidden}
.user-av img{width:100%;height:100%;object-fit:cover}
.grad-text{background:var(--gold-grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center{display:flex;align-items:center;justify-content:center}
.anim-in{animation:pageIn .35s ease both}
.section-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border3);font-size:.725rem;font-weight:800;color:var(--fg3);text-transform:uppercase;letter-spacing:1.2px}
.pbar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;flex:1}
.pbar-fill{height:100%;background:var(--gold-grad2);border-radius:2px;transition:width .3s}
.hidden{display:none!important}

/* Responsive */
@media(min-width:860px){
  .topbar,.dock{display:none!important}
  .mob-sidebar,.mob-backdrop{display:none!important}
  #wrap{left:var(--rail)}
  .audio{left:var(--rail)}
  .toast-el{bottom:40px}
  .auth-hero{display:flex}
  .auth-panel{max-width:420px}
}

@media(max-width:859px){
  :root{--rail:0px}
  .sidebar{display:none!important}
  .topbar{display:flex!important}
  #wrap{top:var(--th);left:0;right:0;bottom:var(--dh)}
  .dock{display:flex!important}
  .audio{left:0;bottom:var(--dh)}
  .toast-el{bottom:calc(var(--dh) + 12px)}
  .surah-grid{grid-template-columns:repeat(2,1fr)!important}
}

@media(max-width:480px){
  .surah-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* Paywall */
.paywall-page{padding:32px 24px;text-align:center;max-width:400px;margin:0 auto}
.paywall-page-ico{font-size:3rem;margin-bottom:12px}
.paywall-page-title{font-size:1.25rem;font-weight:900;margin-bottom:8px}
.paywall-page-desc{font-size:14px;color:var(--fg2);line-height:1.6;margin-bottom:12px}
.paywall-page-ar{font-family:var(--font-ar);font-size:1.1rem;color:var(--gold2);direction:rtl;margin:12px 0 6px}
.paywall-page-fr{font-size:12px;color:var(--fg3);font-style:italic;margin-bottom:20px}
.paywall-page-btn{margin-top:8px}

/* Stripe wait */
.stripe-wait-overlay{
  position:fixed;inset:0;z-index:750;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px);
}
.stripe-wait-card{
  background:var(--bg1);border:1px solid var(--border);border-radius:20px;
  padding:28px 22px;max-width:360px;width:100%;text-align:center;
}
.stripe-wait-ico{font-size:2.5rem;margin-bottom:10px}
.stripe-wait-title{font-size:1.15rem;font-weight:900;margin-bottom:8px}
.stripe-wait-text{font-size:13px;color:var(--fg2);line-height:1.6;margin-bottom:14px}
.stripe-wait-info{
  font-size:12px;color:var(--fg2);background:rgba(196,154,10,.08);
  border:1px solid var(--gold-border);border-radius:12px;padding:12px;margin-bottom:14px;text-align:left;line-height:1.5;
}
.stripe-wait-status{font-size:12px;color:var(--gold2);margin-bottom:14px}
.stripe-wait-actions{display:flex;flex-direction:column;gap:8px}

/* Success overlay */
.success-overlay{
  position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(10px);
}
.success-card{
  background:linear-gradient(160deg,var(--bg1),var(--bg2));border:1px solid var(--gold-border);
  border-radius:24px;padding:32px 24px;max-width:340px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.success-ico{font-size:3.5rem;margin-bottom:14px}
.success-title{font-size:1.4rem;font-weight:900;color:var(--fg0);margin-bottom:6px}
.success-sub{font-size:1rem;color:var(--gold2);font-weight:700;margin-bottom:16px}
.success-feats{background:rgba(255,255,255,.04);border-radius:12px;padding:14px;margin-bottom:18px;text-align:left}
.success-feat{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg1);padding:4px 0}
.success-check{color:var(--green);font-weight:800}
.success-verse{font-family:var(--font-ar);direction:rtl;font-size:1rem;color:var(--fg3);margin-bottom:20px}

/* Journal */
.journal-header{background:linear-gradient(160deg,var(--bg1),var(--bg2));padding:20px;border-bottom:1px solid var(--border)}
.journal-header-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.journal-eyebrow{font-size:11px;font-weight:700;color:var(--fg3);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.journal-title{font-size:1.3rem;font-weight:900}
.journal-stats{display:flex;gap:10px;margin-top:14px}
.journal-stat{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:8px 0;text-align:center}
.journal-stat-val{font-size:1rem;font-weight:800;color:var(--gold2)}
.journal-stat-lbl{font-size:9px;color:var(--fg3);margin-top:1px;font-weight:600;text-transform:uppercase}
.journal-empty{padding:60px 24px;text-align:center}
.journal-empty-ico{font-size:3rem;margin-bottom:16px}
.journal-empty-title{font-size:1rem;font-weight:700;margin-bottom:8px}
.journal-empty-text{font-size:13px;color:var(--fg3);line-height:1.7;margin-bottom:24px}
.j-card{padding:16px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.j-card:hover{background:rgba(255,255,255,.025)}
.j-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.j-card-date{font-size:12px;font-weight:700;color:var(--gold2)}
.j-card-mood{font-size:1.2rem}
.j-title{font-size:14px;font-weight:700;margin-bottom:5px}
.j-preview{font-size:13px;color:var(--fg2);line-height:1.6}
.j-meta{font-size:11px;color:var(--fg4);margin-top:6px}

/* Coran hero / offline */
.coran-hero{
  background:linear-gradient(150deg,var(--bg2),var(--bg3));padding:20px;border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.coran-hero::before{
  content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,var(--gold-bg),transparent 70%);
  pointer-events:none;
}
.coran-hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.coran-hero-ar{font-family:var(--font-ar);font-size:2.2rem;color:var(--gold2)}
.coran-hero-title{font-size:1.1rem;font-weight:800}
.coran-hero-sub{font-size:12px;color:var(--fg2)}
.coran-offline-btn{margin-left:auto}
.surah-offline-badge{font-size:10px;color:var(--green)}

/* Hadiths collections */
.hadith-collections{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px}
.hadith-col-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;
  transition:border-color .15s,transform .15s;
}
.hadith-col-card:hover{border-color:var(--gold-border);transform:translateY(-2px)}
.hadith-col-ico{font-size:1.8rem;margin-bottom:8px}
.hadith-col-name{font-size:14px;font-weight:800;margin-bottom:4px}
.hadith-col-count{font-size:11px;color:var(--fg3)}
.hadith-col-card.locked{opacity:.45;pointer-events:auto}