static/style.css

/* ==========================
   Global reset & base
   ========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --bg-dark: #000;
  --panel-dark: #111;
  --muted: #444;
  --accent: #68E905;
  --accent-2: #a5c747;
  --button: #68E905;
  --button-text: #000;
  --surface: #1a1a1a;
  --glass: rgba(255,255,255,0.03);
  --max-width: 1200px;
}

/* sensible defaults */
html,body {
  height: 100%;
  font-family: Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: #fff;
  background: linear-gradient(270deg, #000000, #32002f, #1c0000);
  background-size: 400% 400%;
  animation: gradient 8s ease infinite;
  min-height: 100vh;
  overflow-y: auto; /* allow vertical scroll */
  -webkit-overflow-scrolling: touch;
}

/* ==========================
   Background & moving layer
   ========================== */
.moving-background{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(to right, #222, #333, #444);
  background-size: 300px 100vh;
  animation: move-background 10s linear infinite;
  opacity: 0.12;
}

@keyframes move-background {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-300px); }
}

@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================
   Layout containers
   ========================== */
.app-container {
  display: flex;
  min-height: 100vh;
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Sidebar */
.sidebar {
  background-color: #343a40;
  color: #fff;
  padding: 20px;
  width: 220px;
  min-height: 100vh;
}

/* Main content */
.content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* Use a centered main area for single-column pages (login/forms/etc) */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  width: 100%;
  z-index: 3;
}

/* ==========================
   Navbar
   ========================== */
.navbar {
  background-color: rgba(0,0,0,0.6);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
  position: relative;
  gap: 1rem;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.navbar li { margin: 0; }

.nav-link {
  color: var(--accent);
  text-shadow: 0 0 6px rgba(104,233,5,0.12);
  padding: 10px 18px;
  border-radius: 20px;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  transition: box-shadow 150ms ease;
}

.nav-link:hover,
.nav-links a:hover {
  box-shadow: 0 0 10px var(--accent-2), 0 0 20px var(--accent-2);
  color: #fff;
}

/* active class */
.nav-links a.active {
  background: rgba(104,233,5,0.08);
  color: var(--accent);
}

/* ==========================
   Forms / Cards
   ========================== */
.form-container {
  background-color: #0f0f10;
  padding: 20px;
  border-radius: 12px;
  margin: 20px auto;
  max-width: 600px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  transform: translateY(0);
  animation: slideIn 0.45s ease both;
  z-index: 3;
}

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

/* Inputs and buttons */
input[type="file"], input[type="text"], input[type="password"], textarea, select, button {
  margin: 10px 0;
  padding: 10px 12px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background-color: #222;
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

input[type="file"]:hover, input[type="text"]:hover, textarea:hover {
  transform: translateY(-1px);
  background-color: #2a2a2a;
}

button {
  background-color: var(--button);
  color: var(--button-text);
  cursor: pointer;
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 700;
  border: none;
}

button:hover {
  filter: brightness(0.95);
}

/* Login container / auth card */
.login-container {
  width: 100%;
  max-width: 520px;
  background-color: rgba(0,0,0,0.6);
  padding: 36px;
  border-radius: 20px;
  box-shadow: 0 0 140px rgba(134,5,233,0.12);
  margin: 60px auto;
}

/* Results box */
.results-container {
  background-color: #050505;
  padding: 20px;
  border-radius: 8px;
  margin: 20px auto;
  max-width: 640px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* Pricing cards */
.pricing-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 40px 12px;
}

.pricing-plan {
  background-color: #222;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(134,5,233,0.06);
  width: 260px;
  color: #fff;
}

/* Contact form */
.contact-container { display:flex; flex-direction:column; align-items:center; padding:40px; }
.contact-container form {
  width:100%;
  max-width:520px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:20px;
  border-radius: 10px;
  box-shadow: 0 0 120px rgba(165,199,71,0.04);
}

/* Buttons common */
.btn {
  background-color: var(--button);
  color: var(--button-text);
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

/* ==========================
   Text & small utilities
   ========================== */
h1, h2 {
  margin: 20px 0;
  color: var(--accent);
  text-align: center;
}

p { color: #ddd; line-height: 1.6; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }

/* subtle label color */
label { color: var(--accent); font-weight:600; display:block; margin-bottom:6px; }

/* ==========================
   Glowing cursor effect
   ========================== */
.glowing-effect {
  position: fixed;
  left: 0;
  top: 0;
  width: 180px;
  height: 180px;
  pointer-events: none;
  transform: translate(calc(var(--x, 0) - 50%), calc(var(--y, 0) - 50%));
  mix-blend-mode: screen;
  filter: blur(36px);
  z-index: 9999;
  background: radial-gradient(circle at center, rgba(104,150,255,0.20) 0%, rgba(104,150,255,0.06) 40%, transparent 70%);
  transition: transform 0.04s linear;
}
.glowing-effect.js-generated { opacity: 0.95; }

/* ==========================
   Small screens / responsive
   ========================== */
@media (max-width: 992px) {
  .sidebar { display: none; }
  .app-container { padding: 0 12px; }
  .login-container { margin: 28px auto; padding: 28px; }
  .pricing-plan { width: 220px; }
}

@media (max-width: 576px) {
  .navbar { flex-direction: column; gap: 8px; padding: 0.5rem; }
  .navbar ul { flex-wrap: wrap; gap: 8px; justify-content:center; }
  .form-container, .results-container, .login-container, .contact-container form {
    width: 95%;
    padding: 16px;
    margin: 12px auto;
  }
  .glowing-effect { width: 120px; height: 120px; filter: blur(28px); }
  h1 { font-size: 1.4rem; }
}

/* ==========================
   Accessibility & reductions
   ========================== */
/* reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================
   Minor helpers
   ========================== */
.text {
  color: #fff;
  font-style: italic;
  text-shadow: 0 0 8px #ee00ff;
  text-align: center;
  z-index: 3;
}
.download-link {
  display:inline-block;
  margin-top:8px;
  padding:8px 12px;
  background:#007bff;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
}

/* ensure overlays sit above content */
.app-overlay { position:relative; z-index:5; }