/* ============================================================
   BrandingRE LUX — Design System v6 «Violet Glass»
   شیشهٔ بنفش پریمیوم: فضای عمیق بنفش، پنل‌های مات و شفاف،
   لهجهٔ طلایی برای لحظه‌های لوکس — بدون هیچ ایموجی.
   ============================================================ */
:root{
  --bg-0:#070410; --bg-1:#0b0618; --bg-2:#130a26; --bg-3:#1a0f33;
  --ink:#f4f0fb; --ink-2:#cdc4e4; --muted:#9b90bd; --faint:#6e6390;
  --gold:#e8c874; --gold-2:#f6dfa0; --gold-deep:#b98b29;
  --purple:#8e5cff; --purple-2:#c9a6ff; --violet:#5b2ea6;
  --lilac:#a78bfa; --lilac-2:#c4b5fd;
  --cyan:#3fd9e8; --green:#34d399; --red:#ef4444; --pink:#f472b6;
  --glass:rgba(167,139,250,.07); --glass-2:rgba(167,139,250,.12);
  --stroke:rgba(196,181,253,.15); --stroke-2:rgba(232,200,116,.3);
  --stroke-violet:rgba(167,139,250,.3);
  --shadow-lg:0 30px 90px rgba(2,0,10,.6);
  --glow-violet:0 0 60px rgba(139,92,246,.12);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --ease:cubic-bezier(.22,.9,.28,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --grad-gold:linear-gradient(135deg,#f6dfa0,#e8c874 45%,#b98b29);
  --grad-purple:linear-gradient(135deg,#d6bcff,#9d6bff 50%,#6a35c9);
  --grad-mix:linear-gradient(120deg,#f6dfa0,#d6bcff 55%,#9d6bff);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg-0);
  font-family:Vazirmatn,Tahoma,Arial,sans-serif; font-size:14px; line-height:1.9;
  min-height:100vh; overflow-x:hidden; position:relative;
}
/* پس‌زمینه زنده: کهکشان زنده — سحابی‌ها + راه شیری + ستاره‌ها */
.lux-bg{position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(58% 44% at 80% -6%, rgba(88,28,135,.34), transparent 64%),
    radial-gradient(42% 38% at 8% 16%, rgba(30,27,75,.5), transparent 60%),
    radial-gradient(46% 36% at 24% 88%, rgba(14,36,86,.42), transparent 62%),
    radial-gradient(40% 32% at 88% 78%, rgba(112,26,117,.18), transparent 62%),
    radial-gradient(55% 48% at 50% 112%, rgba(49,46,129,.34), transparent 66%),
    linear-gradient(115deg, transparent 42%, rgba(230,225,255,.045) 50%, transparent 58%),
    linear-gradient(180deg,#06030f,#04020f 40%,#090518);
}
.lux-bg::before{content:""; position:absolute; inset:-25%;
  background:conic-gradient(from 90deg at 50% 50%, transparent 0 40%, rgba(167,139,250,.09) 46%, transparent 52%, transparent 68%, rgba(232,200,116,.05) 76%, transparent 84%);
  animation:auroraSpin 52s linear infinite;}
.lux-bg::after{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px), radial-gradient(rgba(196,181,253,.6) .7px, transparent .8px);
  background-size:130px 130px, 210px 210px; background-position:0 0, 60px 90px; opacity:.15;
  animation:starDrift 90s linear infinite;}
canvas.lux-stars{position:fixed; inset:0; z-index:-2; pointer-events:none}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
@keyframes starDrift{to{background-position:130px 260px, 270px 470px}}
/* تایپوگرافی */
h1,h2,h3,h4{line-height:1.35; font-weight:800; margin:0}
.lux-kicker{font:600 10px/1.6 "Space Grotesk",Vazirmatn,sans-serif; letter-spacing:.28em; color:var(--lilac-2); text-transform:uppercase; display:inline-flex; align-items:center; gap:10px}
.lux-kicker::before,.lux-kicker::after{content:""; height:1px; width:26px; background:linear-gradient(90deg,transparent,var(--lilac)); }
.lux-kicker::after{background:linear-gradient(90deg,var(--lilac),transparent)}
.lux-title-grad{background:var(--grad-mix); -webkit-background-clip:text; background-clip:text; color:transparent}
a{color:var(--lilac-2)}
/* کارت شیشه‌ای بنفش */
.lux-card{position:relative; border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:linear-gradient(158deg, rgba(167,139,250,.09), rgba(124,58,237,.045) 45%, rgba(20,10,40,.55));
  backdrop-filter:blur(24px) saturate(1.25); -webkit-backdrop-filter:blur(24px) saturate(1.25);
  box-shadow:var(--shadow-lg), var(--glow-violet), inset 0 1px 0 rgba(255,255,255,.07);
  transform-style:preserve-3d; transition:transform .5s var(--ease), border-color .35s, box-shadow .5s;}
.lux-card:hover{border-color:var(--stroke-violet); box-shadow:0 40px 110px rgba(2,0,10,.65), 0 0 70px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.09)}
.lux-card--tilt{will-change:transform}
/* قاب گرادیانی متحرک */
.lux-frame{position:relative; border-radius:var(--r-lg); padding:1px; overflow:hidden}
.lux-frame::before{content:""; position:absolute; inset:-60%;
  background:conic-gradient(from var(--fa,0deg), transparent 0 30%, rgba(232,200,116,.5) 38%, rgba(167,139,250,.55) 50%, transparent 60%);
  animation:frameSpin 5.5s linear infinite;}
@keyframes frameSpin{to{--fa:360deg; transform:rotate(360deg)}}
.lux-frame>.lux-frame-in{position:relative; border-radius:calc(var(--r-lg) - 1px);
  background:linear-gradient(165deg, rgba(30,15,58,.92), rgba(10,5,22,.94));
  backdrop-filter:blur(24px) saturate(1.2); -webkit-backdrop-filter:blur(24px) saturate(1.2); z-index:1}
/* دکمه‌ها */
.lux-btn{--bh:48px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--bh); padding:12px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font:700 13.5px/1 Vazirmatn,sans-serif; color:#1a0d02; text-decoration:none; user-select:none;
  background:var(--grad-gold); box-shadow:0 12px 34px rgba(232,200,116,.22), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .3s var(--spring), box-shadow .35s, filter .3s; overflow:hidden; white-space:nowrap}
.lux-btn::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(120%); transition:transform .7s var(--ease)}
.lux-btn:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 18px 44px rgba(232,200,116,.34), inset 0 1px 0 rgba(255,255,255,.6)}
.lux-btn:hover::after{transform:translateX(-120%)}
.lux-btn:active{transform:translateY(0) scale(.99)}
.lux-btn--ghost{background:rgba(167,139,250,.07); color:var(--ink); border-color:var(--stroke); box-shadow:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.lux-btn--ghost:hover{border-color:var(--stroke-violet); box-shadow:0 12px 30px rgba(139,92,246,.16)}
.lux-btn--purple{background:var(--grad-purple); color:#fff; box-shadow:0 12px 34px rgba(139,92,246,.34), inset 0 1px 0 rgba(255,255,255,.35)}
.lux-btn--sm{--bh:38px; padding:9px 18px; font-size:12px}
.lux-btn svg{width:15px; height:15px; flex:0 0 15px}
/* چیپ و برچسب */
.lux-chip{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:11px; font-weight:600;
  border:1px solid var(--stroke); background:rgba(167,139,250,.06); color:var(--ink-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.lux-chip svg{width:12px; height:12px; flex:0 0 12px}
.lux-chip--gold{border-color:var(--stroke-2); color:var(--gold-2); background:rgba(232,200,116,.07)}
.lux-chip--live{border-color:rgba(52,211,153,.3); color:#a7f3d0; background:rgba(52,211,153,.07)}
.lux-dot{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor}
.lux-dot--pulse{animation:dotPulse 1.8s ease-in-out infinite}
@keyframes dotPulse{50%{opacity:.35; transform:scale(.8)}}
/* فرم */
.lux-field{display:grid; gap:8px}
.lux-label{font-size:12px; font-weight:700; color:var(--ink-2)}
.lux-input,.lux-select,.lux-textarea{width:100%; border-radius:var(--r-sm); border:1px solid var(--stroke);
  background:rgba(167,139,250,.05); color:var(--ink); padding:13px 16px; font:500 13.5px/1.6 Vazirmatn,sans-serif; outline:0;
  transition:border-color .3s, box-shadow .3s, background .3s}
.lux-input:focus,.lux-select:focus,.lux-textarea:focus{border-color:var(--stroke-violet); box-shadow:0 0 0 4px rgba(139,92,246,.14); background:rgba(167,139,250,.08)}
.lux-select option{background:#150b2c; color:var(--ink)}
.lux-textarea{min-height:120px; resize:vertical}
/* جداول و آیتم‌ها */
.lux-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; border-radius:var(--r-sm); border:1px solid var(--stroke); background:rgba(167,139,250,.045); transition:.3s}
.lux-row:hover{border-color:var(--stroke-violet); background:rgba(167,139,250,.08); transform:translateX(-3px)}
/* ستاره زنده — چهارپر CSS خالص، بدون ایموجی */
.lux-star{position:relative; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0 3%, var(--sc,#e8c874) 11%, rgba(139,92,246,.16) 50%, transparent 70%);
  filter:drop-shadow(0 0 18px var(--sc,#e8c874))}
.lux-star::before{content:""; position:absolute; inset:-18%; border-radius:50%; border:1px dashed rgba(196,181,253,.3); animation:orbit 16s linear infinite}
.lux-star::after{content:""; width:.4em; height:.4em; background:#fff;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter:drop-shadow(0 0 8px #fff)}
@keyframes orbit{to{transform:rotate(360deg)}}
/* انیمیشن‌های ظاهرشدن */
.lux-reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.lux-reveal.is-in{opacity:1; transform:none}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.lux-float{animation:floatY 6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 0 24px rgba(167,139,250,.2)}50%{box-shadow:0 0 54px rgba(167,139,250,.42)}}
.lux-glow{animation:glowPulse 3.2s ease-in-out infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.lux-shimmer{background:linear-gradient(100deg,rgba(196,181,253,.05) 40%,rgba(196,181,253,.14) 50%,rgba(196,181,253,.05) 60%); background-size:200% 100%; animation:shimmer 2.6s linear infinite}
/* اسکرول‌بار */
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(#9d6bff,#5b2ea6); border-radius:99px; border:2px solid var(--bg-0)}
::selection{background:rgba(139,92,246,.42)}
/* ابزار */
.lux-grid{display:grid; gap:16px}
.lux-muted{color:var(--muted)} .lux-small{font-size:11.5px}
.lux-mono{font-family:"Space Grotesk",ui-monospace,monospace; direction:ltr; letter-spacing:.06em}
.lux-hr{height:1px; border:0; background:linear-gradient(90deg,transparent,var(--stroke),transparent); margin:20px 0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.15s !important}
}