/* =========================================================
   فونت آراد — فایل‌های وزن‌ها رو داخل public/fonts/Arad بذار
   (راهنمای کامل توی public/fonts/Arad/README.md هست)
   تا اون موقع، Tahoma به‌عنوان جایگزین موقت نمایش داده می‌شه.
========================================================= */
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad/Arad-Light.woff2') format('woff2'),
       url('/fonts/Arad/Arad-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad/Arad-Regular.woff2') format('woff2'),
       url('/fonts/Arad/Arad-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad/Arad-Medium.woff2') format('woff2'),
       url('/fonts/Arad/Arad-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad/Arad-Bold.woff2') format('woff2'),
       url('/fonts/Arad/Arad-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad/Arad-Black.woff2') format('woff2'),
       url('/fonts/Arad/Arad-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* فونت انگلیسی/دیتا — از گوگل‌فونتس (نیاز به اینترنت داره؛ اگه سرور
   آفلاینه، این خط رو حذف کن و به‌جاش یه مونو-فونت لوکال بذار) */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#0B0E1A;
  --bg-soft:#0F1424;
  --panel:#131829;
  --panel-2:#1B2136;
  --border:#262D45;
  --border-soft:#1E2439;
  --accent:#7C5CFC;
  --accent-soft:#7C5CFC33;
  --accent-2:#34D9C7;
  --accent-2-soft:#34D9C733;
  --warn:#FFD166;
  --danger:#FF6B6B;
  --text:#F1F3FA;
  --muted:#8891A8;
  --muted-2:#5E6785;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;
  --font-fa:'Arad','Tahoma',sans-serif;
  --font-mono:'Space Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-fa);
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font-fa);cursor:pointer;border:none;}
.ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--font-mono);}
/* برای بخش‌های عددی/انگلیسی داخل متن فارسی — فقط همون تیکه رو مونو کن،
   نه کل خط رو؛ چون فونت Space Mono حرف فارسی نداره و باعث می‌شه کلمات
   فارسی کنارش با فونت پیش‌فرض مرورگر (نه Arad) نمایش داده بشن. */
.mono-num{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate;}
.container{max-width:1160px;margin:0 auto;padding:0 28px;}
.hidden{display:none !important;}

#starfield{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ---------- buttons ---------- */
.btn{
  padding:11px 22px;border-radius:100px;font-size:14.5px;font-weight:600;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent);}
.btn-primary{background:linear-gradient(135deg,var(--accent),#5A3FE0);color:#fff;box-shadow:0 8px 24px -8px var(--accent-soft);}
.btn-primary:hover{box-shadow:0 10px 30px -6px var(--accent);}
.btn-cyan{background:var(--accent-2);color:#06231F;}
.btn-cyan:hover{box-shadow:0 10px 28px -8px var(--accent-2);}
.btn-block{width:100%;justify-content:center;padding:13px;}
.btn-sm{padding:8px 16px;font-size:13px;border-radius:100px;}
.btn[disabled]{opacity:.6;pointer-events:none;}

.wonderverse-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.wonderverse-link:hover{
  text-decoration: underline;
}

.wonderverse-favicon{
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,26,0.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:0.2px;}
.brand .mark{width:34px;height:34px;flex:none;}
.brand small{display:block;font-family:var(--font-fa);font-weight:400;font-size:11px;color:var(--muted-2);margin-top:1px;}
.nav-links{display:flex;align-items:center;gap:34px;font-size:15px;color:var(--muted);}
.nav-links a{transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.nav-actions{display:flex;align-items:center;gap:12px;}
@media(max-width:820px){ .nav-links{display:none;} }

.nav-profile{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 6px;border-radius:100px;border:1px solid var(--border);transition:border-color .2s;}
.nav-profile:hover{border-color:var(--accent);}
.nav-avatar{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;
}
.nav-uname{font-size:13.5px;font-weight:600;}
@media(max-width:520px){ .nav-uname{display:none;} }

footer{position:relative;z-index:1;border-top:1px solid var(--border-soft);padding:44px 0;color:var(--muted-2);font-size:13.5px;}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  padding:13px 22px;border-radius:100px;font-size:13.5px;z-index:500;opacity:0;
  transition:.25s;pointer-events:none;box-shadow:0 12px 30px -10px #000a;display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}