@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&family=Amiri:wght@400;700&display=swap');

/* ═══════════════ TOKENS ═══════════════ */
:root{
  --paper:#FBF7F1;
  --paper-shade:#F1E8D9;
  --card:#FFFFFF;
  --ink:#241F1C;
  --ink-soft:#6E5D52;
  --gold:#A9824C;
  --gold-soft:#E4D2B0;
  --clay:#9C5B4A;
  --clay-soft:#EAD5CC;
  --sage:#5E6B57;
  --sage-soft:#DCE3D6;
  --indigo:#33424B;
  --line:rgba(36,31,28,0.13);
  --shadow:0 10px 30px rgba(60,45,30,0.08);
  --gutter-shadow:linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.05));
  --r-lg:22px; --r-md:14px; --r-sm:9px;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-arabic:'Amiri', serif;
}
html[data-theme="dark"]{
  --paper:#18140F;
  --paper-shade:#211A13;
  --card:#221C16;
  --ink:#EEE6D9;
  --ink-soft:#B7A691;
  --gold:#D2B27C;
  --gold-soft:#4A3A22;
  --clay:#C88976;
  --clay-soft:#3A241E;
  --sage:#93A187;
  --sage-soft:#243026;
  --indigo:#9FB3BE;
  --line:rgba(238,230,217,0.13);
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --gutter-shadow:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.35));
}

*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;}
button{font-family:inherit;}
::selection{background:var(--gold-soft);}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

/* ═══════════════ LOGIN ═══════════════ */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%, var(--paper-shade), var(--paper));}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:44px 38px;text-align:center;max-width:340px;width:90%;}
.login-mark{font-size:34px;display:block;margin-bottom:6px;animation:breath 3s ease-in-out infinite;}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.mobile-topbar .rail-mark{animation:none;}
.login-title{font-size:32px;}
.login-sub{font-size:11px;text-transform:uppercase;letter-spacing:3px;color:var(--ink-soft);margin:4px 0 22px;}
.login-form input{width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:14px;margin-bottom:12px;outline:none;}
.login-form input:focus{border-color:var(--gold);}
.login-form button{width:100%;padding:12px;border-radius:var(--r-sm);border:none;background:var(--ink);color:var(--paper);font-weight:600;font-size:13px;cursor:pointer;letter-spacing:.02em;}
.login-error{color:var(--clay);font-size:12px;margin-top:14px;}

/* ═══════════════ APP SHELL ═══════════════ */
.app-shell{display:flex;min-height:100vh;}

/* ── Tab rail (the "divider tabs") ── */
.tab-rail{width:216px;flex-shrink:0;background:var(--paper-shade);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.rail-brand{padding:0 20px 20px;}
.rail-mark{font-size:26px;display:block;animation:breath 3s ease-in-out infinite;}
.rail-brand h1{font-size:23px;margin-top:2px;}
.rail-brand span.tagline{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:2.5px;color:var(--ink-soft);margin-top:2px;font-weight:600;}

.tab{display:flex;align-items:center;gap:11px;width:calc(100% - 14px);margin:2px 7px;padding:11px 14px 11px 12px;border:none;background:transparent;color:var(--ink-soft);font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;border-radius:0 10px 10px 0;border-left:3px solid transparent;position:relative;transition:background .15s,color .15s;}
.tab .tab-icon{font-size:15px;width:18px;text-align:center;}
.tab:hover{background:rgba(0,0,0,.03);color:var(--ink);}
.tab.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
.tab[data-accent="gold"].active{border-left-color:var(--gold);}
.tab[data-accent="clay"].active{border-left-color:var(--clay);}
.tab[data-accent="sage"].active{border-left-color:var(--sage);}
.tab[data-accent="indigo"].active{border-left-color:var(--indigo);}

.rail-foot{margin-top:auto;padding:14px 20px 0;display:flex;flex-direction:column;gap:8px;}
.theme-switch{position:relative;width:60px;height:30px;border-radius:20px;background:var(--paper);border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 6px;flex-shrink:0;}
.theme-switch .ts-icon{font-size:11px;z-index:1;line-height:1;}
.theme-switch .ts-knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--gold);transition:transform .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.2);}
html[data-theme="dark"] .theme-switch .ts-knob{transform:translateX(30px);}
.logout-link{font-size:11px;color:var(--ink-soft);text-decoration:none;padding-left:2px;}

/* Mobile: rail becomes a horizontal ribbon on top */
.mobile-topbar{display:none;}
@media (max-width:880px){
  .tab-rail{display:none;}
  .mobile-topbar{display:flex;align-items:center;gap:8px;padding:12px 12px;background:var(--paper-shade);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;overflow-x:auto;}
  .mobile-topbar .rail-mark{font-size:18px;margin-right:2px;}
  .mobile-topbar .tab{width:auto;white-space:nowrap;margin:0;border-radius:16px;border-left:none;border:1px solid var(--line);padding:7px 13px;}
  .mobile-topbar .tab.active{background:var(--ink);color:var(--paper);}
  .app-shell{flex-direction:column;}
}

.pages{flex:1;min-width:0;padding:26px 34px 130px;max-width:1180px;}
@media (max-width:880px){.pages{padding:18px 14px 130px;}}
.page{display:none;}
.page.active{display:block;animation:fadein .35s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:2.5px;color:var(--ink-soft);font-weight:700;margin-bottom:6px;}
.page-head{margin-bottom:22px;}
.page-head h2{font-size:28px;}
.page-head p{color:var(--ink-soft);font-size:13.5px;margin-top:4px;max-width:520px;}

.sec{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--ink-soft);margin:22px 0 10px;font-weight:700;display:flex;align-items:center;gap:8px;}
.sec::after{content:'';flex:1;height:1px;background:var(--line);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:880px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow);}
.card-sm{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;}

/* ═══════════════ SIGNATURE: TODAY SPREAD ═══════════════ */
.spread{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);}
.spread::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:34px;margin-left:-17px;background:var(--gutter-shadow);pointer-events:none;z-index:2;}
.spread-page{background:var(--paper);padding:26px 28px;position:relative;}
.spread-page.right{background:var(--paper-shade);}
@media (max-width:880px){.spread{grid-template-columns:1fr;}.spread::before{display:none;}}

.ambient-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.ambient-pill{font-size:10.5px;font-weight:700;color:var(--ink-soft);padding:5px 11px;background:var(--card);border:1px solid var(--line);border-radius:20px;}

.qbox{background:var(--card);padding:14px 16px;border-radius:var(--r-sm);border-left:3px solid var(--gold);}
.qbox.clay{border-left-color:var(--clay);}
.arabic{font-family:var(--font-arabic);font-size:20px;text-align:right;direction:rtl;line-height:2;font-weight:500;}
.trans{font-size:12.5px;font-style:italic;line-height:1.55;opacity:.9;margin-top:5px;color:var(--ink-soft);}
.src{display:block;font-size:9.5px;font-weight:700;color:var(--ink-soft);text-align:right;margin-top:5px;letter-spacing:.3px;}

/* ═══════════════ BUTTONS / INPUTS ═══════════════ */
.btn{padding:9px 16px;border-radius:20px;background:var(--gold-soft);border:none;color:var(--ink);font-weight:600;cursor:pointer;font-size:12px;}
.btn-outline{background:none;border:1px solid var(--line);color:var(--ink-soft);padding:7px 13px;border-radius:18px;font-size:11px;cursor:pointer;font-weight:600;}
.btn-gold{background:var(--gold);color:#fff;border:none;padding:10px 18px;border-radius:20px;font-weight:700;cursor:pointer;font-size:12.5px;}
.btn-clay{background:var(--clay);color:#fff;border:none;padding:10px 18px;border-radius:20px;font-weight:700;cursor:pointer;font-size:12.5px;}
.inp{width:100%;padding:10px 13px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:13px;outline:none;font-family:inherit;}
.inp:focus{border-color:var(--gold);}
textarea.inp{resize:none;}
.tog-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.tog{background:var(--paper);border:1px solid var(--line);padding:6px 13px;border-radius:18px;font-size:11px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.tog.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ═══════════════ PRAYER ═══════════════ */
.countdown{background:var(--paper-shade);padding:10px;border-radius:var(--r-sm);text-align:center;font-size:13px;font-weight:600;margin-bottom:12px;font-family:var(--font-mono);}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.pcell{background:var(--paper);padding:11px 4px;border-radius:var(--r-sm);text-align:center;border:1px solid var(--line);}
.pcell.now{border-color:var(--gold);background:var(--gold-soft);}
.pcell strong{display:block;font-size:8.5px;text-transform:uppercase;color:var(--ink-soft);letter-spacing:.5px;}
.pcell span{font-weight:700;font-size:13px;font-family:var(--font-mono);}
.qibla-wrap{display:flex;flex-direction:column;align-items:center;margin-top:10px;}
.compass{width:68px;height:68px;border-radius:50%;border:2px dashed var(--gold);display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .8s ease;background:var(--paper);}
.search-row{display:flex;gap:6px;margin-bottom:10px;}
.search-row input{flex:1;}
.search-row button{padding:0 14px;border-radius:var(--r-sm);background:var(--gold-soft);border:none;font-weight:600;font-size:11px;cursor:pointer;color:var(--ink);}

/* ═══════════════ SALAH TRACKER ═══════════════ */
.streak{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--ink);padding:4px 11px;border-radius:12px;font-size:10.5px;font-weight:700;margin-bottom:10px;font-family:var(--font-mono);}
.salah-week{display:flex;flex-direction:column;gap:6px;}
.salah-day-row{display:grid;grid-template-columns:22px 36px repeat(5,1fr);gap:5px;align-items:center;}
.day-lbl{font-size:9.5px;font-weight:700;color:var(--ink-soft);text-align:center;}
.excused-toggle{width:20px;height:20px;border-radius:6px;border:1px dashed var(--line);background:none;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.excused-toggle.on{background:var(--clay-soft);border-color:var(--clay);color:var(--clay);border-style:solid;}
.scell{background:var(--paper-shade);border-radius:7px;padding:6px 2px;text-align:center;font-size:10px;cursor:pointer;border:1px solid transparent;user-select:none;font-weight:700;}
.scell.done{background:var(--sage-soft);border-color:var(--sage);color:var(--sage);}
.scell.excused{background:var(--clay-soft);color:var(--clay);cursor:default;font-size:9px;}
.salah-note{font-size:10px;color:var(--ink-soft);margin-top:8px;line-height:1.5;}

/* ═══════════════ TASBIH ═══════════════ */
.tasbih-card{background:var(--paper-shade);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;text-align:center;}
.tasbih-phrase{font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:10px;}
.ring-wrap{position:relative;width:110px;height:110px;margin:0 auto 10px;}
.ring-wrap svg{position:absolute;top:0;left:0;transform:rotate(-90deg);}
.tasbih-circle{width:110px;height:110px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;user-select:none;position:relative;z-index:1;box-shadow:var(--shadow);}
.tasbih-circle:active{transform:scale(.94);}
.tasbih-count{font-family:var(--font-mono);font-size:26px;font-weight:700;line-height:1;}

/* ═══════════════ ADHKAR ═══════════════ */
.adhkar-card{background:var(--paper-shade);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;text-align:center;}
.adhkar-cnt-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;}
.adhkar-btn{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;border:none;font-size:16px;cursor:pointer;}
.adhkar-counter{font-family:var(--font-mono);font-size:19px;font-weight:700;min-width:36px;text-align:center;}
.adhkar-dots{display:flex;justify-content:center;gap:5px;margin-top:14px;}
.adhkar-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;}
.adhkar-dot.on{background:var(--gold);}

/* ═══════════════ 99 NAMES ═══════════════ */
.names-card{background:linear-gradient(160deg,var(--paper-shade),var(--card));border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-align:center;}
.name-num{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink-soft);letter-spacing:1.5px;font-family:var(--font-mono);}
.name-ar{font-family:var(--font-arabic);font-size:34px;color:var(--gold);font-weight:500;margin:8px 0 3px;direction:rtl;}
.name-roman{font-size:17px;font-weight:700;}
.name-meaning{font-size:12.5px;font-style:italic;opacity:.85;color:var(--ink-soft);}
.name-ref{font-size:12px;background:var(--paper);border-radius:var(--r-sm);padding:10px 14px;margin-top:12px;line-height:1.6;}

/* ═══════════════ MOOD ═══════════════ */
.mood-row{display:flex;justify-content:center;gap:16px;margin:12px 0;}
.mood-btn{font-size:27px;cursor:pointer;opacity:.35;border:none;background:none;transition:all .2s;}
.mood-btn.sel{opacity:1;transform:scale(1.2);}
.iman-bar-bg{height:8px;background:var(--line);border-radius:4px;margin:10px 0 4px;}
.iman-bar-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .5s ease;}

/* ═══════════════ WELLNESS / WEIGHT GOAL ═══════════════ */
.weight-card{background:linear-gradient(135deg,var(--sage-soft),var(--paper-shade));}
.weight-nums{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 6px;}
.weight-nums .cur{font-family:var(--font-display);font-size:26px;color:var(--ink);}
.weight-nums .goal{font-size:11px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.weight-progress-bg{height:9px;background:var(--line);border-radius:5px;overflow:hidden;}
.weight-progress-fill{height:100%;background:var(--sage);border-radius:5px;transition:width .5s ease;}
.weight-log-row{display:flex;gap:8px;margin-top:12px;}
.weight-log-row input{flex:1;}

/* ═══════════════ EVENTS ═══════════════ */
.event-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);}
.event-item:last-child{border-bottom:none;}
.event-name{font-size:13.5px;font-weight:600;}
.event-days{font-size:11.5px;color:var(--ink-soft);font-family:var(--font-mono);}
.event-soon{font-size:10px;background:var(--clay);color:#fff;padding:2px 8px;border-radius:10px;font-weight:700;margin-right:8px;}

/* ═══════════════ GALLERY ═══════════════ */
.gallery-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
.pgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:880px){.pgallery{grid-template-columns:1fr 1fr;}}
.gitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;cursor:pointer;position:relative;transition:transform .18s;}
.gitem:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.gimg{height:130px;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;overflow:hidden;background:var(--paper-shade);}
.gimg img{width:100%;height:100%;object-fit:cover;display:block;}
.gdet{padding:10px 12px;}
.gtag{font-size:8.5px;font-weight:700;text-transform:uppercase;color:var(--ink-soft);letter-spacing:1px;}
.gtitle{font-size:12px;font-weight:600;margin-top:2px;line-height:1.35;}
.gitem .del-btn,.gitem .fav-btn{position:absolute;top:6px;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:11px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:2;}
.gitem .del-btn{right:6px;}
.gitem .fav-btn{left:6px;}
.gitem:hover .del-btn,.gitem:hover .fav-btn{display:flex;}
.gitem.faved .fav-btn{display:flex;background:rgba(156,91,74,.85);}
.gadd-tile{background:var(--paper-shade);border:2px dashed var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;min-height:180px;gap:8px;}
.gadd-tile span{font-size:30px;}
.gadd-tile p{font-size:11.5px;color:var(--ink-soft);font-weight:600;}

.lightbox{position:fixed;inset:0;background:rgba(15,10,6,.9);z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:65vh;border-radius:14px;object-fit:contain;}
.lightbox .lb-emoji{font-size:110px;}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;}
.lb-caption{color:#fff;margin-top:16px;text-align:center;}
.lb-caption .lb-tag{font-size:10px;font-weight:700;text-transform:uppercase;opacity:.6;letter-spacing:1.5px;}
.lb-caption .lb-title{font-size:17px;font-weight:600;margin-top:3px;}
.lb-caption .lb-quote{font-size:13px;font-style:italic;opacity:.8;margin-top:5px;max-width:340px;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:8888;display:none;align-items:flex-end;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-sheet{background:var(--card);border-radius:26px 26px 0 0;padding:22px 22px 40px;width:100%;max-width:520px;animation:slideUp .25s ease;}
.modal-sheet h3{font-size:16px;font-weight:700;margin-bottom:16px;}
.modal-img-preview{width:100%;height:160px;border-radius:14px;background:var(--paper-shade);border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:12px;overflow:hidden;cursor:pointer;}
.modal-img-preview img{width:100%;height:100%;object-fit:cover;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ═══════════════ CARD MAKER ═══════════════ */
.swatch-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;}
.swatch{width:32px;height:32px;border-radius:9px;cursor:pointer;border:3px solid transparent;}
.swatch.sel{border-color:var(--gold);}

/* ═══════════════ JOURNAL LISTS ═══════════════ */
.goal-item{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);}
.goal-item:last-child{border-bottom:none;}
.goal-check{width:19px;height:19px;border-radius:5px;border:2px solid var(--gold);cursor:pointer;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:11px;}
.goal-check.done{background:var(--gold);color:#fff;}
.heart-btn{background:none;border:none;font-size:15px;cursor:pointer;opacity:.4;}
.heart-btn.loved{opacity:1;color:var(--clay);}
.log-list{list-style:none;max-height:220px;overflow-y:auto;margin-top:10px;}
.log-list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;}
.log-list li:last-child{border-bottom:none;}
.grat-entry{display:flex;gap:9px;margin-bottom:8px;}
.grat-num{width:23px;height:23px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:9px;font-family:var(--font-mono);}
.niyyah-box{background:var(--sage-soft);border-radius:var(--r-sm);padding:12px;margin-top:10px;display:none;font-size:12.5px;}
.sh-item{padding:10px 0;border-bottom:1px solid var(--line);}
.sh-item:last-child{border-bottom:none;}
.sh-actions{display:flex;gap:7px;margin-top:5px;align-items:center;}

/* ═══════════════ HADITH ═══════════════ */
.hadith-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-md);padding:16px 18px;}
.hadith-eng{font-size:12.5px;font-style:italic;line-height:1.6;opacity:.9;color:var(--ink-soft);}
.hadith-src{font-size:9.5px;font-weight:700;color:var(--ink-soft);margin-top:6px;}

/* ═══════════════ DU'A CARDS ═══════════════ */
.feed-meta{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--ink-soft);letter-spacing:.8px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.edit-dua-btn{font-size:10.5px;background:var(--gold-soft);border:none;color:var(--ink);padding:4px 10px;border-radius:12px;cursor:pointer;font-weight:600;letter-spacing:0;text-transform:none;}

/* ═══════════════ PROFILE ═══════════════ */
.profile-hero{text-align:center;padding:8px 0 4px;}
.profile-avatar{font-size:48px;}
.socials{display:flex;justify-content:center;gap:7px;margin-top:14px;flex-wrap:wrap;}
.soc-btn{font-size:11.5px;color:var(--ink-soft);text-decoration:none;font-weight:600;padding:6px 13px;border:1px solid var(--line);border-radius:18px;background:var(--paper);}
.export-row{display:flex;gap:10px;flex-wrap:wrap;}

/* ═══════════════ PLAYER ═══════════════ */
.player{position:fixed;bottom:16px;left:calc(50% + 108px);transform:translateX(-50%);width:calc(100% - 260px);max-width:560px;z-index:999;background:var(--card);border:1px solid var(--line);border-radius:40px;padding:10px 18px;box-shadow:var(--shadow);}
@media (max-width:880px){.player{left:50%;width:calc(100% - 24px);}}
.player-inner{display:flex;align-items:center;gap:11px;}
.play-btn{width:36px;height:36px;border-radius:50%;background:var(--gold);color:#fff;border:none;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.player-info{flex:1;min-width:0;cursor:pointer;}
.p-title{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-sub{font-size:9.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-bar{height:3px;background:var(--line);border-radius:2px;margin-top:4px;cursor:pointer;}
.p-fill{height:100%;background:var(--gold);border-radius:2px;width:0%;}
.wave{display:flex;align-items:center;gap:2px;}
.wave span{display:inline-block;width:2px;background:var(--gold);border-radius:1px;height:3px;}
.playing .wave span{animation:waveA .8s ease-in-out infinite;}
.playing .wave span:nth-child(2){animation-delay:.15s;}
.playing .wave span:nth-child(3){animation-delay:.3s;}
.tracklist{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.tracklist.open{max-height:220px;overflow-y:auto;margin-bottom:8px;}
.track-item{padding:7px 11px;font-size:11.5px;cursor:pointer;border-radius:9px;display:flex;align-items:center;gap:7px;}
.track-item:hover,.track-item.now{background:var(--paper-shade);}
.track-item.now{font-weight:700;}
@keyframes waveA{0%,100%{height:3px}50%{height:12px}}

.footer-note{text-align:center;margin:34px 0 10px;color:var(--ink-soft);font-size:10.5px;text-transform:uppercase;letter-spacing:1.5px;}
.footer-dua{font-family:var(--font-arabic);font-size:15px;direction:rtl;opacity:.7;margin-top:4px;color:var(--ink);}

.empty-note{font-size:11.5px;color:var(--ink-soft);text-align:center;padding:14px;background:var(--paper-shade);border-radius:var(--r-sm);}