/* ==============================
GLOBAL RESET
================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

/* ==============================
BODY / THEME
================================= */

body {
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: #f8fafc;
background:
radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.25), transparent 25%),
radial-gradient(circle at 80% 10%, rgba(168, 85, 247, 0.18), transparent 30%),
linear-gradient(135deg, #020617, #0f172a 50%, #111827);
padding: 32px 16px;
}

/* Light theme toggled by JavaScript */
body.light-theme {
color: #0f172a;
background:
radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.2), transparent 25%),
linear-gradient(135deg, #e0f2fe, #f8fafc);
}

/* ==============================
LAYOUT
================================= */

.container {
width: min(100%, 1100px);
margin: 0 auto;
}

.results {
display: grid;
gap: 14px;
}

/* ==============================
GLASS CARD STYLE
================================= */

.glass-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 22px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

.light-theme .glass-card {
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(15, 23, 42, 0.12);
}

/* ==============================
SECTIONS
================================= */

.hero,
.controls,
.media-card,
.text-block {
padding: 24px;
margin-bottom: 20px;
text-align: center;
}

.media-card,
.text-block {
margin-bottom: 0;
}

.hero h1 {
margin-bottom: 12px;
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.1;
color: #ffffff;
text-shadow: 0 0 18px rgba(96, 165, 250, 0.55);
}

.light-theme .hero h1,
.light-theme h2,
.light-theme label {
color: #0f172a;
}

.intro,
.instruction,
.status-message,
.media-date,
#media-type,
#media-copyright,
.footer p {
color: #dbeafe;
line-height: 1.6;
}

.light-theme .intro,
.light-theme .instruction,
.light-theme .status-message,
.light-theme .media-date,
.light-theme #media-type,
.light-theme #media-copyright,
.light-theme .footer p {
color: #334155;
}

.controls h2,
.media-card h2,
.text-block h2 {
margin-bottom: 10px;
color: #ffffff;
}

.instruction {
margin-bottom: 16px;
}

/* ==============================
FORM CONTROLS
================================= */

.form-row,
.action-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
}

label {
font-weight: 700;
color: #ffffff;
}

input[type="date"] {
min-height: 44px;
padding: 10px 14px;
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 12px;
}

.light-theme input[type="date"] {
color: #0f172a;
background: rgba(255, 255, 255, 0.85);
}

/* ==============================
BUTTONS / LINKS
================================= */

button,
.action-link {
min-height: 44px;
padding: 10px 20px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #3b82f6, #2563eb);
border: 0;
border-radius: 12px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

button:hover:not(:disabled),
.action-link:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4);
}

button:disabled {
cursor: not-allowed;
opacity: 0.65;
}

/* ==============================
STATUS / SPINNER
================================= */

.status-message {
min-height: 24px;
margin-top: 14px;
}

.spinner {
margin-top: 16px;
font-weight: 700;
color: #bfdbfe;
}

/* ==============================
MEDIA CARD
================================= */

#media-title {
margin-bottom: 8px;
}

.meta-grid {
display: grid;
gap: 6px;
margin-bottom: 10px;
}

#nasa-media {
display: block;
width: 100%;
max-width: 900px;
height: auto;
margin: 12px auto;
border-radius: 18px;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}

.video-message {
max-width: 800px;
margin: 14px auto;
color: #fde68a;
line-height: 1.6;
}

/* ==============================
EXPLANATION
================================= */

#media-explanation {
max-width: 900px;
margin: 0 auto;
color: #e5e7eb;
line-height: 1.75;
text-align: left;
}

.light-theme #media-explanation {
color: #1e293b;
}

.char-count {
margin-top: 14px;
color: #93c5fd;
font-size: 0.95rem;
text-align: center;
}

.light-theme .char-count {
color: #2563eb;
}

/* ==============================
FOOTER
================================= */

.footer {
margin-top: 22px;
text-align: center;
}

/* ==============================
MOBILE
================================= */

@media (max-width: 640px) {
body {
padding: 20px 12px;
}

.hero,
.controls,
.media-card,
.text-block {
padding: 18px;
}

.form-row,
.action-row {
flex-direction: column;
}

input[type="date"],
button,
.action-link {
width: 100%;
}
}