:root {
  --bg-color: #10101a;
  --card-bg: rgba(26, 26, 46, 0.7);
  --primary-glow: #00aaff;
  --secondary-glow: #ff00c8;
  --text-color: #f0f0f0;
  --muted-text: rgba(240, 240, 240, 0.6);
  --border-color: rgba(0, 170, 255, 0.2);
  --error-color: #ff4d4d;
  --success-color: #00ffaa;
  --font-family: 'Vazirmatn', sans-serif;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: var(--text-color);
  overflow: hidden;
}

/* --- Animated Background --- */
.background-orb-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); }
.orb1 { width: 400px; height: 400px; background-color: var(--primary-glow); top: -100px; left: -150px; animation: move-orb1 15s infinite alternate; }
.orb2 { width: 300px; height: 300px; background-color: var(--secondary-glow); bottom: -50px; right: -100px; animation: move-orb2 18s infinite alternate; }
.orb3 { width: 250px; height: 250px; background: #5a00ff; bottom: 20%; left: 25%; animation: move-orb3 20s infinite alternate; }
@keyframes move-orb1 { from { transform: translate(0, 0); } to { transform: translate(200px, 150px); } }
@keyframes move-orb2 { from { transform: translate(0, 0); } to { transform: translate(-250px, -100px); } }
@keyframes move-orb3 { from { transform: scale(1); } to { transform: scale(1.5); } }

/* --- Login Card --- */
.wrap { width: 100%; max-width: 400px; padding: 20px; }
.card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 40px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* --- کانتینر ویدیو برای موقعیت‌دهی دکمه صدا --- */
.video-container {
  position: relative;
  margin-bottom: 30px; /* فاصله از عنوان */
}

/* --- استایل لوگو (ویدیو) با سایز جدید --- */
.logo {
  height: 140px; /* سایز جدید و بزرگ‌تر */
  width: auto;
  filter: drop-shadow(0 0 20px var(--primary-glow));
}

/* --- استایل دکمه فعال‌سازی صدا --- */
.unmute-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
  transition: all 0.3s ease;
}
.unmute-button:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 15px var(--primary-glow);
}
.unmute-button.hidden {
  display: none;
}

.card-header { margin-bottom: 20px; }
h1 { font-size: 1.8rem; margin: 10px 0; font-weight: 700; color: #fff; }
.muted { color: var(--muted-text); font-size: 0.9rem; margin-bottom: 30px; }

/* --- Form Elements --- */
.input-group { margin-bottom: 25px; }
input { width: 100%; padding: 15px; background-color: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; font-size: 1.5rem; color: var(--text-color); text-align: center; letter-spacing: 0.5em; transition: all 0.3s ease; }
input::placeholder { letter-spacing: normal; color: var(--muted-text); }
input:focus { outline: none; border-color: var(--primary-glow); box-shadow: 0 0 20px rgba(0, 170, 255, 0.5); }
button { width: 100%; padding: 15px; background-image: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow)); background-size: 200% auto; color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.4s ease; }
button:hover { background-position: right center; box-shadow: 0 0 25px var(--primary-glow); transform: translateY(-3px); }

/* --- Messages --- */
.msg { margin-top: 20px; padding: 12px; border-radius: 8px; font-weight: 400; display: none; }
.msg.show { display: block; }
.msg.err { background-color: rgba(255, 77, 77, 0.15); border: 1px solid var(--error-color); color: var(--error-color); }
.msg.ok { background-color: rgba(0, 255, 170, 0.15); border: 1px solid var(--success-color); color: var(--success-color); }