:root{
  --bg:#0a0917; --surface:#14132a; --surface-2:#1b1937; --surface-3:#232042;
  --border:#2b2848; --border-strong:#3b3766;
  --text:#f5f4ff; --text-dim:#9d9abc; --text-faint:#6b6890;
  --brand:#8b5cf6; --brand-strong:#7c3aed; --brand-soft:#a78bfa; --brand-bg:rgba(124,58,237,.16);
  --blue:#3b82f6; --blue-soft:#60a5fa; --green:#22c55e; --gold:#f5b301; --pink:#ec4899; --red:#ef4444;
  --screen:#0b0a18; --nav:#0b0a18;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--screen);color:var(--text);font-family:'Tajawal',system-ui,'Segoe UI',Arial,sans-serif;min-height:100vh}
.app{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--screen);position:relative}
.content{flex:1;padding-bottom:70px}

/* شريط علوي */
.topbar{position:sticky;top:0;z-index:40;background:var(--screen);border-bottom:1px solid var(--border);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.topbar h2{font-size:17px;font-weight:900}
.topbar .bal{display:flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:100px;padding:5px 11px;font-size:12px;font-weight:900;color:var(--blue-soft)}

/* شريط سفلي */
.nav{position:fixed;bottom:0;left:0;right:0;max-width:460px;margin:0 auto;height:62px;background:var(--nav);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding:0 12px;z-index:50}
.nav a{display:flex;align-items:center;justify-content:center;text-decoration:none}
.nav svg{width:26px;height:26px;color:#7d7a9e}
.nav a.on svg{color:var(--brand-soft)}
.nav .plus{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#8b5cf6,#6d28d9);box-shadow:0 6px 18px rgba(124,58,237,.5)}
.nav .plus svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;color:#fff}

/* عام */
.loading{text-align:center;padding:40px 20px;color:var(--text-faint);font-size:13px;font-weight:700}
.empty{text-align:center;padding:50px 24px;color:var(--text-faint)}
.empty .e{font-size:44px;margin-bottom:10px}
.empty .t{font-size:15px;font-weight:900;color:var(--text-dim)}
.empty .s{font-size:12px;font-weight:700;margin-top:4px}
.btn{border:none;font-family:inherit;font-weight:900;border-radius:12px;cursor:pointer}
.btn-primary{background:var(--brand-strong);color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}