/* ===================================================================
   BASE — design tokens + reset + primitives shared by site & admin
=================================================================== */

:root{
  --ink:#050609;
  --ink-2:#0A0C16;
  --panel:#0D1020;
  --panel-glass:rgba(13,16,32,0.66);
  --panel-2:#12162E;
  --panel-3:#171B38;
  --line:rgba(237,239,247,0.10);
  --line-strong:rgba(237,239,247,0.20);
  --text:#EDEFF7;
  --text-dim:rgba(237,239,247,0.60);
  --text-dimmer:rgba(237,239,247,0.40);

  --cyan:#00E5FF;
  --cyan-soft:rgba(0,229,255,0.14);
  --violet:#B24BFF;
  --violet-soft:rgba(178,75,255,0.14);
  --mint:#6BFFB8;
  --mint-soft:rgba(107,255,184,0.14);
  --danger:#FF5C7A;
  --danger-soft:rgba(255,92,122,0.14);
  --warn:#FFC94D;

  /* رنگ تأکیدیِ فوکوس و فیلدها؛ پنل مدیریت همین فیروزه‌ای رو نگه می‌داره و site.css عوضش می‌کنه */
  --accent:var(--cyan);
  --accent-tint:rgba(0,229,255,0.04);
  --accent-ring:rgba(0,229,255,0.12);

  --grad-brand:linear-gradient(135deg, var(--cyan), var(--violet));
  --grad-brand-soft:linear-gradient(135deg, rgba(0,229,255,0.14), rgba(178,75,255,0.14));
  --grad-text:linear-gradient(100deg, var(--cyan), var(--violet) 65%, var(--mint));

  --shadow-sm:0 2px 10px rgba(0,0,0,0.25);
  --shadow-md:0 12px 34px rgba(0,0,0,0.45);
  --shadow-glow-cyan:0 0 0 1px rgba(0,229,255,0.16), 0 10px 32px rgba(0,229,255,0.14);
  --shadow-glow-violet:0 0 0 1px rgba(178,75,255,0.16), 0 10px 34px rgba(178,75,255,0.20);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.9,.32,1.13);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; color-scheme:dark; }
body{
  font-family:'Vazirmatn', sans-serif;
  background:var(--ink);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono{ font-family:'Space Mono', monospace; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea, select{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(0,229,255,0.25); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--panel-3); border-radius:99px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--panel-2); }
*{ scrollbar-color:var(--panel-3) transparent; scrollbar-width:thin; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.hidden{ display:none !important; }
.spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; }

/* ---------- ambient background: orbs + grid + grain ---------- */
/* این سه دایره‌ی تارِ متحرک، گران‌ترین چیزِ صفحه برای کارت گرافیک‌ان. با will-change و
   transform: translateZ(0) هر کدوم یه لایه‌ی جدا می‌گیرن، پس مرورگر تاریِ ۱۰۰ پیکسلی رو
   یک بار حساب می‌کنه و بعد فقط لایه رو جابه‌جا می‌کنه، به‌جای اینکه هر فریم از نو تار کنه. */
.orb{
  position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0;
  mix-blend-mode:screen; will-change:transform; transform:translateZ(0);
}
.orb-cyan{ background:var(--cyan); width:460px; height:460px; top:-160px; inset-inline-end:-130px; opacity:.26; }
.orb-violet{ background:var(--violet); width:420px; height:420px; bottom:-170px; inset-inline-start:-110px; opacity:.22; }
.orb-mint{ background:var(--mint); width:300px; height:300px; top:40%; left:50%; opacity:.09; }
@media (prefers-reduced-motion: no-preference){
  .orb-cyan{ animation:floatA 19s ease-in-out infinite; }
  .orb-violet{ animation:floatB 23s ease-in-out infinite; }
  .orb-mint{ animation:floatC 27s ease-in-out infinite; }
}
/* روی گوشی‌های کوچک، هم صفحه جا نداره هم پردازنده‌ی گرافیکی ضعیف‌تره: دایره‌ی سوم حذف و
   تاری کمتر می‌شه. ظاهر تقریباً یکیه، ولی اسکرول روی گوشی‌های ارزون محسوس روون‌تر می‌شه. */
@media (max-width: 600px){
  .orb{ filter:blur(70px); }
  .orb-mint{ display:none; }
  .orb-cyan{ width:300px; height:300px; }
  .orb-violet{ width:280px; height:280px; }
}
@keyframes floatA{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-50px,70px) } }
@keyframes floatB{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(60px,-50px) } }
@keyframes floatC{ 0%,100%{ transform:translate(-50%,-50%) scale(1) } 50%{ transform:translate(-50%,-50%) scale(1.3) } }

.grid-veil{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(237,239,247,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,239,247,0.05) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 60% 45% at 50% 0%, black, transparent 70%);
  mask-image:radial-gradient(ellipse 60% 45% at 50% 0%, black, transparent 70%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- surfaces ---------- */
.card{
  background:var(--panel-glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset, var(--shadow-sm);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
/* backdrop-filter یکی از گران‌ترین ویژگی‌های CSS‌ه و داشبورد ممکنه ده‌ها کارت داشته باشه؛
   روی موبایل به‌جاش پس‌زمینه‌ی مات می‌ذاریم. چون پشت کارت‌ها زمینه‌ی تیره‌ست، تفاوتش
   تقریباً دیده نمی‌شه ولی اسکرول روی گوشی واضحاً روون‌تر می‌شه. */
@media (max-width: 600px){
  .card{
    background:#0E1122;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ---------- buttons ---------- */
.btn-neon{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--r-md); font-weight:700; font-size:14px;
  background:var(--grad-brand); color:#04050A;
  box-shadow:0 0 0 1px rgba(255,255,255,0.10) inset, 0 8px 28px rgba(178,75,255,0.28);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-neon::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease-out);
}
.btn-neon:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,0.14) inset, 0 12px 36px rgba(178,75,255,0.38); }
.btn-neon:hover::before{ transform:translateX(120%); }
.btn-neon:active{ transform:translateY(0) scale(.98); }
.btn-neon:disabled{ opacity:.5; pointer-events:none; }

.btn-ghost-neon{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:var(--r-md); font-weight:600; font-size:14px;
  background:rgba(237,239,247,0.05); color:var(--text); border:1px solid var(--line);
  transition:background .2s, border-color .2s, transform .2s var(--ease);
}
.btn-ghost-neon:hover{ background:rgba(237,239,247,0.09); border-color:var(--line-strong); transform:translateY(-1px); }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--grad-brand); color:#04050A; font-weight:700; font-size:14px;
  border-radius:var(--r-md); padding:13px 22px; box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 8px 26px rgba(0,229,255,0.20);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset, 0 12px 32px rgba(0,229,255,0.28); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-primary.full{ width:100%; }
.btn-primary:disabled{ opacity:.5; pointer-events:none; }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(237,239,247,0.06); color:var(--text); font-size:14px; font-weight:500;
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 16px;
  transition:background .2s, border-color .2s;
}
.btn-ghost:hover{ background:rgba(237,239,247,0.10); border-color:var(--line-strong); }

.btn-danger{
  background:var(--danger-soft); color:var(--danger); border:1px solid rgba(255,92,122,0.4);
  border-radius:var(--r-sm); padding:9px 14px; font-size:12px; font-weight:600;
  transition:background .2s;
}
.btn-danger:hover{ background:rgba(255,92,122,0.22); }

/* ---------- form fields ---------- */
.field{ margin-bottom:14px; text-align:right; }
.field label{ display:block; font-size:11.5px; color:var(--text-dim); margin-bottom:7px; }
.field input, .field textarea, .field select{
  width:100%; background:rgba(237,239,247,0.045); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-sm); padding:13px 14px; font-size:14px; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 3px var(--accent-ring);
}
.field select option{ background:#0D1020; color:#EDEFF7; }
.field textarea{ resize:none; line-height:1.7; }
.error-text{ font-size:12px; color:var(--danger); margin-bottom:12px; }

/* ---------- badge ---------- */
.badge{
  font-family:'Space Mono', monospace; font-size:11px; padding:5px 11px; border-radius:var(--r-pill);
  color:var(--cyan); background:var(--cyan-soft); border:1px solid rgba(0,229,255,0.33);
  display:inline-block; white-space:nowrap;
}
.badge.muted{ color:var(--text-dim); background:var(--panel-2); border-color:var(--line); }
.badge.danger{ color:var(--danger); background:var(--danger-soft); border-color:rgba(255,92,122,0.4); }
.badge.mint{ color:var(--mint); background:var(--mint-soft); border-color:rgba(107,255,184,0.35); }