:root{
  --bg: #070b16;
  --cyan: #22d3ee;
  --fuchsia: #e879f9;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bg);
  color:#e5e7eb;
  font-family:'Vazirmatn','Space Grotesk',sans-serif;
  overflow-x:hidden;
  min-height:100vh;
}
html[dir="ltr"] body{ font-family:'Space Grotesk','Vazirmatn',sans-serif; }

/* animated background orbs */
.bg-orbs{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px circle at 15% 20%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(700px circle at 85% 75%, rgba(232,121,249,.16), transparent 60%),
    radial-gradient(500px circle at 60% 10%, rgba(99,102,241,.12), transparent 60%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-30px,20px,0) scale(1.08); }
}
main, header{ position:relative; z-index:1; }

/* glass */
.glass{
  background: rgba(18,24,40,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.glass-header{
  background: rgba(9,13,24,.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* logo + shimmer */
.logo-glow{ filter: drop-shadow(0 0 12px rgba(232,121,249,.6)); animation: pulseGlow 3s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ filter:drop-shadow(0 0 8px rgba(232,121,249,.4)); } 50%{ filter:drop-shadow(0 0 18px rgba(34,211,238,.7)); } }

.shimmer{
  background: linear-gradient(100deg, #22d3ee 20%, #e879f9 40%, #a5b4fc 60%, #22d3ee 80%);
  background-size: 200% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation: shimmerMove 5s linear infinite;
}
@keyframes shimmerMove{ to{ background-position: 200% center; } }
.shimmer-text{ animation: blink 1s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.5; } }

/* pills */
.pill{
  background: rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.3);
  color:#a5f3fc;
}

/* toggle */
.toggle{
  width:52px; height:28px; border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15);
  position:relative; cursor:pointer; flex-shrink:0;
  transition: background .3s;
}
.toggle-on{
  background: linear-gradient(90deg, var(--cyan), var(--fuchsia));
  box-shadow: 0 0 16px rgba(232,121,249,.6);
}
.toggle-knob{
  position:absolute; top:2px; left:2px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; transition: transform .3s cubic-bezier(.4,1.6,.5,1);
}
html[dir="rtl"] .toggle-knob{ left:auto; right:2px; }
.toggle-on .toggle-knob{ transform: translateX(24px); }
html[dir="rtl"] .toggle-on .toggle-knob{ transform: translateX(-24px); }

.aras-active{
  animation: arasPulse 2s ease-in-out infinite;
}
@keyframes arasPulse{
  0%,100%{ box-shadow: 0 0 0 rgba(232,121,249,0); }
  50%{ box-shadow: 0 0 24px rgba(232,121,249,.25); }
}

/* optimize button */
.optimize-btn{
  background: linear-gradient(100deg, #06b6d4, #a855f7, #ec4899);
  background-size: 200% auto;
  box-shadow: 0 6px 28px rgba(168,85,247,.4);
  transition: all .3s;
}
.optimize-btn:not(:disabled):hover{
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(168,85,247,.55);
}
.optimize-btn:not(:disabled):active{ transform: translateY(0); }

/* output box */
.output-box{
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:12px;
  max-height:420px;
  overflow:auto;
}
.output-box::-webkit-scrollbar{ width:8px; }
.output-box::-webkit-scrollbar-thumb{ background:rgba(34,211,238,.3); border-radius:8px; }

/* toast */
.toast{ animation: toastIn .3s cubic-bezier(.4,1.6,.5,1); }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%, 20px); } to{ opacity:1; transform:translate(-50%,0); } }

.float{ animation: floaty 3s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

textarea, input{ font-family:'JetBrains Mono', monospace; }
::selection{ background: rgba(232,121,249,.4); }