/* Ummah sections render INSIDE the real .main scroll container, so the
       topbar (search · back · profile), sidebar and the foundation bar all
       stay live. Only the (legacy/dead) home body is swapped out. */
    body.um-on #home-legacy{display:none !important}

    #um-root{display:none}
    body.um-on #um-root{display:block}
    /* ~0.45s snappy entrance on every section change (re-triggered in JS).
       IMPORTANT: opacity-ONLY — do NOT animate transform here. animation-fill-mode
       'both' holds the final transform as an identity matrix (matrix(1,0,0,1,0,0)),
       which is NOT 'none' and therefore turns #um-root into the containing block for
       any position:fixed descendant. That collapsed the fixed reel reader to height:0
       (invisible). Keeping this opacity-only guarantees the reel fills the viewport. */
    #um-root.um-anim{animation:umFade .7s cubic-bezier(.22,.61,.36,1) both}
    @keyframes umFade{from{opacity:0}to{opacity:1}}
    @media (prefers-reduced-motion:reduce){ #um-root.um-anim{animation-duration:.01s} }

    .um-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:14px;flex-wrap:wrap}
    .um-head h1{font-size:clamp(28px,5vw,46px);font-weight:900;letter-spacing:-.02em;color:#fff;line-height:1}
    .um-head .um-eyebrow{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
    .um-head p.um-sub{font-size:13.5px;color:rgba(255,255,255,.55);margin-top:8px;max-width:560px;line-height:1.55}

    /* ── Unique surah card: medallion top (image-banner slot), Arabic core, gold meta strip ── */
    .um-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
    .um-card{
      position:relative;cursor:pointer;background:linear-gradient(180deg,#181410 0%,#0d0a07 100%);
      border-radius:14px;padding:0 0 18px;overflow:hidden;
      border:1px solid rgba(212,175,55,.10);
      box-shadow:0 4px 12px rgba(0,0,0,.35);
      transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .25s, box-shadow .35s;
      display:flex;flex-direction:column;
    }
    .um-card:hover{transform:translateY(-2px);border-color:rgba(212,175,55,.35);box-shadow:0 8px 20px rgba(0,0,0,.45)}
    /* Banner / image slot — per-surah upload goes via --bg url() */
    .um-card .um-banner{
      position:relative;height:96px;
      background:var(--bg, linear-gradient(135deg, var(--ban1,#2a2018) 0%, var(--ban2,#0e0a06) 100%));
      background-size:cover;background-position:center;
      border-bottom:1px solid rgba(212,175,55,.18);
      display:flex;align-items:flex-end;justify-content:space-between;padding:10px 14px;
      overflow:hidden;
    }
    .um-card .um-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.65) 100%);pointer-events:none}

    /* ── Image-hero variant: the image dominates the card, text floats over ── */
    .um-card.um-card-hero{padding:0;background:#000}
    .um-card.um-card-hero .um-banner.has-bg{
      height:230px;
      background-size:cover;
      background-position:center;
      border-bottom:none;
      display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
    }
    /* Stronger bottom darkening so the text below it has contrast */
    .um-card.um-card-hero .um-banner.has-bg::before{
      background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.95) 100%);
    }
    .um-card.um-card-hero .um-banner.has-bg::after{
      content:none; /* drop the old glow that pushed text further down */
    }
    /* Centerpiece Arabic + name pulled UP onto the image */
    .um-card.um-card-hero .um-name-ar{
      margin-top:-72px;position:relative;z-index:2;
      text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.65);
    }
    .um-card.um-card-hero .um-name{
      position:relative;z-index:2;margin-top:6px;
      text-shadow:0 2px 8px rgba(0,0,0,.85);
    }
    .um-card.um-card-hero .um-name-tr{
      position:relative;z-index:2;
      text-shadow:0 1px 6px rgba(0,0,0,.9);
      color:rgba(255,255,255,.75);
    }
    .um-card.um-card-hero .um-meta{
      margin:14px 14px 14px;background:rgba(0,0,0,.5);
      border-color:rgba(212,175,55,.28);backdrop-filter:blur(6px);
    }
    /* Lift the play button for image-hero cards */
    .um-card.um-card-hero .um-card-play{top:184px}
    .um-card .um-banner::after{content:'';position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:140%;height:30px;background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(212,175,55,.25), transparent 70%);filter:blur(8px);pointer-events:none}
    .um-card .um-num{
      position:relative;z-index:2;font-family:'Roboto',sans-serif;
      background:rgba(0,0,0,.55);border:1px solid rgba(212,175,55,.35);color:var(--accent);
      font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
      padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px);
    }
    .um-card .um-place{position:relative;z-index:2;font-size:10px;color:rgba(255,255,255,.85);letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}
    /* Indo-Pak Arabic centerpiece */
    .um-card .um-name-ar{
      font-family:'Scheherazade New','Amiri Quran','Amiri',serif;
      font-size:34px;line-height:1.4;color:#fff;font-weight:500;
      direction:rtl;text-align:center;margin:14px 14px 4px;
      letter-spacing:.01em;text-shadow:0 2px 18px rgba(212,175,55,.18);
    }
    .um-card .um-name{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.01em;text-align:center;margin:2px 14px 2px}
    .um-card .um-name-tr{font-size:11.5px;color:rgba(255,255,255,.48);font-weight:500;text-align:center;font-style:italic;margin:0 14px}
    /* Gold meta strip */
    .um-card .um-meta{
      margin:12px 14px 0;padding:7px 12px;border-radius:999px;
      background:linear-gradient(90deg, rgba(212,175,55,.08), rgba(212,175,55,.02));
      border:1px solid rgba(212,175,55,.16);
      display:flex;justify-content:space-between;align-items:center;
      font-size:11px;color:rgba(255,255,255,.72);font-weight:600;letter-spacing:.04em;
    }
    .um-card .um-meta b{color:var(--accent);font-weight:800}
    /* Floating play button */
    .um-card .um-card-play{
      position:absolute;right:14px;top:72px;width:42px;height:42px;border-radius:50%;
      background:linear-gradient(135deg,#F4D77E,#D4AF37);color:#000;border:none;
      display:flex;align-items:center;justify-content:center;cursor:pointer;
      box-shadow:0 8px 22px rgba(212,175,55,.45);
      opacity:0;transform:translateY(-6px) scale(.85);transition:all .3s cubic-bezier(.22,.61,.36,1);z-index:3;
    }
    .um-card:hover .um-card-play{opacity:1;transform:translateY(0) scale(1)}
    .um-card .um-card-play:hover{transform:scale(1.08)}
    /* Per-surah palette tints (rotating via CSS var) */
    .um-card[data-tint="0"]{--ban1:#3a2618;--ban2:#0e0904}
    .um-card[data-tint="1"]{--ban1:#1f2a3a;--ban2:#06080d}
    .um-card[data-tint="2"]{--ban1:#2a1a2e;--ban2:#0c060f}
    .um-card[data-tint="3"]{--ban1:#1c2f24;--ban2:#06100b}
    .um-card[data-tint="4"]{--ban1:#2e2515;--ban2:#0f0b05}
    .um-card[data-tint="5"]{--ban1:#1a1a2e;--ban2:#06060f}

    .um-skel{height:120px;border-radius:16px;background:linear-gradient(90deg,#141414,#1a1a1a,#141414);background-size:200% 100%;animation:umShim 1.4s linear infinite}
    @keyframes umShim{to{background-position:-200% 0}}

    /* ── Reciter "Voices" — unique medallion cards ────────────── */
    .um-reciter-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;margin:6px 0 10px;display:flex;align-items:center;gap:10px}
    .um-reciter-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(212,175,55,.3),transparent)}
    .um-reciter-strip{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
      padding:4px 2px 14px;
    }
    .um-reciter-pill{
      position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;
      background:#100c07;
      border:1px solid rgba(212,175,55,.10);
      color:#fff;border-radius:14px;padding:18px 12px 14px;cursor:pointer;
      font-family:'Roboto',sans-serif;text-align:center;overflow:hidden;
      transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .25s, box-shadow .3s;
    }
    .um-reciter-pill:hover{transform:translateY(-2px);border-color:rgba(212,175,55,.45);box-shadow:0 6px 16px rgba(0,0,0,.4)}
    .um-reciter-pill .um-rp-initial{
      width:54px;height:54px;border-radius:50%;
      background:radial-gradient(circle,#1a1308 0%,#0a0604 100%);
      border:1.5px solid rgba(212,175,55,.4);
      color:var(--accent);font-weight:900;font-size:22px;letter-spacing:-.02em;
      display:flex;align-items:center;justify-content:center;
      box-shadow:inset 0 0 16px rgba(212,175,55,.18), 0 4px 14px rgba(0,0,0,.4);
      transition:all .3s;position:relative;z-index:1;
    }
    .um-reciter-pill .um-rp-name{font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em;position:relative;z-index:1}
    .um-reciter-pill .um-rp-tag{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);position:relative;z-index:1;margin-top:-2px}
    .um-reciter-pill.on{border-color:var(--accent);background:linear-gradient(180deg,#1c1408 0%,#0e0905 100%);box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 0 1px var(--accent),inset 0 1px 0 rgba(255,255,255,.05)}
    .um-reciter-pill.on .um-rp-initial{background:linear-gradient(135deg,#F4D77E,#D4AF37);color:#000;border-color:transparent;box-shadow:0 0 24px rgba(212,175,55,.6)}
    .um-reciter-pill.on::after{content:'';position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

    /* Compact reciter trigger + animated bottom-sheet — replaces the old
       always-visible reciter grid so the surah list is what's seen first. */
    .um-reciter-trigger{
      display:inline-flex;align-items:center;gap:8px;margin:2px 0 16px;padding:9px 14px;
      background:linear-gradient(180deg,#141008 0%,#0a0805 100%);
      border:1px solid rgba(212,175,55,.22);border-radius:999px;color:#fff;
      font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
      transition:border-color .2s,transform .2s;
    }
    .um-reciter-trigger:hover{border-color:rgba(212,175,55,.5);transform:translateY(-1px)}
    .um-reciter-trigger .um-rt-ico{color:var(--accent);display:flex}
    .um-reciter-trigger b{color:var(--accent);font-weight:800}

    .um-reciter-sheet-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);
      opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:180;
    }
    .um-reciter-sheet-overlay.open{opacity:1;pointer-events:auto}
    .um-reciter-sheet{
      position:fixed;left:0;right:0;bottom:0;max-height:72vh;overflow-y:auto;
      background:linear-gradient(180deg,#151008 0%,#0a0805 100%);
      border-top:1px solid rgba(212,175,55,.25);
      border-radius:22px 22px 0 0;padding:10px 18px 26px;z-index:181;
      transform:translateY(105%);transition:transform .32s cubic-bezier(.22,.61,.36,1);
      box-shadow:0 -20px 60px rgba(0,0,0,.6);
    }
    .um-reciter-sheet.open{transform:translateY(0)}
    .um-reciter-sheet-handle{width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.25);margin:8px auto 14px}
    .um-reciter-sheet-head{font-size:15px;font-weight:800;color:#fff;margin-bottom:12px;text-align:center}
    .um-reciter-sheet .um-reciter-strip{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));padding:0}
    @media (min-width:640px){
      .um-reciter-sheet{left:50%;right:auto;bottom:32px;width:520px;max-width:calc(100vw - 32px);
        transform:translate(-50%,24px);opacity:0;pointer-events:none;border-radius:22px;transition:transform .28s ease,opacity .28s ease}
      .um-reciter-sheet.open{transform:translate(-50%,0);opacity:1;pointer-events:auto}
    }

    /* Read view — single surah ayah-by-ayah */
    .um-back{
      display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.14);
      color:#fff;border-radius:999px;padding:9px 18px;cursor:pointer;font-family:'Roboto',sans-serif;
      font-size:13px;font-weight:600;margin-bottom:18px;transition:all .2s
    }
    .um-back:hover{border-color:var(--accent);color:var(--accent)}

    .um-surah-hero{
      background:linear-gradient(135deg,#1a1a1a 0%,#0a0a0a 100%);
      border-radius:22px;padding:32px 28px;margin-bottom:24px;
      display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    }
    .um-surah-hero-left .um-num{font-size:11px;letter-spacing:.24em;color:var(--accent);font-weight:700;text-transform:uppercase}
    .um-surah-hero-left h2{font-size:clamp(30px,5vw,46px);font-weight:900;letter-spacing:-.02em;margin:6px 0 2px;color:#fff}
    .um-surah-hero-left .meta{font-size:13.5px;color:rgba(255,255,255,.55);margin-top:6px}
    .um-surah-hero-right{font-family:'Amiri Quran','Amiri',serif;font-size:48px;color:rgba(255,255,255,.92);direction:rtl}

    .um-toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
    .um-toolbar .um-pill{
      background:transparent;border:1.5px solid rgba(255,255,255,.16);color:#fff;
      border-radius:999px;padding:8px 16px;cursor:pointer;font-size:12.5px;font-weight:600;
      font-family:'Roboto',sans-serif;transition:all .2s
    }
    .um-toolbar .um-pill:hover{border-color:var(--accent);color:var(--accent)}
    .um-toolbar .um-pill.on{background:rgba(212,175,55,.10);border-color:var(--accent);color:var(--accent)}
    .um-toolbar .um-play-cta{
      margin-left:auto;background:#fff;color:#000;border:none;border-radius:999px;
      padding:11px 24px;cursor:pointer;font-size:13px;font-weight:800;letter-spacing:.04em;
      display:inline-flex;align-items:center;gap:8px;transition:all .2s
    }
    .um-toolbar .um-play-cta:hover{background:var(--accent);box-shadow:0 8px 22px rgba(212,175,55,.36);transform:translateY(-1px)}

    .um-bismillah{text-align:center;font-family:'Amiri Quran','Amiri',serif;font-size:34px;color:rgba(255,255,255,.85);margin:18px 0 28px;direction:rtl;letter-spacing:.02em}

    .um-ayah{
      padding:22px 4px;border-bottom:1px solid rgba(255,255,255,.06);
      display:flex;flex-direction:column;gap:14px;
    }
    .um-ayah-head{display:flex;align-items:center;gap:10px}
    .um-ayah-num{
      width:34px;height:34px;border-radius:50%;background:rgba(212,175,55,.10);color:var(--accent);
      font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
    }
    .um-ayah-actions{margin-left:auto;display:flex;gap:6px;opacity:0;transition:opacity .2s}
    .um-ayah:hover .um-ayah-actions{opacity:1}
    .um-ayah-icon{
      width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s
    }
    .um-ayah-icon:hover{border-color:var(--accent);color:var(--accent)}
    .um-ar{
      font-family:'Scheherazade New','Amiri Quran','Amiri',serif;
      font-size:38px;line-height:2.45;color:#fff;direction:rtl;text-align:right;letter-spacing:0;
      font-weight:500
    }
    .um-tr{font-size:16px;line-height:1.8;color:rgba(255,255,255,.82);font-weight:400;margin-top:4px}
    .um-tr-label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--accent);opacity:.85;margin-bottom:4px;display:block}
    .um-tr.ur{font-family:'Noto Nastaliq Urdu','Scheherazade New',serif;direction:rtl;text-align:right;font-size:19px;line-height:2.6}
    @media(max-width:768px){
      .um-ar{font-size:32px;line-height:2.3}
      .um-tr{font-size:16.5px}
      .um-tr.ur{font-size:18px;line-height:2.5}
    }

    .um-attribution{margin-top:36px;padding:18px;border-radius:12px;background:#0a0a0a;font-size:11.5px;color:rgba(255,255,255,.45);text-align:center;line-height:1.7}

    /* ── View toggle (cards vs circle list) ─────────────────── */
    .um-view-toggle{display:inline-flex;gap:4px;margin-left:auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px}
    .um-view-toggle .pill{
      background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;
      padding:6px 8px;border-radius:6px;transition:all .15s;display:flex;align-items:center;
    }
    .um-view-toggle .pill:hover{color:#fff}
    .um-view-toggle .pill.on{background:rgba(212,175,55,.15);color:var(--accent)}

    /* ── Elegant circular surah list ────────────────────────── */
    .um-grid.um-grid-circle{
      display:flex !important;flex-direction:column;gap:8px;grid-template-columns:none !important;
    }
    .um-circ{
      display:flex;align-items:center;gap:14px;
      background:linear-gradient(90deg,#111 0%,#0c0c0c 100%);
      border:1px solid rgba(255,255,255,.05);border-radius:14px;
      padding:10px 14px 10px 10px;cursor:pointer;
      transition:transform .15s, border-color .15s, background .15s;
    }
    .um-circ:hover{
      border-color:rgba(212,175,55,.35);
      transform:translateX(3px);
      background:linear-gradient(90deg,#141414 0%,#0e0e0e 100%);
    }
    .um-circ-num{
      position:relative;width:44px;height:44px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      color:var(--accent);
    }
    .um-circ-num .n{
      font-size:14px;font-weight:800;letter-spacing:-.02em;
      font-family:'Roboto',sans-serif;color:#fff;z-index:1;position:relative;
    }
    .um-circ-num::before{
      content:'';position:absolute;inset:4px;border-radius:50%;
      background:radial-gradient(circle,rgba(212,175,55,.25) 0%,rgba(212,175,55,.05) 70%,transparent 100%);
    }
    .um-circ-ring{position:absolute;inset:0;width:100%;height:100%;animation:circRingSpin 28s linear infinite}
    @keyframes circRingSpin{to{transform:rotate(360deg)}}
    @media (prefers-reduced-motion:reduce){ .um-circ-ring{animation:none} }
    .um-circ-info{flex:1;min-width:0}
    .um-circ-row{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
    .um-circ-name{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .um-circ-ar{
      font-family:'Scheherazade New','Amiri',serif;
      font-size:18px;color:rgba(255,255,255,.85);direction:rtl;flex-shrink:0;
    }
    .um-circ-meta{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:2px;letter-spacing:.02em}
    .um-circ-meta b{color:var(--accent);font-weight:700}
    .um-circ-play{
      background:var(--accent);color:#0e0b08;border:none;border-radius:50%;
      width:30px;height:30px;display:flex;align-items:center;justify-content:center;
      cursor:pointer;flex-shrink:0;transition:transform .12s;
    }
    .um-circ-play:hover{transform:scale(1.08)}
    .um-circ-chev{color:rgba(255,255,255,.32);flex-shrink:0}
    @media(max-width:520px){
      .um-circ-ar{font-size:16px}
      .um-circ-name{font-size:14px}
    }

    /* ── Hadith Bar (chat-style) ───────────────────────────── */
    .um-hadith-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
    .um-hadith-chip{
      background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.22);
      color:var(--accent);border-radius:999px;padding:7px 14px;font-size:12px;
      font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .18s;
      text-transform:lowercase;
    }
    .um-hadith-chip:hover{background:rgba(212,175,55,.18);transform:translateY(-1px)}
    /* Two-column layout: bookmarks sidebar + chat */
    .um-hadith-layout{
      display:grid;grid-template-columns:240px minmax(0, 1fr);
      gap:16px;max-width:1000px;margin:0 auto;
    }
    @media(max-width:820px){
      .um-hadith-layout{grid-template-columns:1fr;}
      .um-hadith-side{order:2}
      .um-hadith-side-list{max-height:200px}
    }
    .um-hadith-side{
      background:linear-gradient(180deg,#0c0c0c,#080808);
      border:1px solid rgba(255,255,255,.05);border-radius:16px;
      display:flex;flex-direction:column;overflow:hidden;min-height:200px;
    }
    .um-hadith-side-head{
      display:flex;align-items:center;gap:8px;
      padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);
      color:var(--accent);font-size:11.5px;font-weight:700;
      letter-spacing:.16em;text-transform:uppercase;
    }
    .um-hadith-side-list{
      flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;
      -webkit-overflow-scrolling:touch;
    }
    .um-bk-empty{
      font-size:12px;color:rgba(255,255,255,.45);text-align:center;
      padding:24px 14px;line-height:1.6;
    }
    .um-bk-item{
      position:relative;background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.05);border-radius:10px;
      padding:10px 12px;cursor:pointer;transition:all .15s;padding-right:28px;
    }
    .um-bk-item:hover{border-color:rgba(212,175,55,.25);background:rgba(212,175,55,.04)}
    .um-bk-src{font-size:10.5px;color:var(--accent);font-weight:700;letter-spacing:.05em;margin-bottom:4px}
    .um-bk-snip{font-size:12px;color:rgba(255,255,255,.7);line-height:1.45}
    .um-bk-x{
      position:absolute;top:6px;right:6px;
      background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;
      width:20px;height:20px;border-radius:50%;font-size:14px;
      display:flex;align-items:center;justify-content:center;
      transition:all .15s;
    }
    .um-bk-x:hover{background:rgba(255,255,255,.08);color:#fff}
    .um-hadith-bar{
      background:linear-gradient(180deg,#0e0e0e,#0a0a0a);
      border:1px solid rgba(255,255,255,.06);border-radius:16px;
      box-shadow:0 8px 28px rgba(0,0,0,.45);overflow:hidden;
      display:flex;flex-direction:column;min-height:480px;max-height:68vh;
    }
    .um-hadith-stream{
      flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
      scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
    }
    .um-hb{display:flex;width:100%}
    .um-hb.me{justify-content:flex-end}
    .um-hb.bot{justify-content:flex-start}
    .um-hb-msg{
      max-width:78%;padding:12px 14px;border-radius:14px;line-height:1.6;
      font-size:14px;color:#fff;animation:hbIn .22s ease;
    }
    .um-hb.me .um-hb-msg{
      background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.08));
      border:1px solid rgba(212,175,55,.28);border-bottom-right-radius:4px;
    }
    .um-hb.bot .um-hb-msg{
      background:#181818;border:1px solid rgba(255,255,255,.05);
      border-bottom-left-radius:4px;
    }
    .um-hb-ar{
      direction:rtl;font-family:'Scheherazade New','Amiri',serif;
      font-size:22px;line-height:1.9;color:#fff;margin-bottom:8px;
    }
    .um-hb-en{font-size:14px;color:rgba(255,255,255,.92);line-height:1.65}
    .um-hb-src{
      font-size:11px;color:var(--accent);margin-top:8px;letter-spacing:.05em;
      font-weight:600;
    }
    @keyframes hbIn{
      from{opacity:0;transform:translateY(6px)}
      to{opacity:1;transform:translateY(0)}
    }
    .um-hadith-compose{
      display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.06);
      background:#0a0a0a;align-items:center;flex-shrink:0;
    }
    .um-hadith-compose input{
      flex:1;background:#161616;border:1px solid rgba(255,255,255,.08);
      color:#fff;border-radius:10px;padding:11px 14px;font-size:14px;outline:none;
      font-family:inherit;transition:border-color .18s;
    }
    .um-hadith-compose input:focus{border-color:var(--accent)}
    .um-hadith-rand{
      background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.3);
      color:var(--accent);width:40px;height:40px;border-radius:10px;
      cursor:pointer;font-size:18px;transition:all .18s;flex-shrink:0;
    }
    .um-hadith-rand:hover{background:rgba(212,175,55,.22)}
    .um-hadith-send{
      background:var(--accent);color:#0e0b08;border:none;border-radius:10px;
      padding:0 16px;height:40px;font-weight:700;font-size:13px;cursor:pointer;
      letter-spacing:.04em;transition:all .18s;flex-shrink:0;
    }
    .um-hadith-send:hover{background:#e6c674}
    .um-hadith-mic{
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.75);width:40px;height:40px;border-radius:10px;
      cursor:pointer;flex-shrink:0;transition:all .18s;display:flex;align-items:center;justify-content:center;
    }
    .um-hadith-mic:hover{background:rgba(255,255,255,.08);color:#fff}
    .um-hadith-mic.listening{
      background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.5);color:#ff8a8a;
      animation:micPulse 1s ease-in-out infinite;
    }
    @keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,80,80,.4)}50%{box-shadow:0 0 0 8px rgba(255,80,80,0)}}
    /* Typing dots (loading hadith bubble) */
    .um-hb-typing{display:flex;gap:5px;padding:14px 16px}
    .um-hb-typing span{
      width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);
      animation:hbDot 1.2s ease-in-out infinite;
    }
    .um-hb-typing span:nth-child(2){animation-delay:.15s}
    .um-hb-typing span:nth-child(3){animation-delay:.3s}
    @keyframes hbDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1.1);opacity:1}}
    /* Bubble footer row: source + speak */
    .um-hb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
    .um-hb-row .um-hb-src{margin-top:0}
    .um-hb-speak{
      background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.22);
      color:var(--accent);width:26px;height:26px;border-radius:50%;
      cursor:pointer;flex-shrink:0;transition:all .18s;display:flex;align-items:center;justify-content:center;
    }
    .um-hb-speak:hover{background:rgba(212,175,55,.22);transform:scale(1.08)}
    /* Tools row (bookmark + speak side-by-side) */
    .um-hb-tools{display:flex;gap:6px;align-items:center}
    .um-hb-bm{
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.55);width:26px;height:26px;border-radius:50%;
      cursor:pointer;flex-shrink:0;transition:all .18s;display:flex;align-items:center;justify-content:center;
    }
    .um-hb-bm:hover{background:rgba(212,175,55,.18);color:var(--accent);border-color:rgba(212,175,55,.3)}
    .um-hb-bm.on{background:rgba(212,175,55,.22);color:var(--accent);border-color:rgba(212,175,55,.5)}
    @media(max-width:520px){
      .um-hb-msg{max-width:90%}
      .um-hb-ar{font-size:19px}
    }

    /* mark um-nav active state */
    .um-nav.um-active{background:rgba(212,175,55,.10) !important;color:var(--accent) !important}
    .um-nav.um-active .nav-ico{color:var(--accent);opacity:1}

    /* Forest scene inside the retro player album area */
    .um-forest-art{position:absolute;inset:0;border-radius:18px;overflow:hidden}
    .um-forest-art svg{width:100%;height:100%;display:block}

    /* Verse lines inside the player's read-along panel */
    .um-verse-line{
      padding:16px 18px;border-radius:14px;margin-bottom:10px;cursor:pointer;
      transition:background .25s var(--ease), transform .25s var(--ease);
      border:1px solid transparent;
    }
    .um-verse-line:hover{background:rgba(255,255,255,.04)}
    .um-verse-line.now{
      background:rgba(212,175,55,.12);
      border-color:rgba(212,175,55,.35);
      box-shadow:0 0 0 1px rgba(212,175,55,.18), 0 12px 28px rgba(212,175,55,.10);
    }
    .um-verse-line{position:relative}
    .um-verse-line .vn{font-size:10.5px;color:var(--accent);font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
    .um-verse-line .var{font-family:'Scheherazade New','Amiri Quran','Amiri',serif;font-size:30px;font-weight:500;line-height:2.5;color:rgba(255,255,255,.9);direction:rtl;text-align:right;margin-bottom:10px;letter-spacing:0}
    .um-verse-line.now .var{color:#fff}
    .um-verse-line .vtr{font-size:14.5px;color:rgba(255,255,255,.78);line-height:1.7;margin-top:4px}
    .um-verse-line .vtr.ur{font-family:'Noto Nastaliq Urdu','Scheherazade New',serif;direction:rtl;text-align:right;font-size:17px;line-height:2.4;color:rgba(255,255,255,.8)}
    .um-verse-line .vtr-l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--accent);opacity:.7;display:block;margin:8px 0 2px}
    /* live "where the qari is" marker — progress underline on the active ayah */
    .um-vprog{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:rgba(212,175,55,.16);overflow:hidden;opacity:0;transition:opacity .3s}
    .um-verse-line.now .um-vprog{opacity:1}
    .um-vprog::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--vp,0%);background:linear-gradient(90deg,var(--accent),var(--accent-soft,#E6C457));border-radius:3px;box-shadow:0 0 10px rgba(212,175,55,.5)}
    @media(max-width:768px){
      .um-verse-line .var{font-size:33px;line-height:2.6}
      .um-verse-line .vtr{font-size:16px}
      .um-verse-line .vtr.ur{font-size:18px}
    }

    /* ── Home hub: Salam greeting + Ayah of the Day + Daily checklist ── */
    .um-salam{display:flex;align-items:center;gap:14px;margin:4px 0 20px}
    .um-salam-avatar{width:54px;height:54px;border-radius:50%;flex-shrink:0;background:var(--bg3);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-family:'Roboto',sans-serif;font-size:20px;font-weight:700;color:var(--accent);border:2px solid rgba(212,175,55,.35);box-shadow:0 0 0 3px rgba(212,175,55,.08), 0 6px 20px rgba(0,0,0,.4)}
    .um-salam-text{flex:1;min-width:0}
    .um-salam-line{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
    .um-salam h1{font-size:clamp(20px,3.6vw,30px);font-weight:800;letter-spacing:-.015em;color:#fff;line-height:1.15}
    .um-salam h1 .um-salam-name{background:linear-gradient(135deg,#F4D77E,#D4AF37);-webkit-background-clip:text;background-clip:text;color:transparent}
    .um-salam p{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:5px;line-height:1.5;max-width:52ch}

    /* Ayah of the Day */
    .um-aotd{position:relative;margin:0 0 18px;border-radius:14px;overflow:hidden;
      background:#151009;
      border:1px solid rgba(212,175,55,.16);
      box-shadow:0 4px 14px rgba(0,0,0,.35);
      padding:18px 20px}
    .um-aotd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;position:relative;z-index:1;flex-wrap:wrap;gap:8px}
    .um-aotd-eye{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
    .um-aotd-ref{font-size:11px;color:rgba(255,255,255,.55);font-weight:600}
    .um-aotd-ar{font-family:'Scheherazade New','Amiri Quran','Amiri',serif;
      font-size:24px;line-height:2;color:#fff;direction:rtl;text-align:right;
      margin-bottom:10px;letter-spacing:0;position:relative;z-index:1;font-weight:700}
    .um-aotd-tr{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.75);position:relative;z-index:1}
    .um-aotd-cta{margin-top:12px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(212,175,55,.35);color:var(--accent);border-radius:999px;padding:7px 14px;cursor:pointer;font-family:'Roboto',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.04em;transition:all .25s;position:relative;z-index:1}
    .um-aotd-cta:hover{background:rgba(212,175,55,.1);transform:translateY(-1px)}
    @media(max-width:768px){ .um-aotd-ar{font-size:21px;line-height:1.95} .um-aotd{padding:16px 14px} }

    /* ── Daily Live-the-Deen popup (once per day on Home open) ── */
    .um-daily-popup{
      position:fixed;inset:0;z-index:850;
      background:rgba(0,0,0,.78);backdrop-filter:blur(10px);
      display:flex;align-items:center;justify-content:center;padding:20px;
      opacity:0;transition:opacity .25s ease;pointer-events:none;
    }
    .um-daily-popup.open{opacity:1;pointer-events:auto}
    .um-dp-card{
      position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
      background:linear-gradient(150deg,#0f0f0f 0%,#0a0a0a 100%);
      border:1px solid rgba(212,175,55,.22);
      border-radius:20px;padding:28px 26px 24px;
      box-shadow:0 30px 80px rgba(0,0,0,.7);
      transform:translateY(20px) scale(.96);opacity:0;
      transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
    }
    .um-daily-popup.open .um-dp-card{transform:translateY(0) scale(1);opacity:1}
    .um-dp-close{
      position:absolute;top:14px;right:14px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.65);width:30px;height:30px;border-radius:50%;
      cursor:pointer;font-size:18px;line-height:1;
      display:flex;align-items:center;justify-content:center;
      transition:all .15s;
    }
    .um-dp-close:hover{background:rgba(255,255,255,.1);color:#fff}
    .um-dp-eyebrow{
      font-size:11px;font-weight:700;color:var(--accent);
      letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;
    }
    .um-dp-greet{font-size:26px;font-weight:900;letter-spacing:-.02em;margin-bottom:18px;color:#fff;line-height:1.15}
    .um-dp-greet span{
      background:linear-gradient(135deg,#E6C457,#D4AF37);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .um-dp-quote{
      background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.18);
      border-radius:14px;padding:16px 18px;margin-bottom:22px;
    }
    .um-dp-quote-text{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.94);font-weight:400;font-style:italic}
    .um-dp-quote-src{font-size:11.5px;color:var(--accent);margin-top:8px;letter-spacing:.04em;font-weight:600}
    .um-dp-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .um-dp-list-title{font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em}
    .um-dp-counter{font-size:11.5px;color:rgba(255,255,255,.55)}
    .um-dp-counter b{color:var(--accent);font-weight:700}
    .um-dp-grid{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:22px;max-height:340px;overflow-y:auto;padding-right:4px}
    .um-dp-item{
      display:flex;align-items:flex-start;gap:12px;
      background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
      border-radius:12px;padding:11px 13px;cursor:pointer;
      transition:all .15s;text-align:left;color:inherit;
    }
    .um-dp-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
    .um-dp-item .um-dp-cb{
      width:22px;height:22px;border-radius:6px;flex-shrink:0;
      border:1.5px solid rgba(255,255,255,.2);
      display:flex;align-items:center;justify-content:center;
      transition:all .15s;background:transparent;
    }
    .um-dp-item .um-dp-cb svg{opacity:0;transition:opacity .15s}
    .um-dp-item.done .um-dp-cb{background:var(--accent);border-color:var(--accent)}
    .um-dp-item.done .um-dp-cb svg{opacity:1}
    .um-dp-item.done .um-dp-text .t{text-decoration:line-through;opacity:.6}
    .um-dp-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
    .um-dp-text .t{font-size:13.5px;font-weight:600;color:#fff;line-height:1.35}
    .um-dp-text .s{font-size:11.5px;color:rgba(255,255,255,.5);font-weight:400;line-height:1.4}
    .um-dp-actions{display:flex;gap:10px}
    .um-dp-skip{
      flex:1;background:none;border:1px solid rgba(255,255,255,.12);
      color:rgba(255,255,255,.65);border-radius:10px;padding:12px;
      font-weight:600;font-size:13px;cursor:pointer;transition:all .15s;letter-spacing:.02em;
    }
    .um-dp-skip:hover{border-color:rgba(255,255,255,.25);color:#fff}
    .um-dp-done{
      flex:1.4;background:var(--accent);color:#0e0b08;border:none;border-radius:10px;
      padding:12px;font-weight:800;font-size:13px;cursor:pointer;
      letter-spacing:.04em;transition:all .15s;
    }
    .um-dp-done:hover{background:#E6C457;transform:translateY(-1px);box-shadow:0 8px 20px rgba(212,175,55,.3)}
    @media(max-width:520px){
      .um-dp-greet{font-size:22px}
      .um-dp-quote-text{font-size:14px}
    }

    /* ── Hadith of the Day (narrower, smooth slide-open) ─────── */
    .um-hotd{
      position:relative;max-width:640px;margin:0 0 18px;
      padding:0 20px;border-radius:16px;
      background:linear-gradient(140deg,#0f0f0f 0%,#0a0a0a 100%);
      border:1px solid rgba(212,175,55,.14);
      box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
      opacity:0;transform:translateY(-8px) scaleY(.96);transform-origin:top center;
      max-height:0;overflow:hidden;
      transition:opacity .35s cubic-bezier(.22,.61,.36,1),
                 transform .55s cubic-bezier(.22,.61,.36,1),
                 max-height .55s cubic-bezier(.22,.61,.36,1),
                 padding .35s ease;
      padding-top:0;padding-bottom:0;
    }
    .um-hotd.open{
      opacity:1;transform:translateY(0) scaleY(1);
      max-height:520px;padding-top:18px;padding-bottom:16px;
    }
    .um-hotd::before{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(ellipse 80% 50% at 0% 0%, rgba(212,175,55,.07), transparent 70%);
      border-radius:inherit;
    }
    .um-hotd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative;z-index:1}
    .um-hotd-eye{
      font-size:9.5px;font-weight:800;color:var(--accent);
      letter-spacing:.2em;text-transform:uppercase;
    }
    .um-hotd-refresh{
      background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.22);
      color:var(--accent);width:26px;height:26px;border-radius:50%;
      cursor:pointer;font-size:13px;transition:all .18s;
    }
    .um-hotd-refresh:hover{background:rgba(212,175,55,.22);transform:rotate(180deg)}
    .um-hotd-ar{
      direction:rtl;font-family:'Scheherazade New','Amiri',serif;
      font-size:19px;line-height:1.85;color:#fff;margin:6px 0 10px;
    }
    .um-hotd-en{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.82);font-weight:300}
    .um-hotd-src{font-size:11px;color:var(--accent);margin-top:8px;letter-spacing:.05em;font-weight:600}
    .um-hotd-cta{
      margin-top:12px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.28);
      color:var(--accent);border-radius:8px;padding:7px 12px;font-size:11.5px;
      font-weight:700;letter-spacing:.04em;cursor:pointer;transition:all .18s;
    }
    .um-hotd-cta:hover{background:rgba(212,175,55,.22);transform:translateX(2px)}
    @media(max-width:600px){.um-hotd-ar{font-size:17px;line-height:1.8}}

    /* Daily check-list */
    .um-check{margin:0 0 20px;background:#0e0a06;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px 18px 16px}
    .um-check-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:6px}
    .um-check-head h3{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
    .um-check-head h3 small{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
    .um-check-progress{font-size:11px;color:rgba(255,255,255,.55);font-weight:600}
    .um-check-progress b{color:var(--accent);font-weight:800}
    .um-check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
    .um-check-item{display:flex;align-items:center;gap:12px;background:#141008;border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:12px 14px;cursor:pointer;transition:all .25s;text-align:left;color:#fff;font-family:'Roboto',sans-serif}
    .um-check-item:hover{border-color:rgba(212,175,55,.3);transform:translateX(2px)}
    .um-check-item .um-cb{width:24px;height:24px;border-radius:8px;border:1.5px solid rgba(255,255,255,.18);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s}
    .um-check-item .um-cb svg{opacity:0;transition:opacity .2s}
    .um-check-item.done .um-cb{background:linear-gradient(135deg,#F4D77E,#D4AF37);border-color:transparent}
    .um-check-item.done .um-cb svg{opacity:1}
    .um-check-item .um-clab{flex:1;min-width:0}
    .um-check-item .um-clab .t{font-size:13.5px;font-weight:700;color:#fff;line-height:1.2}
    .um-check-item .um-clab .s{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.5);margin-top:3px}
    .um-check-item.done .um-clab .t{color:rgba(255,255,255,.55);text-decoration:line-through;text-decoration-color:rgba(212,175,55,.4)}
    .um-check-bar{height:4px;background:rgba(255,255,255,.05);border-radius:999px;margin-top:14px;overflow:hidden}
    .um-check-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#F4D77E,#D4AF37);border-radius:999px;transition:width .6s cubic-bezier(.22,.61,.36,1);box-shadow:0 0 8px rgba(212,175,55,.45)}

    /* ── Home hub ─────────────────────────────────────────── */
    .um-continue{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.28);color:#fff;border-radius:14px;padding:11px 16px;cursor:pointer;font-family:'Roboto',sans-serif;font-weight:700;font-size:13.5px;transition:transform .2s,box-shadow .2s;margin-bottom:20px}
    .um-continue:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(212,175,55,.16)}
    .um-continue .um-cico{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .um-continue small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1px}
    .um-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px}
    .um-hub-card{position:relative;text-align:left;background:#141414;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:20px 20px;cursor:pointer;color:#fff;font-family:'Roboto',sans-serif;overflow:hidden;transition:transform .2s,background .2s,box-shadow .2s}
    .um-hub-card:hover{transform:translateY(-4px);background:#1b1b1b;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(212,175,55,.14)}
    .um-hub-card .um-hub-ico{width:40px;height:40px;border-radius:12px;background:rgba(212,175,55,.10);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
    .um-hub-card h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
    .um-hub-card p{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.55}
    .um-hub-card .um-hub-ar{position:absolute;top:18px;right:20px;font-family:'Amiri Quran','Amiri',serif;font-size:30px;color:rgba(255,255,255,.10)}

    /* ── In-section search ────────────────────────────────── */
    .um-searchbar{position:relative;margin:4px 0 18px;max-width:560px}
    .um-searchbar svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);pointer-events:none}
    .um-searchbar input{width:100%;background:#141414;border:1.5px solid rgba(255,255,255,.08);border-radius:14px;color:#fff;font-family:'Roboto',sans-serif;font-size:15px;padding:14px 16px 14px 46px;outline:none;transition:border-color .2s,background .2s}
    .um-searchbar input::placeholder{color:rgba(255,255,255,.38)}
    .um-searchbar input:focus{border-color:var(--accent);background:#181818}
    .um-quick-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:700;margin:6px 0 10px}
    .um-browse-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);border-radius:999px;padding:10px 20px;cursor:pointer;font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;margin:18px 0 4px;transition:all .2s}
    .um-browse-toggle:hover{border-color:var(--accent);color:var(--accent)}
    .um-noresults{padding:48px 20px;text-align:center;color:rgba(255,255,255,.45);font-size:14px}

    /* ════ PLAYER VISUALS ═══════════════════════════════════════
       1) Album-art card = rain-on-glass   2) Disc centered + spins
       3) Fire embers rise from the bottom of the player.
       (No more starfield / sheet-rain behind the whole player.) ═══ */

    /* ── Rain-on-glass album card ─────────────────────────────── */
    .retro-overlay .retro-art.rainy{
      background:linear-gradient(160deg,#0f141b 0%,#0a0d12 55%,#05070a 100%) !important;
      box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05) !important;
      overflow:hidden;
    }
    .retro-overlay .retro-art.rainy::before{
      content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
      background-image:
        radial-gradient(circle 6px at 22% 20%, rgba(255,255,255,.24), rgba(255,255,255,.04) 60%, transparent 72%),
        radial-gradient(circle 4px at 64% 16%, rgba(255,255,255,.18), transparent 70%),
        radial-gradient(circle 8px at 40% 58%, rgba(255,255,255,.15), transparent 72%),
        radial-gradient(circle 5px at 82% 66%, rgba(255,255,255,.18), transparent 70%),
        radial-gradient(circle 3px at 14% 78%, rgba(255,255,255,.16), transparent 70%),
        radial-gradient(circle 7px at 56% 86%, rgba(255,255,255,.13), transparent 72%),
        radial-gradient(circle 4px at 30% 38%, rgba(255,255,255,.15), transparent 70%),
        radial-gradient(circle 5px at 75% 44%, rgba(255,255,255,.15), transparent 70%);
      filter:blur(.5px);opacity:.9;
    }
    .retro-overlay .retro-art.rainy::after{
      content:'';position:absolute;inset:-20% 0;pointer-events:none;z-index:1;
      background-image:
        linear-gradient(180deg, transparent 0%, rgba(190,210,235,.5) 46%, rgba(190,210,235,0) 60%),
        linear-gradient(180deg, transparent 0%, rgba(190,210,235,.32) 50%, rgba(190,210,235,0) 64%),
        linear-gradient(180deg, transparent 0%, rgba(190,210,235,.24) 50%, rgba(190,210,235,0) 62%);
      background-size:2px 60px, 2px 90px, 1px 70px;
      background-position:18% 0, 52% 0, 80% 0;
      background-repeat:repeat-y;
      mix-blend-mode:screen;opacity:.55;
      animation:rainStreak 1.1s linear infinite;
    }
    @keyframes rainStreak{to{background-position:18% 60px, 52% 90px, 80% 70px}}
    @media (prefers-reduced-motion:reduce){ .retro-overlay .retro-art.rainy::after{animation:none;opacity:.2} }

    /* ── Disc: centered on the rainy card, spins while playing ── */
    .retro-overlay .retro-vinyl{
      left:50% !important; right:auto !important; top:50% !important;
      width:62% !important; height:62% !important;
      transform:translate(-50%,-50%) !important; z-index:4 !important;
      box-shadow:0 16px 40px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.05) !important;
      animation:vinylSpinC 9s linear infinite paused !important;
    }
    .retro-overlay.playing .retro-vinyl,
    .retro-overlay .retro-vinyl.um-spin{ animation-play-state:running !important; }
    @keyframes vinylSpinC{to{transform:translate(-50%,-50%) rotate(360deg)}}
    .retro-art{transition:transform .35s var(--ease,cubic-bezier(.22,.61,.36,1)), box-shadow .35s}

    /* ── Outer rain layer: rain on the player CONTAINER as well ── */
    .retro-art-wrap.rainy-outer{position:relative;overflow:visible}
    .retro-art-rain-outer{
      position:absolute;inset:-22% -10% -22% -10%;pointer-events:none;
      z-index:0;border-radius:24px;overflow:hidden;
    }
    .retro-art-rain-outer::before{
      content:'';position:absolute;inset:-10% 0;
      background-image:
        linear-gradient(180deg, transparent 0%, rgba(190,210,235,.28) 50%, rgba(190,210,235,0) 64%),
        linear-gradient(180deg, transparent 0%, rgba(190,210,235,.18) 50%, rgba(190,210,235,0) 64%),
        linear-gradient(180deg, transparent 0%, rgba(190,210,235,.12) 50%, rgba(190,210,235,0) 64%);
      background-size:2px 80px, 2px 110px, 1px 90px;
      background-position:8% 0, 38% 0, 72% 0;
      background-repeat:repeat-y;
      mix-blend-mode:screen;opacity:.45;
      animation:rainStreakOuter 1.6s linear infinite;
      filter:blur(.4px);
    }
    .retro-art-rain-outer::after{
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse 60% 50% at 50% 50%, transparent 38%, rgba(0,0,0,.35) 100%);
      pointer-events:none;
    }
    @keyframes rainStreakOuter{to{background-position:8% 80px, 38% 110px, 72% 90px}}
    @media (prefers-reduced-motion:reduce){ .retro-art-rain-outer::before{animation:none;opacity:.18} }

    /* ── Rotating ring around the glowing disc ────────────────── */
    .retro-art{position:relative}
    .retro-ring{
      position:absolute;left:50%;top:50%;width:72%;height:72%;
      transform:translate(-50%,-50%);z-index:3;pointer-events:none;
      border-radius:50%;
      border:1.5px dashed rgba(212,175,55,.55);
      box-shadow:inset 0 0 18px rgba(212,175,55,.15), 0 0 18px rgba(212,175,55,.12);
      animation:retroRingSpin 22s linear infinite;
    }
    .retro-ring::before{
      content:'';position:absolute;inset:6%;border-radius:50%;
      border:1px solid rgba(212,175,55,.22);
    }
    .retro-ring::after{
      content:'';position:absolute;left:50%;top:-4px;width:6px;height:6px;
      margin-left:-3px;border-radius:50%;
      background:#ffe9a3;box-shadow:0 0 12px #d4af37,0 0 22px rgba(212,175,55,.6);
    }
    .retro-overlay.playing .retro-ring{ animation-duration:9s; }
    @keyframes retroRingSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
    @media (prefers-reduced-motion:reduce){ .retro-ring{animation:none} }

    /* ── Fire embers rising from the bottom of the player ─────── */
    /* IMPORTANT: no mix-blend-mode anywhere — it silently no-ops on Brave/
       Chromium when the parent has overflow:hidden + z-index (isolation), so
       the particles were being drawn but composited invisibly. Solid vivid
       orange + strong drop-shadow guarantees visibility on every browser. */
    .retro-embers{position:absolute;left:0;right:0;top:0;bottom:0;height:100%;z-index:6;pointer-events:none;overflow:hidden}
    .retro-embers::before{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;background:radial-gradient(ellipse 95% 100% at 50% 100%, rgba(255,130,45,.55), rgba(255,80,20,.22) 42%, transparent 72%);filter:blur(10px)}
    .retro-embers::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24%;background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,200,110,.5), transparent 72%);filter:blur(6px)}
    .retro-embers .pe{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;
      background:#ffb45a;
      box-shadow:0 0 8px 2px #fff2c8, 0 0 20px 4px rgba(255,120,40,.55);
      animation:peRise linear infinite;opacity:0;will-change:transform,opacity}
    @keyframes peRise{
      0%   {transform:translate3d(0,0,0) scale(.6);opacity:0}
      6%   {opacity:1}
      55%  {opacity:.95}
      100% {transform:translate3d(var(--dx,0px),-105vh,0) scale(.15);opacity:0}
    }
    @media (prefers-reduced-motion:reduce){ .retro-embers .pe{animation-duration:30s !important;opacity:.5 !important} }

    /* hover/transition polish on player controls */
    .retro-btn,.retro-icon-btn,.um-tr-player,.retro-speed,.retro-tab{transition:transform .25s cubic-bezier(.22,.61,.36,1), background .25s, color .25s, box-shadow .25s !important}
    .retro-btn:hover{transform:translateY(-2px) scale(1.04)}
    .retro-btn.play:hover{transform:scale(1.07)}
    .retro-icon-btn:hover{transform:scale(1.10)}
    .um-tr-player:hover{transform:translateY(-1px)}
    .um-verse-line{transition:background .25s, transform .25s, box-shadow .25s, border-color .25s !important}
    .um-verse-line:hover{transform:translateX(4px)}

    /* player translation read-along button */
    .um-tr-player{background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.28);border-radius:999px;color:var(--accent);cursor:pointer;padding:0 16px;height:44px;font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;transition:all .2s;white-space:nowrap}
    .um-tr-player:hover{background:rgba(212,175,55,.16)}

    /* floating reopen-player button (replaces the old mini-bar) */
    .reopen-fab{position:fixed;right:18px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:210;
      width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#E6C457,#D4AF37);color:#000;box-shadow:0 10px 30px rgba(212,175,55,.4),0 0 0 1px rgba(0,0,0,.2);
      animation:fabIn .3s var(--ease,cubic-bezier(.22,.61,.36,1)) both}
    .reopen-fab.show{display:flex}
    .reopen-fab::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(212,175,55,.4);animation:fabPulse 2s ease-out infinite}
    @keyframes fabIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
    @keyframes fabPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}

    /* mini-bar retired (replaced by the reopen-fab) */
    #mini-bar{display:none !important}

    /* ── App-wide fire-ember signature (rises from bottom 0→30%) ──
       Pure-CSS particles + heat glow, GPU-only transforms. */
    .um-embers{position:fixed;left:0;right:0;bottom:0;height:40vh;min-height:320px;pointer-events:none;z-index:0;overflow:hidden}
    .um-embers::before{content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse 75% 100% at 50% 100%, rgba(255,120,40,.32), rgba(255,80,20,.12) 38%, transparent 70%);
      filter:blur(7px);opacity:1;mix-blend-mode:screen}
    .um-embers::after{content:'';position:absolute;left:0;right:0;bottom:0;height:18%;
      background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,180,90,.22), transparent 70%);
      mix-blend-mode:screen;filter:blur(4px)}
    .um-embers .ember{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;
      background:#ffb45a;
      box-shadow:0 0 8px 2px #fff2c8, 0 0 20px 4px rgba(255,120,40,.55);
      animation:ember-rise linear infinite;will-change:transform,opacity;opacity:0}
    @keyframes ember-rise{
      0%   {transform:translate3d(0,0,0) scale(.6);opacity:0}
      8%   {opacity:1}
      55%  {opacity:.85}
      100% {transform:translate3d(var(--dx,0px),-110vh,0) scale(.2);opacity:0}
    }
    @media (prefers-reduced-motion:reduce){ .um-embers .ember{animation-duration:24s !important; opacity:.4 !important} }
    /* Stop paying for compositing/rasterizing embers while the tab is
       backgrounded — they were previously running (and costing CPU/GPU)
       indefinitely even when the app wasn't visible. */
    body.um-tab-hidden .um-embers .ember, body.um-tab-hidden .retro-embers .pe{animation-play-state:paused}
    /* Embers sit at z-0 behind everything; make the scroll area transparent so the
       glow shows at the bottom. Do NOT touch .panel/.modal/.overlay positioning —
       they are already fixed/positioned with their own z-index. */
    .main{background:transparent}

    /* ── Online/Offline indicator (chip in the topbar) ── */
    .net-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text2);margin-left:6px;flex-shrink:0;transition:all .25s}
    .net-chip .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
    body.is-offline .net-chip{background:rgba(255,90,60,.10);border-color:rgba(255,90,60,.35);color:#ffb39a}
    body.is-offline .net-chip .dot{background:#ff6a3c;box-shadow:0 0 8px #ff6a3c}
    @media(max-width:480px){ .net-chip{font-size:0;padding:5px;gap:0} .net-chip .dot{width:8px;height:8px} }

    /* ═══════════════════════════════════════════════════════════
       REEL-STYLE QURAN READER — each ayah is a swipeable page.
       Vertical CSS scroll-snap replaces the old "wall of text" view.
       ═══════════════════════════════════════════════════════════ */
    .um-reel-loading{padding:80px 0;text-align:center;color:rgba(255,255,255,.55);font-family:'Roboto',sans-serif;letter-spacing:.06em}
    /* Fade to transparent toward the bottom so the app-wide fire embers glow up
       INTO the reel — that's why they're now bumped to z:225 above this bg. */
    .um-reel{position:fixed;inset:0;background:radial-gradient(1200px 700px at 50% -10%,rgba(212,175,55,.09),transparent 60%),linear-gradient(180deg,#070605 0%,#0a0806 45%,rgba(15,10,7,.55) 85%,rgba(20,12,6,.15) 100%);z-index:220;display:flex;flex-direction:column;overflow:hidden}
    .um-reel-topbar{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(212,175,55,.10);background:rgba(10,8,6,.75);backdrop-filter:blur(18px);z-index:5}
    .um-reel-back{background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.20);color:var(--cream);border-radius:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}
    .um-reel-back:hover{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.45)}
    .um-reel-titleblock{flex:1;min-width:0;text-align:center;overflow:hidden}
    .um-reel-surah{font-family:'Roboto',sans-serif;font-weight:600;color:var(--cream);font-size:15px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .um-reel-meta{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

    .um-script-menu{position:absolute;top:calc(100% + 6px);right:12px;min-width:260px;background:rgba(14,11,9,.98);border:1px solid rgba(212,175,55,.22);border-radius:14px;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.7);opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:opacity .18s,transform .18s;z-index:10}
    .um-script-menu.open{opacity:1;transform:none;pointer-events:auto}
    .um-sm-lab{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;padding:8px 10px 4px;font-weight:700}
    .um-sm-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;background:transparent;border:1px solid transparent;color:var(--cream);text-align:left;padding:9px 10px;border-radius:9px;cursor:pointer;font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;transition:all .18s}
    .um-sm-opt span{font-weight:400;font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.02em}
    .um-sm-opt:hover{background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.22)}
    .um-sm-opt.on{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.4);color:var(--accent)}

    .um-reel-stage{flex:1;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .um-reel-stage::-webkit-scrollbar{display:none}
    .um-reel-slide{scroll-snap-align:start;scroll-snap-stop:always;min-height:calc(100dvh - 68px);display:flex;flex-direction:column;justify-content:center;position:relative;padding:44px 20px 60px;box-sizing:border-box}
    .um-reel-badge{position:absolute;top:18px;left:20px;background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.28);color:var(--accent);padding:5px 12px;border-radius:999px;font-family:'Roboto',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

    .um-reel-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-right:78px;max-width:960px;margin:0 auto;width:100%;box-sizing:border-box}
    .um-reel-ar{font-family:'Scheherazade New','Amiri','Traditional Arabic',serif;font-weight:700;font-size:var(--um-reel-ar-size,clamp(30px,6vw,52px));line-height:2;text-align:right;direction:rtl;color:#ffffff;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 24px rgba(212,175,55,.18);cursor:pointer;transition:color .2s,font-size .2s}
    .um-reel-ar:hover{color:#fff}
    .um-reel-ar.with-wbw{color:rgba(255,245,214,.55)}

    /* Word-by-word row — hidden until user taps the Arabic */
    .um-wbw{display:none;flex-wrap:wrap-reverse;flex-direction:row-reverse;justify-content:flex-start;gap:8px 10px;padding:16px 0 4px;border-top:1px dashed rgba(212,175,55,.18)}
    .um-reel-ar.with-wbw + .um-wbw{display:flex}
    .um-w{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.14);border-radius:10px;min-width:56px;transition:all .18s;cursor:default}
    .um-w:hover{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.35);transform:translateY(-2px)}
    .um-w-ar{font-family:'Scheherazade New','Amiri',serif;font-weight:600;font-size:22px;color:#ffffff;direction:rtl;line-height:1.2}
    .um-w-en{font-family:'Roboto',sans-serif;font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.02em;text-align:center;max-width:110px}

    .um-reel-tr{font-family:'Roboto',sans-serif;font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:640px;margin:0 auto}
    .um-reel-tr .um-tr{margin:6px 0;color:rgba(255,255,255,.82)}
    .um-reel-tr .um-tr.ur{font-family:'Noto Nastaliq Urdu',serif;direction:rtl;text-align:right;font-size:17px;line-height:2}
    .um-reel-tr .um-tr-label{display:inline-block;font-size:10px;color:rgba(212,175,55,.7);letter-spacing:.1em;text-transform:uppercase;margin-right:8px;font-weight:700}
    .um-reel-tr-off{font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase}

    /* Right rail — TikTok-style vertical action stack */
    .um-reel-rail{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:3}
    .um-reel-rbtn{background:rgba(20,15,10,.72);border:1px solid rgba(212,175,55,.22);color:var(--cream);width:56px;height:60px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:all .2s;padding:0;backdrop-filter:blur(6px)}
    .um-reel-rbtn span{font-family:'Roboto',sans-serif;font-size:9px;letter-spacing:.05em;color:rgba(255,255,255,.7);font-weight:600}
    .um-reel-rbtn:hover{background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.55);transform:translateY(-2px)}
    .um-reel-rbtn.on{color:var(--accent);border-color:rgba(212,175,55,.55);background:rgba(212,175,55,.14)}

    /* Hero slide (before ayah 1) */
    .um-reel-hero{align-items:center;justify-content:center;text-align:center;gap:14px;padding:60px 24px}
    .um-reel-hero-eye{font-size:11px;color:rgba(212,175,55,.7);letter-spacing:.16em;text-transform:uppercase;font-weight:700}
    .um-reel-hero-name{font-family:'Roboto',sans-serif;font-size:clamp(36px,6vw,56px);font-weight:700;color:var(--cream);letter-spacing:-.01em;margin:6px 0}
    .um-reel-hero-ar{font-family:'Scheherazade New',serif;font-size:clamp(38px,7vw,72px);color:var(--accent);direction:rtl;line-height:1.4}
    .um-reel-hero-bism{font-family:'Scheherazade New',serif;font-size:clamp(22px,4vw,32px);color:#fff5d6;direction:rtl;margin-top:14px}
    .um-reel-hero-hint{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;margin-top:20px;display:flex;align-items:center;gap:6px}

    .um-reel-attrib{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:9px;color:rgba(255,255,255,.28);letter-spacing:.06em;padding:6px 12px;pointer-events:none}

    @media (max-width:640px){
      .um-reel-slide{padding:52px 16px 56px}
      .um-reel-body{padding-right:70px;gap:16px}
      .um-reel-rail{right:8px;gap:10px}
      .um-reel-rbtn{width:50px;height:54px;border-radius:14px}
      .um-reel-ar{font-size:var(--um-reel-ar-size,clamp(26px,7vw,36px));line-height:1.9}
      .um-reel-tr{font-size:14px}
    }

    /* ── Daily "story" strip on the Home hub ── */
    .um-story-strip{display:flex;gap:14px;overflow-x:auto;padding:14px 4px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px 6px;padding-left:20px;padding-right:20px}
    .um-story-strip::-webkit-scrollbar{display:none}
    .um-story{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:none;border:none;padding:0;font-family:'Roboto',sans-serif}
    .um-story-ring{width:68px;height:68px;border-radius:50%;padding:2.5px;background:conic-gradient(from 180deg,#ff9a3c,#d4af37,#ff5e2a,#ffb64d,#d4af37);position:relative;transition:transform .18s}
    .um-story:hover .um-story-ring{transform:scale(1.06)}
    .um-story-ring.done{background:linear-gradient(135deg,#22c55e,#0d8f42)}
    .um-story-ring::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:#0a0806;z-index:0}
    .um-story-inner{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(212,175,55,.24),rgba(20,15,10,.9));display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:22px}
    .um-story-ring.done .um-story-inner{color:#8affab}
    .um-story-label{font-size:10.5px;color:rgba(255,255,255,.72);letter-spacing:.02em;max-width:80px;text-align:center;line-height:1.25;font-weight:500}
    .um-story-ring.done + .um-story-label{color:rgba(255,255,255,.42);text-decoration:line-through}

    /* ── Quran-read timer chip on Home ── */
    .um-timepill{display:inline-flex;align-items:center;gap:8px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.28);color:var(--accent);border-radius:999px;padding:6px 14px;font-family:'Roboto',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;margin-top:12px}
    .um-timepill svg{opacity:.85}

    /* When the reel or Majlis is open, the app chrome must step aside so the
       full-screen overlay truly owns the viewport (otherwise the sidebar's
       fixed positioning at z-index:100 draws OVER our overlay, which lives
       inside .main's stacking context capped at z-index:1). */
    body.um-majlis-on .sidebar, body.um-reel-on .sidebar,
    body.um-majlis-on .topbar,  body.um-reel-on .topbar,
    body.um-majlis-on .bottom-nav, body.um-reel-on .bottom-nav,
    body.um-majlis-on .reopen-fab, body.um-reel-on .reopen-fab,
    body.um-majlis-on .mini-bar,   body.um-reel-on .mini-bar { display:none !important }
    /* Keep app-wide embers rendering IN the reel — they're the whole point of
       "read with the fire signature." Bump their z above the reel bg. */
    body.um-reel-on .um-embers { z-index:225 !important; height:38vh !important }
    body.um-majlis-on .main, body.um-reel-on .main { margin-left:0 !important; padding-bottom:0 !important }

    /* ═══════════════════════════════════════════════════════════
       THE MAJLIS — full-screen living hadith library ("Rawi")
       ═══════════════════════════════════════════════════════════ */
    .um-majlis{position:fixed;inset:0;z-index:230;display:grid;grid-template-columns:300px 1fr;
      background:radial-gradient(1100px 700px at 20% -10%,rgba(212,175,55,.08),transparent 55%),#070605;
      font-family:'Roboto',sans-serif;animation:umMajIn .3s cubic-bezier(.22,.61,.36,1)}
    @keyframes umMajIn{from{opacity:0}to{opacity:1}}

    /* ── Library rail ── */
    .um-lib{background:#0c0a08;border-right:1px solid rgba(212,175,55,.12);display:flex;flex-direction:column;min-height:0}
    .um-lib-scrim{display:none}
    .um-lib-head{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
    .um-lib-brand{flex:1;display:flex;align-items:center;gap:10px}
    .um-lib-mark{font-size:20px;color:var(--accent);letter-spacing:-2px}
    .um-lib-brand b{display:block;font-size:15px;color:var(--cream);font-weight:700;letter-spacing:.01em}
    .um-lib-brand small{display:block;font-size:10.5px;color:rgba(255,255,255,.5)}
    .um-lib-close-m{display:none;background:rgba(255,255,255,.06);border:none;color:var(--cream);width:32px;height:32px;border-radius:9px;font-size:20px;cursor:pointer}
    .um-lib-new{margin:0 14px 12px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.06));border:1px solid rgba(212,175,55,.35);color:var(--accent);border-radius:12px;padding:11px;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:all .18s}
    .um-lib-new:hover{background:rgba(212,175,55,.2);transform:translateY(-1px)}
    .um-lib-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0 14px 14px}
    .um-lib-stats>div{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 6px;text-align:center}
    .um-lib-stats b{display:block;font-size:19px;color:var(--accent);font-weight:800;line-height:1}
    .um-lib-stats span{display:block;font-size:9.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
    .um-lib-tabs{display:flex;gap:4px;margin:0 14px 8px;background:rgba(255,255,255,.03);border-radius:10px;padding:4px}
    .um-lib-tabs button{flex:1;background:transparent;border:none;color:rgba(255,255,255,.6);font-family:inherit;font-size:12px;font-weight:600;padding:8px;border-radius:8px;cursor:pointer;transition:all .16s}
    .um-lib-tabs button.on{background:rgba(212,175,55,.16);color:var(--accent)}
    .um-lib-panel{display:none;flex:1;min-height:0;overflow-y:auto;padding:4px 10px 14px;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
    .um-lib-panel.on{display:block}
    .um-lib-panel::-webkit-scrollbar{width:5px} .um-lib-panel::-webkit-scrollbar-thumb{background:rgba(212,175,55,.25);border-radius:6px}
    .um-lib-threads{display:flex;flex-direction:column;gap:4px}
    .um-lib-thread{position:relative;display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:10px 30px 10px 12px;cursor:pointer;transition:all .16s}
    .um-lib-thread:hover{background:rgba(255,255,255,.04)}
    .um-lib-thread.on{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.28)}
    .um-lib-tt{display:block;font-size:13px;color:var(--cream);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .um-lib-tmeta{display:block;font-size:10.5px;color:rgba(255,255,255,.42);margin-top:3px}
    .um-lib-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.3);font-size:17px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .16s}
    .um-lib-x:hover{background:rgba(255,90,60,.18);color:#ff8a6a}
    .um-lib-empty{padding:24px 14px;text-align:center;font-size:12px;color:rgba(255,255,255,.4);line-height:1.6}
    .um-lib-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.05);font-size:9.5px;color:rgba(255,255,255,.35);letter-spacing:.02em;line-height:1.5}

    /* saved list inside library (reuses bookmark item styles) */
    .um-hadith-side-list{display:flex;flex-direction:column;gap:8px}
    .um-bk-item{position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:11px 30px 11px 12px;cursor:pointer;transition:all .16s}
    .um-bk-item:hover{border-color:rgba(212,175,55,.3);background:rgba(212,175,55,.05)}
    .um-bk-src{font-size:10.5px;color:var(--accent);font-weight:600;letter-spacing:.02em}
    .um-bk-snip{font-size:12px;color:rgba(255,255,255,.72);line-height:1.5;margin-top:3px}
    .um-bk-x{position:absolute;right:7px;top:9px;background:none;border:none;color:rgba(255,255,255,.3);font-size:16px;cursor:pointer;width:20px;height:20px;border-radius:6px}
    .um-bk-x:hover{background:rgba(255,90,60,.18);color:#ff8a6a}
    .um-bk-empty{padding:24px 14px;text-align:center;font-size:12px;color:rgba(255,255,255,.4);line-height:1.6}

    /* ── Chat column ── */
    .um-maj-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
    .um-maj-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(212,175,55,.10);background:rgba(10,8,6,.6);backdrop-filter:blur(12px)}
    .um-maj-iconbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--cream);width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .18s}
    .um-maj-iconbtn:hover{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.35);color:var(--accent)}
    .um-maj-libbtn{display:none}
    .um-maj-persona{flex:1;display:flex;align-items:center;gap:11px;min-width:0}
    .um-maj-avi{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#E6C457,#8b6b1e);color:#0a0806;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .um-maj-avi svg{width:21px;height:21px}
    .um-maj-pt{min-width:0}
    .um-maj-pt b{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--cream);font-weight:700}
    .um-maj-pt small{display:block;font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .um-maj-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:umMajPulse 2s ease-in-out infinite}
    @keyframes umMajPulse{0%,100%{opacity:1}50%{opacity:.4}}

    .um-hb-stream{flex:1;overflow-y:auto;padding:26px 20px;display:flex;flex-direction:column;gap:18px;min-height:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
    .um-hb-stream::-webkit-scrollbar{width:7px} .um-hb-stream::-webkit-scrollbar-thumb{background:rgba(212,175,55,.28);border-radius:6px}
    .um-hb-turn{display:flex;gap:13px;max-width:760px;width:100%;margin:0 auto;animation:umTurnIn .3s ease}
    @keyframes umTurnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
    .um-hb-turn.me{flex-direction:row-reverse}
    .um-hb-avi{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Roboto',sans-serif;font-weight:700;font-size:13px}
    .um-hb-avi.bot{background:linear-gradient(135deg,#E6C457,#8b6b1e);color:#0a0806}
    .um-hb-avi.bot svg{width:19px;height:19px}
    .um-hb-avi.me{background:rgba(255,255,255,.09);color:var(--cream);border:1px solid rgba(255,255,255,.16)}
    .um-hb-bubble{flex:1;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 18px;color:var(--cream);font-size:14.5px;line-height:1.68;max-width:100%;overflow:hidden}
    .um-hb-turn.me .um-hb-bubble{background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.24);flex:0 1 auto;max-width:78%}
    .um-hb-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:10px}
    .um-g-sahih{background:rgba(74,222,128,.14);color:#7ff0a8;border:1px solid rgba(74,222,128,.3)}
    .um-g-hasan{background:rgba(212,175,55,.16);color:var(--accent);border:1px solid rgba(212,175,55,.34)}
    .um-g-daif{background:rgba(255,140,90,.14);color:#ffb694;border:1px solid rgba(255,140,90,.3)}
    .um-g-auth{background:rgba(160,190,255,.12);color:#bcd0ff;border:1px solid rgba(160,190,255,.28)}
    .um-hb-ar{font-family:'Scheherazade New','Amiri',serif;direction:rtl;text-align:right;font-size:25px;line-height:2;color:#fff5d6;margin-bottom:12px;letter-spacing:0}
    .um-hb-en{color:var(--cream);font-size:14.5px;line-height:1.7}
    .um-hb-cite{font-size:11.5px;color:var(--accent);opacity:.85;letter-spacing:.02em;margin-top:12px;font-weight:600}
    .um-hb-relhint{font-size:11px;color:rgba(255,255,255,.5);margin-bottom:8px;letter-spacing:.02em}
    .um-hb-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(212,175,55,.1)}
    .um-hb-actions button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.68);padding:6px 11px;border-radius:9px;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .16s}
    .um-hb-actions button svg{width:13px;height:13px}
    .um-hb-actions button:hover{background:rgba(212,175,55,.1);color:var(--accent);border-color:rgba(212,175,55,.3);transform:translateY(-1px)}
    .um-hb-actions button.on{color:var(--accent);background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.4)}

    /* Explain / Amal note bubble */
    .um-hb-note{background:rgba(212,175,55,.055);border-color:rgba(212,175,55,.2)}
    .um-hb-amal{margin-top:12px;padding:12px 14px;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.22);border-radius:12px;font-size:13.5px;line-height:1.6;color:#dfffe9}
    .um-hb-amal-lab{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7ff0a8;margin-bottom:5px}

    .um-hb-typing{display:inline-flex;gap:5px;align-items:center;padding:6px 2px}
    .um-hb-typing span{width:7px;height:7px;border-radius:50%;background:rgba(212,175,55,.7);animation:umHbBlink 1.2s infinite}
    .um-hb-typing span:nth-child(2){animation-delay:.2s}
    .um-hb-typing span:nth-child(3){animation-delay:.4s}
    @keyframes umHbBlink{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}}

    /* Welcome / mood check-in */
    .um-maj-welcome{max-width:600px;margin:auto;text-align:center;padding:30px 20px}
    .um-maj-wmark{width:64px;height:64px;border-radius:20px;margin:0 auto 20px;background:linear-gradient(135deg,#E6C457,#8b6b1e);color:#0a0806;display:flex;align-items:center;justify-content:center}
    .um-maj-wmark svg{width:32px;height:32px}
    .um-maj-welcome h2{font-size:clamp(22px,3.4vw,30px);font-weight:800;color:#fff;letter-spacing:-.01em}
    .um-maj-welcome h2 span{background:linear-gradient(135deg,#F4D77E,#D4AF37);-webkit-background-clip:text;background-clip:text;color:transparent}
    .um-maj-welcome p{font-size:14px;color:rgba(255,255,255,.62);line-height:1.65;margin:10px auto 0;max-width:460px}
    .um-maj-moods{margin-top:26px}
    .um-maj-mlab{font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:12px}
    .um-maj-mrow{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
    .um-maj-mrow button{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.22);color:var(--cream);padding:10px 16px;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
    .um-maj-mrow button .e{font-size:17px}
    .um-maj-mrow button:hover{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.5);transform:translateY(-2px)}

    /* Composer */
    .um-maj-composer{border-top:1px solid rgba(212,175,55,.12);background:rgba(10,8,6,.7);backdrop-filter:blur(12px)}
    .um-hb-suggest{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 4px;justify-content:center;max-width:820px;margin:0 auto}
    .um-hb-chip{background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.22);color:var(--cream);padding:7px 14px;border-radius:999px;font-family:inherit;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:all .18s}
    .um-hb-chip:hover{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.5);color:var(--accent);transform:translateY(-1px)}
    .um-hb-compose{display:flex;align-items:flex-end;gap:10px;padding:12px 20px 16px;max-width:820px;margin:0 auto;width:100%;box-sizing:border-box}
    .um-hb-inputwrap{flex:1;position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.24);border-radius:16px;padding:12px 14px;transition:border-color .18s,box-shadow .18s}
    .um-hb-inputwrap:focus-within{border-color:rgba(212,175,55,.55);box-shadow:0 0 0 3px rgba(212,175,55,.08)}
    .um-hb-input{width:100%;background:transparent;border:none;outline:none;color:var(--cream);font-family:inherit;font-size:14.5px;resize:none;min-height:22px;max-height:140px;line-height:1.5}
    .um-hb-input::placeholder{color:rgba(255,255,255,.4)}
    .um-hb-mic,.um-hb-send{width:46px;height:46px;border-radius:14px;border:1px solid rgba(212,175,55,.28);background:rgba(212,175,55,.1);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s}
    .um-hb-mic:hover,.um-hb-send:hover{background:rgba(212,175,55,.22);transform:translateY(-1px)}
    .um-hb-mic.listening{background:#ff4444;color:#fff;border-color:#ff4444;animation:umMic 1.2s ease-in-out infinite}
    .um-hb-send{background:linear-gradient(135deg,#E6C457,#D4AF37);color:#0a0806;border-color:transparent}
    @keyframes umMic{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,68,68,.6)}50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(255,68,68,0)}}

    /* Tablet / mobile: library becomes a slide-in drawer */
    @media (max-width:900px){
      .um-majlis{grid-template-columns:1fr}
      .um-maj-libbtn{display:flex}
      .um-lib{position:absolute;top:0;bottom:0;left:0;width:min(86vw,320px);z-index:6;transform:translateX(-105%);transition:transform .28s cubic-bezier(.22,.61,.36,1);box-shadow:20px 0 60px rgba(0,0,0,.6)}
      .um-lib.open{transform:translateX(0) !important}
      .um-lib-scrim{display:block;position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .28s}
      .um-lib.open + .um-lib-scrim{opacity:1;pointer-events:auto}
      .um-lib-close-m{display:flex}
    }
    @media (max-width:640px){
      .um-hb-stream{padding:18px 12px;gap:14px}
      .um-hb-bubble{padding:14px}
      .um-hb-ar{font-size:21px;line-height:1.9}
      .um-hb-compose{padding:10px 12px 14px}
      .um-hb-suggest{padding:12px 12px 2px}
      .um-maj-top{padding:12px 14px}
    }

    /* ═══════════════════════════════════════════════════════════
       SETTINGS PANEL — v7 mockup (sidebar + right pane + rows)
       ═══════════════════════════════════════════════════════════ */
    .um-settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:800;display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px);padding:24px}
    .um-settings-overlay.open{display:flex;animation:umSetIn .18s ease}
    @keyframes umSetIn{from{opacity:0}to{opacity:1}}
    .um-settings-card{width:100%;max-width:1080px;height:min(720px,92vh);background:#0a0806;border:1px solid rgba(212,175,55,.18);border-radius:22px;display:grid;grid-template-columns:280px 1fr;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7)}

    .um-settings-side{background:#0e0b08;border-right:1px solid rgba(212,175,55,.12);display:flex;flex-direction:column;padding:22px 16px}
    .um-settings-shead{display:flex;align-items:center;gap:12px;margin-bottom:22px;padding:0 6px}
    .um-settings-close{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:var(--cream);width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;flex-shrink:0}
    .um-settings-close:hover{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.35)}
    .um-settings-stitle b{display:block;font-family:'Roboto',sans-serif;font-size:19px;font-weight:700;color:var(--cream);letter-spacing:-.01em}
    .um-settings-stitle small{display:block;font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.02em;margin-top:1px}

    .um-settings-nav{display:flex;flex-direction:column;gap:2px}
    .um-settings-nitem{display:flex;align-items:center;gap:12px;background:transparent;border:1px solid transparent;color:rgba(255,255,255,.72);padding:12px 14px;border-radius:12px;cursor:pointer;font-family:'Roboto',sans-serif;font-size:13.5px;font-weight:500;text-align:left;transition:all .16s;text-decoration:none}
    .um-settings-nitem .um-si{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.65);transition:all .16s}
    .um-settings-nitem span:nth-child(2){flex:1}
    .um-settings-nitem .um-sc{color:rgba(255,255,255,.35);font-size:16px}
    .um-settings-nitem:hover{background:rgba(255,255,255,.03);color:var(--cream)}
    .um-settings-nitem:hover .um-si{background:rgba(212,175,55,.10);color:var(--accent)}
    .um-settings-nitem.active{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.32);color:var(--accent)}
    .um-settings-nitem.active .um-si{background:rgba(212,175,55,.22);color:#000}
    .um-settings-nitem.active .um-si svg{stroke:var(--accent)}
    .um-settings-nitem.active .um-sc{color:var(--accent)}
    .um-settings-nsep{height:1px;background:rgba(255,255,255,.06);margin:14px 8px}

    .um-settings-main{padding:28px 30px;overflow-y:auto;background:#0a0806}
    .um-pane-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
    .um-pane-head .um-ph-ico{width:44px;height:44px;border-radius:14px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.32);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
    .um-pane-head h2{font-family:'Roboto',sans-serif;font-size:19px;font-weight:700;color:var(--cream);letter-spacing:-.01em}
    .um-pane-head p{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}

    .um-pane-list{display:flex;flex-direction:column;gap:10px}
    .um-pane-row{display:flex;align-items:center;gap:14px;background:#0e0b08;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px;transition:border-color .16s}
    .um-pane-row:hover{border-color:rgba(212,175,55,.22)}
    .um-pane-row .um-pr-ico{width:38px;height:38px;border-radius:10px;background:rgba(212,175,55,.10);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .um-pane-row .um-pr-txt{flex:1;min-width:0}
    .um-pane-row .um-pr-txt b{display:block;font-family:'Roboto',sans-serif;font-size:13.5px;font-weight:600;color:var(--cream)}
    .um-pane-row .um-pr-txt small{display:block;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:2px}
    .um-pane-row .um-pr-ctl{flex-shrink:0}

    /* dropdown control (native select styled) */
    .um-sel{background:#141008;border:1px solid rgba(212,175,55,.22);color:var(--cream);border-radius:10px;padding:8px 32px 8px 12px;font-family:'Roboto',sans-serif;font-size:13px;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:170px;transition:border-color .16s}
    .um-sel:hover,.um-sel:focus{border-color:rgba(212,175,55,.55);outline:none}

    /* segmented toggle (Indo | Pak) */
    .um-seg{display:inline-flex;background:#141008;border:1px solid rgba(212,175,55,.22);border-radius:10px;overflow:hidden}
    .um-seg button{background:transparent;border:none;color:rgba(255,255,255,.7);font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;padding:8px 18px;cursor:pointer;transition:all .16s;min-width:60px}
    .um-seg button.on{background:rgba(212,175,55,.28);color:var(--accent)}

    /* switch toggle */
    .um-switch{width:44px;height:24px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);position:relative;cursor:pointer;transition:all .2s}
    .um-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.7);transition:all .2s}
    .um-switch.on{background:linear-gradient(135deg,#E6C457,#D4AF37);border-color:transparent}
    .um-switch.on::after{left:22px;background:#000}

    /* stepper (font size) */
    .um-step{display:inline-flex;align-items:center;background:#141008;border:1px solid rgba(212,175,55,.22);border-radius:10px;overflow:hidden}
    .um-step button{background:transparent;border:none;color:var(--cream);width:32px;height:34px;cursor:pointer;font-size:16px;font-weight:700;transition:background .15s}
    .um-step button:hover{background:rgba(212,175,55,.14)}
    .um-step .um-step-val{padding:0 14px;font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;color:var(--cream);min-width:80px;text-align:center}

    /* Footer hint card */
    .um-pane-hint{margin-top:22px;background:linear-gradient(90deg,rgba(212,175,55,.10),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.28);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:center}
    .um-pane-hint svg{color:var(--accent);flex-shrink:0}
    .um-pane-hint b{display:block;font-family:'Roboto',sans-serif;font-size:13px;color:var(--cream);font-weight:600}
    .um-pane-hint small{display:block;font-size:11.5px;color:rgba(255,255,255,.55);margin-top:2px}

    @media (max-width:800px){
      .um-settings-card{grid-template-columns:1fr;height:100dvh;max-height:100dvh;border-radius:0;border:none}
      .um-settings-side{border-right:none;border-bottom:1px solid rgba(212,175,55,.12);padding:14px 10px;max-height:38vh;overflow-y:auto}
      .um-settings-main{padding:20px 16px}
      .um-settings-overlay{padding:0}
    }