/* ══════════════════════════════════════════
   ISLAMIC HUB — variables.css
   CSS Custom Properties & Base Reset
   ══════════════════════════════════════════ */
:root{
  --gold:#c9a84c;--gold-light:#e8c97a;--gold-dim:#7a6030;--gold-glow:rgba(201,168,76,0.25);
  --teal:#00d4aa;--teal-dim:#00a07e;--teal-glow:rgba(0,212,170,0.2);
  --red-led:#ff2244;--green-led:#00ff88;--yellow-led:#ffdd00;--blue-led:#2266ff;
  --bg-deep:#060810;--bg-mid:#0c0f1a;--bg-nav:#080b14;
  --surface:rgba(255,255,255,0.04);--surface-2:rgba(255,255,255,0.07);--surface-3:rgba(255,255,255,0.10);
  --border:rgba(201,168,76,0.15);--border-hi:rgba(201,168,76,0.45);
  --text:#e8e2d4;--text-muted:#5a5650;--text-soft:#9a9288;
  --shadow-gold:0 0 40px rgba(201,168,76,0.10);
  --nav-h:72px;--sidebar-w:240px;--radius:20px;
  --card-bg:rgba(255,255,255,0.04);
  --modal-bg:rgba(6,8,16,0.95);
}

/* ══ LIGHT MODE ══ */
body.light-mode{
  --bg-deep:#f0ede6;--bg-mid:#e8e4da;--bg-nav:#f5f2eb;
  --surface:rgba(0,0,0,0.04);--surface-2:rgba(0,0,0,0.07);--surface-3:rgba(0,0,0,0.10);
  --border:rgba(150,100,30,0.2);--border-hi:rgba(150,100,30,0.5);
  --text:#1a1510;--text-muted:#8a8070;--text-soft:#5a5040;
  --card-bg:rgba(255,255,255,0.7);--modal-bg:rgba(240,237,230,0.97);
  --green-led:#007744;--blue-led:#0044cc;
}
body.light-mode::before{
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%,rgba(201,168,76,0.12) 0%,transparent 55%),
    radial-gradient(ellipse 90% 90% at 50% 50%,#f0ede6 0%,#e8e4da 100%);
}
body.light-mode .app-header{background:rgba(240,237,230,0.94);border-color:var(--border)}
body.light-mode .bottom-nav{background:rgba(240,237,230,0.96)}
body.light-mode .card{background:rgba(255,255,255,0.75);border-color:var(--border)}
body.light-mode .sidebar{background:rgba(240,237,230,0.9)}
body.light-mode .settings-drawer{background:#ece9e2}
body.light-mode .calc-screen{background:rgba(0,0,0,0.08)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%}
body{
  background:var(--bg-deep);color:var(--text);
  font-family:'Rajdhani',sans-serif;min-height:100vh;height:100%;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}

/* ═══ AMBIENT BACKGROUND ═══ */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%,rgba(201,168,76,0.07) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 95%,rgba(0,212,170,0.05) 0%,transparent 55%),
    radial-gradient(ellipse 90% 90% at 50% 50%,#0c0f1a 0%,#060810 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(201,168,76,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,0.02) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px}

/* ═══ LOADING DOTS ═══ */
.ldot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.2}50%{opacity:1}}