/* styles.css */
:root {
  --primary:#0b3b66;
  --accent:#33c43f;
  --bg:linear-gradient(180deg,#eef4fb,#f8fcff);
  --bg-dark:#050915;
  --text:#061022;
  --text-muted:#6b7280;
  --radius:20px;
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow:hidden;
  text-align:center;
  color:var(--text);
  transition:background .4s ease, color .4s ease;
}

body.dark {
  background:radial-gradient(circle at top, #111827, #020617 60%);
  color:#e5e7eb;
}

.wrapper {
  position:relative;
  z-index:2;
  padding:32px 24px 48px;
  border-radius:32px;
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,0.78);
  box-shadow:0 20px 60px rgba(15,23,42,0.18);
  max-width:520px;
  width:92%;
}

body.dark .wrapper {
  background:rgba(15,23,42,0.86);
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
}

.logo {
  width:120px;
  height:120px;
  border-radius:24px;
  object-fit:contain;
  animation:fadeIn 1.2s ease;
}

.title {
  font-size:2.7rem;
  margin:20px 0 10px;
  color:var(--primary);
  font-weight:900;
  animation:fadeUp 1s ease;
}

body.dark .title {
  color:#e5e7eb;
}

.subtitle {
  font-size:1rem;
  color:var(--text-muted);
  max-width:460px;
  margin:0 auto;
  animation:fadeUp 1.3s ease;
}

body.dark .subtitle {
  color:#9ca3af;
}

.notify-box {
  margin-top:26px;
  display:flex;
  gap:10px;
  justify-content:center;
  animation:fadeUp 1.6s ease;
  flex-wrap:wrap;
}

input[type="email"] {
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #d9e4f3;
  width:260px;
  font-size:15px;
  outline:none;
  background:rgba(255,255,255,0.96);
}

body.dark input[type="email"] {
  border-color:#1f2937;
  background:#020617;
  color:#e5e7eb;
}

button {
  padding:14px 20px;
  border-radius:14px;
  border:none;
  background:linear-gradient(90deg,#0b3b66,#1c4d82);
  color:white;
  font-weight:800;
  cursor:pointer;
  font-size:15px;
  box-shadow:0 12px 24px rgba(12,45,102,0.35);
  transition:transform 0.25s ease, box-shadow 0.25s ease, opacity .2s ease;
}

button:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 32px rgba(12,45,102,0.45);
}

button:disabled {
  opacity:0.6;
  cursor:default;
  transform:none;
  box-shadow:none;
}

.lang-switch {
  position:fixed;
  top:18px;
  right:18px;
  display:flex;
  gap:6px;
  z-index:10;
}

.lang-switch button {
  background:rgba(255,255,255,0.9);
  border:1px solid #d0d9e5;
  color:#0b3b66;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,0.12);
}

body.dark .lang-switch button {
  background:rgba(15,23,42,0.95);
  border-color:#1f2937;
  color:#e5e7eb;
}

.lang-switch button.active {
  background:linear-gradient(90deg,#0b3b66,#1c4d82);
  color:#fff;
  border-color:transparent;
}

.theme-toggle {
  position:fixed;
  top:18px;
  left:18px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.95);
  box-shadow:0 4px 14px rgba(15,23,42,0.12);
  color:#0b3b66;
}

body.dark .theme-toggle {
  background:#020617;
  color:#e5e7eb;
}

footer {
  position:fixed;
  bottom:16px;
  font-size:14px;
  color:#6b7280;
  z-index:2;
}

body.dark footer {
  color:#9ca3af;
}

/* Countdown */
.countdown {
  margin-top:20px;
  animation:fadeUp 1.4s ease;
}

.countdown .count-label {
  display:block;
  font-weight:700;
  margin-bottom:8px;
  color:#4b5563;
}

body.dark .countdown .count-label {
  color:#9ca3af;
}

.count-values {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.count-box {
  min-width:70px;
  padding:10px 8px;
  border-radius:14px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 8px 20px rgba(15,23,42,0.12);
}

body.dark .count-box {
  background:#020617;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.count-box span {
  display:block;
  font-weight:900;
  font-size:1.3rem;
}

.count-box small {
  font-size:11px;
  color:#6b7280;
}

body.dark .count-box small {
  color:#9ca3af;
}

.status {
  margin-top:14px;
  font-size:0.9rem;
  min-height:1.2em;
}

.status.success { color:#16a34a; }
.status.error { color:#dc2626; }

/* Particles */
.particle {
  position:fixed;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  opacity:0.4;
  z-index:1;
}

/* RTL support */
html[dir="rtl"] body {
  text-align:center; /* still centered but direction reversed for text runs */
}

@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

/* Responsive */
@media (max-width:600px) {
  .wrapper {
    padding:24px 16px 40px;
  }
  .title {
    font-size:2.2rem;
  }
  .lang-switch {
    top:12px;
    right:12px;
  }
  .theme-toggle {
    top:12px;
    left:12px;
  }
}