:root {
  --primary:#059669;
  --primary-dark:#047857;
  --bg:#0f172a;
  --card:#1f2937;
  --border:#374151;
  --error:#f87171;
  --placeholder:#9ca3af;
  --text:#f9fafb;
  --transition:0.3s;
}

/* ===== Light theme override ===== */
body.light {
  --bg:#f3f4f6;
  --card:#ffffff;
  --border:#d1d5db;
  --placeholder:#6b7280;
  --text:#111827;
  --error:#b91c1c;
  --primary:#10b981;
  --primary-dark:#059669;
}

/* ===== Global styles ===== */
*{box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;margin:0;padding:0;}
body{min-height:100vh;background:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;overflow:hidden;transition:background var(--transition),color var(--transition);position:relative;}

#bgCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
#preloader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:6px;z-index:2;}
.dot{width:12px;height:12px;border-radius:50%;background:var(--primary);animation:dotPulse 1s infinite;}
.dot:nth-child(2){animation-delay:0.2s;}
.dot:nth-child(3){animation-delay:0.4s;}
@keyframes dotPulse{0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}}

.card{width:100%;max-width:400px;background:var(--card);border-radius:12px;padding:36px;box-shadow:0 20px 40px rgba(0,0,0,0.6);display:none;flex-direction:column;gap:20px;opacity:0;transform:translateY(20px);transition:opacity var(--transition),transform var(--transition);z-index:1;position:relative;}

input{width:100%;padding:12px 14px;font-size:15px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);transition:all var(--transition);}
input::placeholder{color:var(--placeholder);}
input:focus{outline:none;border-color:var(--primary);transform:scale(1.02);box-shadow:0 0 10px rgba(5,150,105,0.5);}

button{width:100%;padding:13px;font-size:16px;background:linear-gradient(90deg,var(--primary),var(--primary-dark));color:white;border:none;border-radius:6px;cursor:pointer;transition:all var(--transition);}
button:hover{background:linear-gradient(90deg,var(--primary-dark),var(--primary));transform:translateY(-2px) scale(1.02);}
button:active{transform:translateY(0) scale(0.98);}
button:disabled{opacity:.6;transform:none;}

.error{display:none;font-size:13px;color:var(--error);text-align:center;transition:opacity var(--transition);}