/* base.css — المتغيرات (ألوان العلامة) + الهيكل العام + الشريط العلوي + البطاقات */

  .fa-solid { margin-inline-end: .35em; }

  :root {
    --bg:#0a0e1a; --card:rgba(255,255,255,.045); --card-solid:#121a2e;
    --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
    --text:#eef2ff; --muted:#8b96b0;
    --accent:#fa0a1b; --accent2:#ff4d3d; --accent-soft:rgba(250,10,27,.14);
    --ok:#34d399; --err:#f87171; --warn:#fbbf24;
    --grad:linear-gradient(135deg,#fa0a1b,#ff5b3d);
    --grad-red:linear-gradient(135deg,#ef4444,#f97316);
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html { scroll-behavior:smooth; }
  body {
    margin:0; font-family:"Tajawal",system-ui,sans-serif; color:var(--text);
    min-height:100vh; padding:24px 16px 40px;
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(250,10,27,.13), transparent),
      radial-gradient(ellipse 60% 40% at 90% 110%, rgba(255,91,61,.09), transparent),
      var(--bg);
  }
  /* هالات ضوئية خلفية */
  body::before, body::after {
    content:""; position:fixed; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none;
  }
  body::before { width:340px; height:340px; background:rgba(250,10,27,.10); top:-80px; right:-80px; }
  body::after { width:300px; height:300px; background:rgba(255,91,61,.10); bottom:-60px; left:-60px; }

  .wrap { position:relative; z-index:1; max-width:560px; margin:0 auto; }

  /* ─── الشريط العلوي ─── */
  .topbar {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:22px; padding:4px 2px;
  }
  .brand { display:flex; align-items:center; gap:10px; }
  .logo {
    width:42px; height:42px; border-radius:13px; background:var(--card);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(250,10,27,.18);
  }
  .logo img { width:26px; height:26px; object-fit:contain; }
  .brand b { font-size:21px; font-weight:900; letter-spacing:.3px; }
  .brand small { display:block; color:var(--muted); font-size:11px; font-weight:400; margin-top:1px; }
  .user-chip {
    display:flex; align-items:center; gap:8px; background:var(--card);
    border:1px solid var(--border); border-radius:999px; padding:5px 6px 5px 14px;
    backdrop-filter:blur(12px);
  }
  .user-chip .avatar {
    width:28px; height:28px; border-radius:50%; background:var(--grad);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff;
  }
  .user-chip span { font-size:13px; font-weight:700; }
  .icon-btn {
    width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
    background:transparent; color:var(--muted); cursor:pointer; font-size:15px;
    transition:.2s; display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover { color:var(--err); border-color:var(--err); transform:rotate(-8deg); }

  /* ─── البطاقات ─── */
  .card {
    background:var(--card); border:1px solid var(--border); border-radius:22px;
    padding:24px; backdrop-filter:blur(14px);
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    animation:rise .5s cubic-bezier(.2,.9,.3,1) both;
  }
  @keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

  .center { text-align:center; }
  .hero-emoji { font-size:44px; margin-bottom:6px; }
  h1 { font-size:26px; font-weight:900; margin:0 0 6px; }
  .quote { color:var(--muted); font-size:13px; line-height:1.9; margin:0 0 22px; font-weight:400; }