/* app/styles/app.css — Unified Glass Theme */

/* =========================
   1) Design Tokens
========================= */
:root{
  --bg0:#050807;
  --bg1:#07110d;

  --card: rgba(255,255,255,.07);
  --card2: rgba(255,255,255,.10);

  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.45);

  --green: rgba(74,223,154,.95);
  --gold: rgba(215,179,106,.95);
  --danger: rgba(255,93,93,.95);

  --shadow: 0 14px 34px rgba(0,0,0,.45);
  --shadowSoft: 0 18px 60px rgba(0,0,0,.35);

  --blur: 18px;

  --r1: 18px;
  --r2: 24px;

  /* Athkar page prefers these */
  --radius: 22px;
  --radius2: 28px;

  --fontScale: 1;

  --safeTop: env(safe-area-inset-top);
  --safeBottom: env(safe-area-inset-bottom);

  --edgeGlow: 0 0 0 1px rgba(140,255,230,.18) inset, 0 0 28px rgba(140,255,230,.14);

  --tFast: 120ms;
  --tMed: 220ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* UI bridge tokens */
  --uiGlass: rgba(255,255,255,.08);
  --uiGlass2: rgba(255,255,255,.12);
  --uiStroke: rgba(255,255,255,.12);
  --uiStroke2: rgba(255,255,255,.16);
  --uiText: rgba(255,255,255,.92);
  --uiMuted: rgba(255,255,255,.62);
  --uiMuted2: rgba(255,255,255,.46);
  --uiShadow: 0 18px 50px rgba(0,0,0,.55);
  --uiBlur: 18px;
  --uiR1: 16px;
  --uiR2: 22px;

  /* Digital display tokens */
  --digStroke: rgba(74,223,154,.28);
  --digGlow: rgba(74,223,154,.38);
  --digText: rgba(140,255,206,.96);
  --digDim: rgba(140,255,206,.62);
  --digWarn: rgba(255,201,110,.95);
  --digRed: rgba(255,120,120,.92);

  --maxW: 980px;
  --maxWWide: 1100px;

  --focusRing: 0 0 0 3px rgba(74,223,154,.32);
  --containerPad: clamp(12px, 2vw, 20px);
  --touchSize: 44px;
}

html[data-theme="light"]{
  --bg0:#f6fbf8;
  --bg1:#eef7f2;

  --card: rgba(0,0,0,.04);
  --card2: rgba(0,0,0,.06);

  --stroke: rgba(0,0,0,.08);
  --stroke2: rgba(0,0,0,.10);

  --text: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.56);
  --muted2: rgba(0,0,0,.40);

  --shadow: 0 14px 34px rgba(0,0,0,.12);
  --shadowSoft: 0 18px 60px rgba(0,0,0,.10);

  --edgeGlow: 0 0 0 1px rgba(74,223,154,.14) inset, 0 0 26px rgba(74,223,154,.10);

  --uiText: rgba(10,18,22,.92);
  --uiMuted: rgba(10,18,22,.60);
  --uiMuted2: rgba(10,18,22,.44);
  --uiGlass: rgba(255,255,255,.78);
  --uiGlass2: rgba(255,255,255,.92);
  --uiStroke: rgba(10,18,22,.10);
  --uiStroke2: rgba(10,18,22,.14);
  --uiShadow: 0 18px 50px rgba(0,0,0,.12);

  --digStroke: rgba(10,18,22,.18);
  --digGlow: rgba(74,223,154,.22);
  --digText: rgba(14,70,48,.92);
  --digDim: rgba(14,70,48,.62);
  --digWarn: rgba(160,110,20,.95);
  --digRed: rgba(160,40,40,.90);
}

/* =========================
   2) Resets / Base
========================= */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

html{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, "Noto Kufi Arabic","Noto Naskh Arabic", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% 8%, rgba(74,223,154,.18), transparent 60%),
    radial-gradient(1100px 700px at 90% 10%, rgba(215,179,106,.18), transparent 60%),
    radial-gradient(1200px 900px at 70% 90%, rgba(74,223,154,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* mobile-app feel */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html[dir="rtl"]{text-align:right;}
html[dir="ltr"]{text-align:left;}

a{color:inherit; text-decoration:none;}
.hidden{display:none !important;}

/* Disable selection/copy (except form fields) */
html, body, *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, select, option, [contenteditable="true"]{
  -webkit-user-select:text !important;
  user-select:text !important;
  -webkit-touch-callout:default !important;
}

/* Global focus styles */
:where(a,button,[role="button"],.chip,.miniBtn,.pill,.btn,.navBtn,.menuBtn,.tapBtn){ outline:none; }
:where(a,button,[role="button"],.chip,.miniBtn,.pill,.btn,.navBtn,.menuBtn,.tapBtn):focus-visible{
  box-shadow: var(--focusRing);
  border-color: rgba(74,223,154,.35);
}

/* =========================
   3) Shared Wrappers
========================= */
.bgGlow{
  position:fixed;
  inset:-80px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(800px 520px at 20% 10%, rgba(74,223,154,.10), transparent 60%),
    radial-gradient(740px 520px at 85% 15%, rgba(215,179,106,.10), transparent 60%),
    radial-gradient(900px 800px at 65% 92%, rgba(74,223,154,.08), transparent 55%);
  opacity:.9;
}

.app{
  position:relative;
  z-index:1;
  min-height:100%;
  padding: calc(14px + var(--safeTop)) 16px calc(88px + var(--safeBottom));
  max-width: var(--maxW);
  margin: 0 auto;
  width:100%;
}
.container{margin-top:16px; width:100%;}
.centerWrap{width:100%; max-width:var(--maxW); margin:0 auto;}

/* Max width usage consistency */
.app, .centerWrap, .bottomNav .inner, .sheet {
  max-width: var(--maxW);
}

/* Athkar page uses .wrap */
.wrap{
  position:relative;
  z-index:1;
  max-width: var(--maxWWide);
  margin:0 auto;
  padding: calc(16px + var(--safeTop)) 16px calc(18px + var(--safeBottom));
}

/* =========================
   4) Topbar / Brand
========================= */
.topbar{
  position: sticky;
  top: calc(12px + var(--safeTop));
  z-index: 30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 16px;
  border-radius: var(--r2);
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  width:100%;
}

/* Athkar variant (slightly tighter) */
.wrap .topbar{
  top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius2);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.logo{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(74,223,154,.35), rgba(215,179,106,.22));
  border:1px solid var(--stroke2);
  overflow:hidden;
  flex:0 0 auto;
  position:relative;
}

.wrap .logo{
  width:42px;
  height:42px;
  border-radius:14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.wrap .logo:after{
  content:"";
  position:absolute;
  inset:-40%;
  background: conic-gradient(from 230deg, rgba(255,255,255,.16), transparent, rgba(255,255,255,.12));
  animation: spin 9s linear infinite;
  filter: blur(.4px);
}
@keyframes spin{to{transform:rotate(360deg)}}
.wrap .logo svg{position:relative; z-index:1; opacity:.95;}

.titles{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.appName{
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle{
  font-size:12px;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Athkar inline titles */
.wrap .brand h1{
  font-size: 15px;
  margin:0;
  letter-spacing:.2px;
  line-height:1.2;
}
.wrap .brand p{
  margin:3px 0 0;
  font-size:12px;
  color: var(--muted);
}

.actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* =========================
   5) Pills / Chips / Buttons
========================= */
.icon{
  width:18px;
  height:18px;
  opacity:.9;
  flex:0 0 auto;
  flex-shrink: 0;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  cursor:pointer;
  user-select:none;
  transition: transform var(--tFast) var(--ease), border-color var(--tFast) var(--ease), background var(--tFast) var(--ease);
  white-space:nowrap;
  color: var(--uiText);
}
.pill:hover{border-color: var(--stroke2);}
.pill:active{transform: scale(.98);}
.pill span{font-size:12.8px; color: var(--uiMuted);}
.pill strong{font-size:12.8px; font-weight:650; color: var(--uiText);}

.chip{
  appearance:none;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, var(--card2), var(--card));
  color: var(--text);
  border-radius:999px;
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition: all var(--tFast) var(--ease);
  font-size:13px;
  font-weight:500;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  white-space:nowrap;
}
.chip:hover{border-color: var(--stroke2); background: rgba(255,255,255,.12); transform: translateY(-1px);}
.chip:active{transform: scale(.97);}
.chip.primary{border-color: rgba(74,223,154,.35); background: rgba(74,223,154,.14);}
.chip.primary:hover{background: rgba(74,223,154,.2);}
.chip.danger{border-color: rgba(255,93,93,.30); background: rgba(255,93,93,.10);}
.chip.danger:hover{background: rgba(255,93,93,.15);}

.primaryBtn,.secondaryBtn{
  appearance:none;
  border:1px solid var(--stroke);
  color: var(--text);
  border-radius:20px;
  padding:14px 16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  transition: all var(--tFast) var(--ease);
  box-shadow: var(--shadow);
  width:100%;
}
.primaryBtn{
  border-color: rgba(74,223,154,.28);
  background: linear-gradient(180deg, rgba(74,223,154,.18), rgba(74,223,154,.10));
}
.secondaryBtn{
  border-color: rgba(215,179,106,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}
.primaryBtn:hover{border-color: rgba(74,223,154,.42); box-shadow: var(--shadow), 0 0 0 1px rgba(74,223,154,.20) inset; transform: translateY(-2px);}
.secondaryBtn:hover{border-color: rgba(215,179,106,.38); box-shadow: var(--shadow), 0 0 0 1px rgba(215,179,106,.18) inset; transform: translateY(-2px);}
.primaryBtn:active,.secondaryBtn:active{transform: scale(.98);}

.miniBtn{
  appearance:none;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 18px;
  font: inherit;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: all var(--tFast) var(--ease);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  user-select:none;
}
.miniBtn:hover{background: rgba(255,255,255,.12); transform: translateY(-1px);}
.miniBtn:active{transform: scale(.98);}
.miniBtn.primary{border-color: rgba(74,223,154,.35); background: rgba(74,223,154,.14);}
.miniBtn.primary:hover{background: rgba(74,223,154,.2);}
.miniBtn.danger{border-color: rgba(255,93,93,.30); background: rgba(255,93,93,.10);}
.miniBtn.danger:hover{background: rgba(255,93,93,.15);}

/* Athkar page mini button (green) */
.wrap .miniBtn{
  background: linear-gradient(180deg, rgba(74,223,154,.18), rgba(74,223,154,.10));
  border: 1px solid rgba(74,223,154,.26);
  justify-content:center;
  white-space:nowrap;
}

/* =========================
   6) Cards (Shared + Athkar)
========================= */
.heroCard,.noteCard,.card{
  border-radius: var(--r2);
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Athkar prefers larger radius */
.wrap .card{
  border-radius: var(--radius2);
}

.cardHeader{
  padding: 14px 14px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom: 1px solid var(--stroke);
}
.cardHeader h2{margin:0; font-size:14px; letter-spacing:.2px;}
.sub{color: color-mix(in srgb, var(--text) 58%, transparent); font-size:12px; margin-top:6px; line-height:1.5;}
.content{padding:12px;}

/* =========================
   7) Index grid cards (kept)
========================= */
.grid{
  margin-top:20px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
}

.cardLink{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border-radius:20px;
  padding:16px;
  display:flex;
  gap:12px;
  align-items:center;
  cursor:pointer;
  transition: all var(--tFast) var(--ease);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.cardLink:hover{
  border-color: var(--stroke2);
  box-shadow: var(--shadow), 0 0 0 1px rgba(74,223,154,.10) inset;
  transform: translateY(-2px);
}
.cardLink:active{transform: scale(.98);}

.cardIcon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(18px 18px at 35% 30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(74,223,154,.18), rgba(215,179,106,.12));
  border:1px solid var(--stroke2);
  font-size:24px;
  flex-shrink: 0;
}
.cardText{display:flex; flex-direction:column; gap:4px; min-width:0;}
.cardTitle{font-weight:950; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cardSub{font-size:12px; color: color-mix(in srgb, var(--text) 58%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* =========================
   8) Athkar layout (auto-scoped)
   Uses :has() when supported to avoid breaking index .grid
========================= */
@supports selector(:has(*)){
  body:has(.leftCard) .grid{
    display:grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap:14px;
    margin-top:14px;
    align-items:start;
  }
  @media (max-width: 980px){
    body:has(.leftCard) .grid{grid-template-columns: 1fr;}
  }
}

.menu{padding:12px; display:grid; gap:10px;}
.menuBtn{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 12px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  cursor:pointer;
  transition: transform var(--tFast) var(--ease), border-color var(--tFast) var(--ease), background var(--tFast) var(--ease);
  user-select:none;
  min-width:0;
}
.menuBtn:hover{border-color: var(--stroke2);}
.menuBtn:active{transform: scale(.985);}
.menuBtn .t{display:flex; flex-direction:column; gap:2px; min-width:0;}
.menuBtn .t b{font-size:13.2px; font-weight:720; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.menuBtn .t small{font-size:12px; color: color-mix(in srgb, var(--text) 58%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(74,223,154,.13);
  flex:0 0 auto;
}
.dot.gold{background: var(--gold); box-shadow: 0 0 0 6px rgba(215,179,106,.14);}
.dot.gray{background: rgba(255,255,255,.35); box-shadow: 0 0 0 6px rgba(255,255,255,.10);}

.rightSide{display:grid; gap:14px;}

/* Make content never overflow horizontally */
.content, .list, .zikr, .zikrBody{min-width:0;}

/* Search row */
.searchRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.input{
  width: min(560px, 100%);
  flex: 1 1 260px;
  padding:12px 12px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  color: var(--text);
  outline:none;
  font-size:13px;
}
.input:focus{
  border-color: rgba(74,223,154,.35);
  box-shadow: 0 0 0 3px rgba(74,223,154,.18), var(--edgeGlow);
}
.input::placeholder{color: var(--muted2);}

/* Athkar list */
.list{display:grid; gap:10px;}

.zikr{
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  overflow:hidden;
}
.zikrTop{
  padding:12px 12px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.zikrTitle{display:flex; flex-direction:column; gap:4px; min-width:0;}
.zikrTitle b{font-size:13.2px; font-weight:800; letter-spacing:.2px;}
.meta{font-size:12px; color: color-mix(in srgb, var(--text) 58%, transparent); display:flex; gap:8px; flex-wrap:wrap;}
.tag{
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}

.zikrBody{
  padding: 0 12px 12px;
  font-size: clamp(14px, calc(15px * var(--fontScale)), 18px);
  line-height: 1.95;
  color: var(--text);
  letter-spacing:.1px;
  white-space: pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  font-family: "Noto Naskh Arabic","Amiri","Noto Kufi Arabic", system-ui, -apple-system, Arial, sans-serif;
}

.zikrActions{
  padding:10px 12px 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid var(--stroke);
}

.btn{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  font-size:12.5px;
  color: var(--text);
  justify-content:center;
  flex: 1 1 auto;
  transition: transform var(--tFast) var(--ease), border-color var(--tFast) var(--ease), background var(--tFast) var(--ease);
}
.btn:hover{border-color: var(--stroke2);}
.btn:active{transform: scale(.99);}
.btn.primary{border-color: rgba(74,223,154,.32); background: rgba(74,223,154,.12);}
.btn.warn{border-color: rgba(255,93,93,.28); background: rgba(255,93,93,.10);}

/* Counter box (athkar) */
.counterBox{padding:14px;}
.counterTitle{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
.counterTitle h3{margin:0; font-size:14px;}

.bigCount{
  display:grid;
  place-items:center;
  border-radius: 26px;
  padding: 18px 14px;
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(74,223,154,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  position:relative;
  overflow:hidden;
  margin-bottom:12px;
}
.bigNum{
  font-size: clamp(36px, 6.8vw, 46px);
  font-weight:900;
  letter-spacing:.6px;
  line-height:1;
}
.bigLabel{
  margin-top:6px;
  font-size:12.5px;
  color: var(--muted);
  text-align:center;
  line-height:1.5;
}

.tapArea{display:grid; gap:10px;}
.tapBtn{
  width:100%;
  padding:14px 14px;
  border-radius:22px;
  border:1px solid rgba(74,223,154,.32);
  background: linear-gradient(180deg, rgba(74,223,154,.18), rgba(74,223,154,.10));
  cursor:pointer;
  user-select:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
  transition: transform var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
}
.tapBtn:active{transform: scale(.99);}
.tapBtn small{font-weight:600; color: var(--muted);}

.row{display:flex; gap:10px; flex-wrap:wrap;}
.row .btn{flex:1}
.rowV{opacity:.85; text-align:end; font-size:14px; color: color-mix(in srgb, var(--text) 58%, transparent);}

/* =========================
   9) Toast
========================= */
.toast{
  position:fixed;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(18px + var(--safeBottom));
  background: rgba(0,0,0,.65);
  color: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius:999px;
  padding: 10px 14px;
  font-size: 12.8px;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--tMed) var(--ease), transform var(--tMed) var(--ease);
  z-index: 60;
  max-width: calc(100% - 32px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow: var(--shadow);
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-10px);}

/* =========================
   10) Moon block (kept)
========================= */
.moonWrap{position:relative; width:140px; height:140px; cursor:pointer;}
#moonCanvas{
  width:100%;
  height:100%;
  border-radius:50%;
  border:1px solid var(--stroke);
  background:
    radial-gradient(240px 240px at 70% 45%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  box-shadow: var(--shadowSoft);
  display:block;
}

/* =========================
   11) Qibla (kept)
========================= */
.compact{max-width:100%;}
.qiblaWrap{display:grid; gap:16px;}
.compass{
  position:relative;
  width:min(340px, 76vw);
  height:min(340px, 76vw);
  margin:10px auto 20px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% 35%, rgba(50,255,180,.18), transparent 55%),
    radial-gradient(circle at 50% 60%, rgba(0,0,0,.55), rgba(0,0,0,.15)),
    rgba(0,0,0,.25);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.qiblaDial{position:absolute; inset:0; border-radius:50%; transition: transform .08s linear;}
.qiblaRing{position:absolute; inset:10px; border-radius:50%; border:1px solid rgba(255,255,255,.10); background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.25), transparent 60%);}
.qiblaTicks{position:absolute; inset:0; border-radius:50%;}
.qiblaTicks .tk{
  position:absolute;
  left:50%;
  top:6px;
  width:2px;
  height:12px;
  transform-origin: 50% calc(100% + 150px);
  background: rgba(255,255,255,.22);
  border-radius:999px;
}
.qiblaMarks .mk{
  position:absolute;
  font-weight:900;
  font-size:12px;
  letter-spacing:.6px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.mkN{left:50%; top:10px; transform: translateX(-50%); color: rgba(255,95,95,.95);}
.mkS{left:50%; bottom:10px; transform: translateX(-50%); color: rgba(110,180,255,.95);}
.mkE{right:12px; top:50%; transform: translateY(-50%);}
.mkW{left:12px; top:50%; transform: translateY(-50%);}

.qiblaCenter{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:92px;
  height:92px;
  border-radius:50%;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.04);
}
.qiblaKaaba{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:28px;
}
.qiblaArrow{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:42%;
  transform-origin: 50% 92%;
  transform: rotate(0deg);
  background: linear-gradient(to bottom, rgba(46,204,113,0), rgba(46,204,113,.75));
  border-radius:999px;
  box-shadow: 0 12px 30px rgba(46,204,113,.28);
}
.qiblaArrow::after{
  content:"";
  position:absolute;
  left:50%;
  top:-12px;
  transform: translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:14px solid rgba(46,204,113,.85);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

.rowItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
html[data-theme="light"] .rowItem{background: rgba(0,0,0,.03);}
.rowK{font-weight:900; font-size:14px;}
.rowV{opacity:.85; text-align:end; font-size:14px; color: color-mix(in srgb, var(--text) 58%, transparent);}

/* =========================
   12) Bottom Nav + FAB (kept)
========================= */
.bottomNav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  padding: 10px 16px calc(10px + var(--safeBottom));
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
html[data-theme="light"] .bottomNav{background: rgba(255,255,255,.78);}
.bottomNav .inner{
  width:100%;
  max-width: var(--maxW);
  margin:0 auto;
  display:flex;
  gap:8px;
  justify-content:space-between;
  border:1px solid var(--stroke);
  background: var(--uiGlass);
  border-radius:30px;
  padding:8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navBtn{
  flex:1;
  text-align:center;
  padding:10px 8px;
  border-radius:24px;
  border:1px solid transparent;
  color: var(--text);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  justify-content:center;
  transition: all var(--tFast) var(--ease);
}
.navBtn:hover{background: rgba(255,255,255,.08); transform: translateY(-1px);}
.navBtn.active{border-color: rgba(74,223,154,.28); background: rgba(74,223,154,.12);}
.navBtn .i{font-size:20px; line-height:1;}
.navBtn .t{color: color-mix(in srgb, var(--text) 58%, transparent); font-size:11px; font-weight:500;}
.navBtn.active .t{color: var(--text);}

.tasbeehFab{
  position:fixed;
  left:20px;
  bottom: calc(100px + var(--safeBottom));
  z-index:45;
  display:flex;
  align-items:center;
  gap:12px;
}
html[dir="ltr"] .tasbeehFab{left:auto; right:20px;}
.ringBtn{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  font-size:28px;
  transition: all var(--tFast) var(--ease);
}
.ringBtn:hover{transform: scale(1.05); background: rgba(255,255,255,.12);}
.ringBtn:active{transform: scale(.95);}
.ringBadge{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding:10px 18px;
  border-radius:40px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* =========================
   13) Sheets / Settings UI (kept)
========================= */
.sheetBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--tMed) ease;
  z-index:70;
}
.sheetBackdrop.open{opacity:1; pointer-events:auto;}

.sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  margin:0 auto;
  max-width: var(--maxW);
  border-radius: 28px 28px 0 0;
  background: var(--uiGlass);
  border:1px solid var(--uiStroke);
  box-shadow: var(--uiShadow);
  backdrop-filter: blur(var(--uiBlur));
  -webkit-backdrop-filter: blur(var(--uiBlur));
  transform: translateY(100%);
  transition: transform var(--tMed) var(--ease);
  z-index:80;
  overflow:hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open{transform: translateY(0);}

.sheetHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  gap:12px;
  border-bottom:1px solid var(--uiStroke);
  background: linear-gradient(180deg, var(--uiGlass2), transparent);
}
.sheetBody{
  padding:20px;
  max-height: min(70vh, 680px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.settingsGrid{display:grid; grid-template-columns: 1fr; gap:16px;}
@media (min-width: 720px){ .settingsGrid{grid-template-columns: 1fr 1fr;} }

.setCard{
  border:1px solid var(--uiStroke);
  background: rgba(255,255,255,.06);
  border-radius: var(--uiR2);
  padding:16px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border:1px solid var(--uiStroke);
  border-radius:20px;
  background: rgba(0,0,0,.10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background var(--tFast) var(--ease);
}
.row:hover{background: rgba(255,255,255,.12);}
html[data-theme="light"] .row{background: rgba(255,255,255,.55);}
html[data-theme="light"] .row:hover{background: rgba(255,255,255,.7);}

/* =========================
   14) Responsive (strong iPhone support)
========================= */
@media (max-width: 768px){
  .app{padding-left:12px; padding-right:12px;}
  .wrap{padding-left:12px; padding-right:12px;}
  .moonWrap{width:120px; height:120px; margin:0 auto;}
  .grid{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
  .topbar{gap:10px;}
}

/* Athkar: keep menu usable on small screens (horizontal scroll + sticky) */
@media (max-width: 640px) and (orientation: portrait){
  .wrap .topbar{
    top:8px;
    padding:10px;
    border-radius:22px;
  }
  .wrap .brand{gap:10px; min-width:0;}
  .wrap .brand h1{font-size:14px;}
  .wrap .brand p{font-size:11.5px;}
  .wrap .actions{flex-wrap:wrap; gap:8px;}
  .wrap .pill{padding:9px 10px; gap:6px;}
  .wrap .pill span, .wrap .pill strong{font-size:12px;}

  /* Menu becomes horizontal and never hidden */
  .leftCard{
    position: sticky;
    top: 78px;
    z-index: 25;
  }
  .leftCard .cardHeader{display:none;}
  .leftCard .menu{
    display:flex;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:10px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .leftCard .menu::-webkit-scrollbar{display:none;}
  .leftCard .menuBtn{
    min-width: max-content;
    padding:10px 12px;
    border-radius:999px;
    scroll-snap-align:start;
    align-items:center;
    gap:8px;
  }
  .leftCard .menuBtn .t b{font-size:12.8px;}
  .leftCard .menuBtn .t small{display:none;}
  .dot{width:8px; height:8px;}

  .searchRow{flex-direction:column; align-items:stretch; gap:10px;}
  .wrap .miniBtn{width:100%;}
  .zikrBody{line-height:2.05; padding: 0 12px 14px;}
  .zikrActions{gap:8px;}
  .btn{border-radius:16px; padding:10px 10px;}
  .counterBox{padding:12px;}
  .tapBtn{border-radius:20px; padding:14px;}
  .row{gap:8px;}
  .row .btn{flex: 1 1 calc(33.333% - 8px);}
}

@media (max-width: 480px){
  .appName{font-size:14px;}
  .subtitle{display:none;}
  .cardIcon{width:40px; height:40px; font-size:20px;}
  .cardTitle{font-size:13px;}
  .cardSub{font-size:11px;}
  .tasbeehFab{left:10px;}
  html[dir="ltr"] .tasbeehFab{right:10px;}
  .ringBtn{width:56px; height:56px; font-size:24px;}
  .ringBadge{padding:8px 12px; font-size:12px;}
}

/* =========================
   15) Print
========================= */
@media print{
  .topbar, .bottomNav, .tasbeehFab, .sheetBackdrop, .toast{display:none !important;}
  .sheet{display:none !important;}
  body{background:white; color:black;}
  .app,.wrap{padding:20px;}
}
/* Minimum touch target sizes */
button, .chip, .miniBtn, .pill, .btn, .navBtn, .menuBtn, .tapBtn {
  min-height: var(--touchSize);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .chip:hover, .miniBtn:hover, .btn:hover, .cardLink:hover, .primaryBtn:hover, .secondaryBtn:hover, .navBtn:hover {
    transform:none !important;
  }
}