/* شريط القوائم الجانبي (المالك 2026-10-28: «القوائم بالجهة اليسرى وعرض محتواها بالجهة اليمنى").
   على الشاشات الواسعة: ترويسة كل صفحة (header.top) تصير شريطا ثابتا على اليسار في كل اللغات، والمحتوى على يمينه.
   على الجوال والأجهزة الصغيرة: يبقى الشريط العلوي وزر القائمة كما كانا.
   يُحمَّل آخر ملف تنسيق في الصفحة، ويعمل مع عائلتي الصفحات: الرئيسية (styles.css) والخدمات (ui/base.css). */
:root { --side-w: 256px; }

@media (min-width: 1024px) {
  body { padding-left: var(--side-w); }

  body > header.top {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto; z-index: 40;
    width: var(--side-w); max-width: none; height: auto; margin: 0; padding: 22px 14px 18px;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 0;
    background: linear-gradient(180deg, rgba(255, 200, 87, .055), rgba(255, 200, 87, 0) 180px), #08080a;
    border: 0; border-right: 1px solid rgba(215, 220, 230, .11);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(215, 220, 230, .18) transparent;
  }
  body > header.top > .wrap {
    width: auto; height: auto; min-height: 100%; margin: 0;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
  }

  /* الشعار */
  body > header.top .brand { padding: 2px 10px 20px; margin: 0 0 14px; border-bottom: 1px solid rgba(215, 220, 230, .09); white-space: nowrap; font-size: 16.5px; }
  body > header.top .brand img { height: 36px; width: auto; }
  body > header.top .brand span { display: block; }
  body > header.top .brand small { display: block; font-size: 12px; line-height: 1.3; }

  /* القوائم: عمود، كل رابط بأيقونته */
  body > header.top nav {
    flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    flex-wrap: nowrap; gap: 3px; overflow: visible; max-width: none;
  }
  body > header.top nav > a:not(.nav-dl):not(.getw) {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 11px; margin: 0;
    color: #9b9ea6; font-size: 15px; font-weight: 500; line-height: 1.35; background: transparent;
    transition: color .15s, background .15s;
  }
  body > header.top nav > a:not(.nav-dl):not(.getw):hover { color: #f1f2f4; background: rgba(255, 255, 255, .05); }
  body > header.top nav > a[aria-current="page"]:not(.nav-dl):not(.getw) {
    color: #f1f2f4; background: rgba(255, 200, 87, .09); box-shadow: inset 3px 0 0 #ffc857;
  }
  body > header.top nav > a:not(.nav-dl):not(.getw)::before {
    content: ""; flex: none; width: 19px; height: 19px; background: currentColor; opacity: .9;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  }
  body > header.top nav > a[aria-current="page"]:not(.nav-dl):not(.getw)::before { background: #ffd98a; opacity: 1; }

  /* اللغة وزر المحفظة في أسفل الشريط */
  body > header.top nav .lang { margin: auto 0 0; padding-top: 14px; }
  body > header.top nav > .lang-btn, body > header.top nav > button.lang { margin: auto 0 0; }
  body > header.top .lang-btn, body > header.top nav > button.lang {
    width: 100%; height: 40px; justify-content: flex-start; gap: 10px; padding: 0 12px;
    border-radius: 11px; border: 1px solid rgba(215, 220, 230, .2); background: rgba(255, 255, 255, .02);
    color: #c9ccd2; font-size: 14px; text-align: start;
  }
  body > header.top nav > button.lang { display: flex; align-items: center; }
  body > header.top .lang-btn:hover, body > header.top nav > button.lang:hover { color: #f1f2f4; border-color: rgba(255, 200, 87, .4); }
  body > header.top .lang-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; inset-inline: 0; min-width: 0; }
  body > header.top nav > a.nav-dl, body > header.top nav > a.getw {
    display: flex; align-items: center; justify-content: center; text-align: center;
    margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; white-space: normal; line-height: 1.3;
  }
  body > header.top .menu-btn, body > header.top .mobile-menu { display: none !important; }

  /* مساعد الموقع: يمين الشاشة دائما، بعيدا عن الشريط */
  .ma-root { inset-inline-end: auto; inset-inline-start: auto; left: auto; right: 22px; }
}


/* الجوال والشاشات الأصغر من 1024: زر ☰ يفتح القائمة درجا من اليسار بنفس الأيقونات (بدل لائحة منسدلة) */
@media (max-width: 1023px) {
  nav.main .nav-link { display: none; }
  .top .wrap { position: relative; }
  /* a blurred bar holds a fixed child inside it: no blur here, a near-solid bar instead */
  body > header.top { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 10, 12, .96); }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; border-radius: 10px; border: 1px solid rgba(215, 220, 230, .24); background: transparent; color: #f1f2f4; cursor: pointer; }
  body > header.top .mobile-menu {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto; z-index: 80;
    width: min(300px, 84vw); padding: 18px 12px; margin: 0;
    display: flex; flex-direction: column; gap: 3px; overflow-y: auto;
    background: linear-gradient(180deg, rgba(255, 200, 87, .055), rgba(255, 200, 87, 0) 180px), #08080a;
    border: 0; border-right: 1px solid rgba(215, 220, 230, .14); border-radius: 0;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6);
    animation: mm-in .18s ease-out;
  }
  body > header.top .mobile-menu[hidden] { display: none; }
  body > header.top .mm-link { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 11px; color: #c9ccd2; font-size: 15.5px; }
  body > header.top .mm-link[aria-current="page"] { color: #f1f2f4; background: rgba(255, 200, 87, .09); box-shadow: inset 3px 0 0 #ffc857; }
  body > header.top .mm-link::before { content: ""; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
  body > header.top .mm-link[aria-current="page"]::before { background: #ffd98a; }
}
@keyframes mm-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* الأيقونات (خط واحد، تتلون بلون الرابط) */
body > header.top :is(nav > a, .mm-link) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link):is([href="./"], [href="../"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5'/%3E%3Cpath d='M5 9v11h5v-6h4v6h5V9'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href$="#wallet"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5.5A1.5 1.5 0 0 0 17.5 4H5a2 2 0 0 0 0 4h14a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href^="https://swap.madar-network.com/"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4L3 8l4 4'/%3E%3Cpath d='M3 8h14'/%3E%3Cpath d='M17 20l4-4-4-4'/%3E%3Cpath d='M21 16H7'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href*="#trade"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 6-7'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href*="names/"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href*="forum/"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href*="services.html"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href*="wallet-help"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.2a2.5 2.5 0 1 1 3.4 2.3c-.7.3-1 .9-1 1.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href*="privacy"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6l8-3z'/%3E%3C/svg%3E"); }
body > header.top :is(nav > a, .mm-link)[href*="github.com"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6l-6 6 6 6'/%3E%3Cpath d='M16 6l6 6-6 6'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) { body > header.top nav > a { transition: none !important; } }

/* في العربية يبدأ السطر من اليمين: علامة الصفحة الحالية على الجهة اليمنى من الزر */
[dir="rtl"] body > header.top nav > a[aria-current="page"]:not(.nav-dl):not(.getw),
[dir="rtl"] body > header.top .mm-link[aria-current="page"] { box-shadow: inset -3px 0 0 #ffc857; }

/* التذييل الجديد (2026-10-28): الشعار وزر الإضافة، ثم المنتجات والمساعدة وحساباتنا، وتحذير «لا عملة لمدار» */
footer.sfoot { margin-top: 30px; padding: 44px 0 90px; border-top: 1px solid var(--line, rgba(215, 220, 230, .11)); color: var(--muted, #9b9ea6); font-size: 14px;
  background: linear-gradient(180deg, rgba(255, 200, 87, .03), rgba(255, 200, 87, 0) 160px); }
footer.sfoot .sf-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; align-items: start; }
footer.sfoot .sf-logo { display: inline-flex; align-items: center; gap: 10px; color: #f1f2f4; font-weight: 700; font-size: 17px; }
footer.sfoot .sf-logo img { height: 26px; width: auto; }
footer.sfoot .sf-brand p { margin: 12px 0 16px; max-width: 300px; }
footer.sfoot .sf-cta { padding: 10px 18px; font-size: 14px; }
footer.sfoot .sf-col { display: grid; gap: 9px; justify-items: start; }
footer.sfoot .sf-col h4 { margin: 2px 0 6px; color: #f1f2f4; font-size: 14.5px; }
footer.sfoot .sf-col a:hover { color: #ffd98a; }
footer.sfoot .sf-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line, rgba(215, 220, 230, .11)); font-size: 13px; }
footer.sfoot .sf-warn { color: #ffd98a; }
@media (max-width: 860px) { footer.sfoot .sf-grid { grid-template-columns: 1fr 1fr; } footer.sfoot .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { footer.sfoot .sf-grid { grid-template-columns: 1fr; } }