body {
  background: radial-gradient(circle at top, #0b1220, #020617);
  color: #e5e7eb;
  min-height: 100vh;
  font-family: system-ui, sans-serif;
}

/* Header */
.app-header {
  background: rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 12px 0;
}

/* Wrapper */
.app-wrapper {
  padding-top: 80px;
  padding-bottom: 40px;
}

/* Container */
.app-container {
  max-width: 480px;
}

/* Card */
.app-card {
  background: rgba(15, 23, 42, 0.8);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 0 40px rgba(99,102,241,0.15);
  border: 1px solid rgba(255,255,255,0.05);
}

/* Inputs */
.app-input {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255,255,255,0.05);
  color: #fff;
  border-radius: 10px;
  padding: 12px;
}

.app-input::placeholder {
  color: #94a3b8;
}

.app-input:focus {
  background: rgba(30, 41, 59, 0.9);
  border-color: #6366f1;
  box-shadow: 0 0 0 0.15rem rgba(99,102,241,0.25);
  color: white;
}

/* Button */
.generate-btn {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
  color: white;
  box-shadow: 0 0 20px rgba(99,102,241,0.4);
}

.generate-btn:hover {
  opacity: 0.9;
}

/* Output */
.output-card {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 16px;
  padding: 30px;
  border: 1px dashed rgba(255,255,255,0.1);
}

/* Center the app */
.app-center {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
}

/* Make sure it stays centered on large screens */
@media (min-width: 992px) {
  .app-center {
    max-width: 520px;
  }
}









/* Light Mode Theme */
body.light-mode {
  background: radial-gradient(circle at top, #f8fafc, #e2e8f0);
  color: #0f172a;
}

body.light-mode .app-header {
  background: rgba(248, 250, 252, 0.9);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

body.light-mode .app-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 0 40px rgba(79,70,229,0.08);
}

body.light-mode .output-card {
  background: rgba(255,255,255,0.8);
  border: 1px dashed rgba(0,0,0,0.1);
}

body.light-mode .app-input {
  background: rgba(241,245,249,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  color: #0f172a;
}

body.light-mode .app-input::placeholder {
  color: #64748b;
}