@font-face{
  font-family:'Amiri';
  src:url('../fonts/amiri-arabic-400.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Amiri';
  src:url('../fonts/amiri-arabic-700.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
:root{
  --bg:#0a1a15; --bg-soft:#0e211b; --card:#122a22; --card2:#0e211b;
  --border:rgba(212,175,55,.22); --gold:#d4af37; --gold-deep:#a8842a;
  --gold-soft:rgba(212,175,55,.12);
  --text:#f3ecdb; --muted:#9db4a7; --danger:#e06060;
  --topbar:#0a1a15; --tabbar:#0a1a15; --on-gold:#0a1a15;
  --shadow:0 8px 28px rgba(0,0,0,.35);
  --radius:18px;
}
[data-theme="light"]{
  --shadow:0 8px 24px rgba(60,45,10,.12);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; min-height:100dvh;
  overscroll-behavior-y:none;
}
.app{max-width:720px; margin:0 auto; min-height:100vh; min-height:100dvh; position:relative; padding-bottom:calc(76px + env(safe-area-inset-bottom));}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--topbar);
  border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.1rem;}
.brand{display:flex; align-items:center; gap:.65rem;}
.brand-mark{
  width:40px; height:40px; border:none; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  font-size:1.5rem; line-height:1; cursor:pointer; padding:0;
}
.brand-name{font-weight:700; font-size:1.05rem; letter-spacing:.01em;}
.icon-btn{
  background:transparent; border:1px solid var(--border); color:var(--text);
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:active{transform:scale(.94);}

/* ---------- views ---------- */
.view{padding:1.1rem 1.1rem 1.5rem; animation:fadeUp .28s ease;}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
[hidden]{display:none !important;}

/* ---------- hero ---------- */
.hero{
  border:1px solid var(--border); border-radius:var(--radius);
  background:
    radial-gradient(120% 130% at 85% -10%, var(--gold-soft) 0%, transparent 55%),
    linear-gradient(160deg, var(--card) 0%, var(--card2) 100%);
  padding:1.4rem 1.2rem; text-align:center; margin-bottom:1.1rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden; cursor:pointer;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 12% 88%, var(--gold-soft) 0 2px, transparent 3px),
                   radial-gradient(circle at 88% 82%, var(--gold-soft) 0 2px, transparent 3px),
                   radial-gradient(circle at 50% 0%, var(--gold-soft) 0 2px, transparent 3px);
}
.hero-kicker{margin:0 0 .5rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700;}
.hero-arabic{font-family:'Amiri',serif; font-size:2.6rem; margin:.2rem 0 .3rem; color:var(--text); line-height:1.5;}
.hero-translit{margin:0; font-weight:600; font-size:1rem;}
.hero-meaning{margin:.3rem 0 0; color:var(--muted); font-size:.92rem;}

/* ---------- search ---------- */
.search-wrap{position:relative; margin-bottom:.35rem;}
.search-icon{position:absolute; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
[dir="ltr"] .search-icon{left:.9rem;}
[dir="rtl"] .search-icon{right:.9rem;}
#search{
  width:100%; padding:.85rem 1rem; font-size:1rem; border-radius:14px;
  border:1px solid var(--border); background:var(--card); color:var(--text); outline:none;
}
[dir="ltr"] #search{padding-left:2.6rem;}
[dir="rtl"] #search{padding-right:2.6rem;}
#search:focus{border-color:var(--gold);}
.count-line{color:var(--muted); font-size:.82rem; margin:.55rem .2rem .8rem;}

/* ---------- name cards ---------- */
.names-list{display:flex; flex-direction:column; gap:.7rem;}
.name-card{
  display:flex; align-items:center; gap:.95rem; width:100%; text-align:start;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:.85rem 1rem; cursor:pointer; color:var(--text); font-family:inherit;
  transition:transform .12s ease, border-color .12s ease;
}
.name-card:active{transform:scale(.985); border-color:var(--gold);}
.name-num{
  flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold); color:var(--gold); font-weight:700; font-size:.85rem;
  background:var(--gold-soft);
}
.name-text{flex:1; min-width:0;}
.name-arabic{font-family:'Amiri',serif; font-size:1.65rem; line-height:1.6; margin:0;}
.name-translit{margin:0; font-weight:600; font-size:.95rem;}
.name-meaning{margin:.1rem 0 0; color:var(--muted); font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.name-fav{flex:0 0 auto; color:var(--muted); background:none; border:none; cursor:pointer; padding:.4rem; display:flex;}
.name-fav.on{color:var(--gold);}
.name-fav.on svg{fill:var(--gold);}

/* ---------- empty ---------- */
.empty{text-align:center; padding:3rem 1.5rem; color:var(--muted);}
.empty h2{color:var(--text); font-size:1.15rem; margin:1rem 0 .4rem;}
.empty p{margin:0; font-size:.95rem;}
.empty-mark{color:var(--gold);}

/* ---------- detail ---------- */
.detail{
  position:fixed; inset:0; z-index:60; background:var(--bg);
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:slideIn .25s ease;
}
@keyframes slideIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.detail-inner{max-width:720px; margin:0 auto; padding:1rem 1.1rem 2rem;}
.detail-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;}
.detail-top-left{display:flex; align-items:center; gap:.6rem;}
.detail-num{
  font-weight:700; color:var(--gold); border:1px solid var(--gold); border-radius:999px;
  padding:.3rem 1rem; font-size:.9rem; background:var(--gold-soft);
}
#detail-fav.on{color:var(--gold); border-color:var(--gold);}
#detail-fav.on svg{fill:var(--gold);}
.detail-card{
  border:1px solid var(--border); border-radius:22px; background:var(--card);
  padding:2rem 1.4rem; text-align:center; box-shadow:var(--shadow);
  background:
    radial-gradient(110% 90% at 50% 0%, var(--gold-soft) 0%, transparent 60%),
    var(--card);
}
.detail-arabic{font-family:'Amiri',serif; font-weight:700; font-size:3.2rem; line-height:1.7; margin:0 0 .4rem;}
.detail-translit{margin:0; font-size:1.15rem; font-weight:700;}
.detail-div{width:64px; height:2px; background:var(--gold); margin:1.2rem auto; border-radius:2px; opacity:.7;}
.detail-label{margin:0 0 .3rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700;}
.detail-meaning{margin:0 0 1.3rem; font-size:1.25rem; font-weight:600;}
.detail-desc{margin:0; color:var(--muted); font-size:1rem; line-height:1.65;}
.detail-actions{display:flex; gap:.7rem; margin:1rem 0;}
.btn-ghost{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:.8rem; font-size:.95rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.btn-ghost:active{transform:scale(.97);}
.detail-nav{display:flex; gap:.7rem;}
.toast{
  position:fixed; bottom:calc(96px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:.6rem 1.2rem; border-radius:999px;
  font-size:.88rem; font-weight:600; margin:0; white-space:nowrap; z-index:70;
}

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:720px; z-index:50;
  display:flex; background:var(--tabbar); border-top:1px solid var(--border);
  padding:.55rem .5rem calc(.55rem + env(safe-area-inset-bottom));
}
.tab{
  flex:1; background:none; border:none; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  font-size:.72rem; font-weight:600; padding:.35rem; font-family:inherit;
}
.tab.active{color:var(--gold);}

/* ---------- onboarding ---------- */
.onboarding{
  position:fixed; inset:0; z-index:80; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:1.4rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.onboarding-card{width:100%; max-width:480px; text-align:center;}
.onboarding-mark{
  font-family:'Amiri',serif; font-size:3.4rem; color:var(--gold); line-height:1.4;
  width:110px; height:110px; margin:0 auto 1rem; border:1px solid var(--gold);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--gold-soft);
}
.onboarding-card h1{margin:0 0 .4rem; font-size:1.5rem;}
.onboarding-card p{color:var(--muted); margin:0 0 1.2rem;}
.lang-grid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.2rem;}
.lang-btn{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:.85rem .6rem; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; gap:.15rem; align-items:center;
}
.lang-btn .ln{font-weight:700; font-size:1rem;}
.lang-btn .le{font-size:.75rem; color:var(--muted);}
.lang-btn.selected{border-color:var(--gold); background:var(--gold-soft);}
.btn-primary{
  width:100%; border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:var(--on-gold); font-weight:700; font-size:1.05rem; border-radius:16px; padding:1rem;
}
.btn-primary:disabled{opacity:.45; cursor:default;}

/* ---------- settings ---------- */
.settings-group{margin-bottom:1.6rem;}
.settings-group h2{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 .7rem .2rem;}
.settings-langs{display:grid; grid-template-columns:1fr 1fr; gap:.6rem;}
.theme-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem;}
.theme-pick{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:.55rem .35rem; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.theme-pick .sw{width:100%; aspect-ratio:16/10; border-radius:8px; border:1px solid var(--border);}
.theme-pick .nm{font-size:.66rem; font-weight:600; text-align:center; line-height:1.25;}
.theme-pick.selected{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.theme-row{display:flex; gap:.6rem;}
.theme-btn{
  flex:1; background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:.85rem; font-size:.95rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-btn.selected{border-color:var(--gold); background:var(--gold-soft);}
.about-text{color:var(--muted); line-height:1.65; margin:0 0 .6rem;}
.about-foot{color:var(--muted); font-size:.8rem; margin:0;}

/* ---------- larger screens ---------- */
@media (min-width:768px){
  .names-list{display:grid; grid-template-columns:1fr 1fr; gap:.8rem;}
  .hero-arabic{font-size:3rem;}
  .detail-arabic{font-size:3.8rem;}
}