@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
:root {
  --navy: #0a192f;
  --light-navy: #112240;
  --lightest-navy: #233554;
  --green: #64ffda;
  --green-tint: rgba(100, 255, 218, 0.1);
  --slate: #8892b0;
  --light-slate: #a8b2d1;
  --white: #e6f1ff;
  --font-main: 'Inter', sans-serif;
  --error: #ff6b6b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); background-color: var(--navy); color: var(--slate); min-height: 100vh; display: flex; flex-direction: column; }
header { padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; background-color: rgba(10, 25, 47, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lightest-navy); position: sticky; top: 0; z-index: 10; }
.logo { display: flex; align-items: center; gap: 15px; color: var(--white); font-weight: 700; font-size: 1.2rem; }
.logo img { height: 40px; width: auto; }
main { padding: 40px; flex: 1; display: flex; flex-direction: column; gap: 30px; max-width: 1200px; margin: 0 auto; width: 100%; }

.input-section { display: flex; flex-direction: column; gap: 15px; background-color: var(--light-navy); padding: 30px; border-radius: 10px; border: 1px solid var(--lightest-navy); }
.input-section h2 { color: var(--white); }
textarea { width: 100%; background: var(--navy); border: 1px solid var(--lightest-navy); color: var(--white); padding: 15px; border-radius: 6px; font-family: monospace; font-size: 14px; resize: vertical; }
textarea:focus { outline: none; border-color: var(--green); }

.controls { display: flex; gap: 15px; }
button, .btn { background-color: transparent; color: var(--green); border: 1px solid var(--green); border-radius: 4px; padding: 10px 20px; font-family: var(--font-main); font-weight: 500; cursor: pointer; transition: all 0.25s ease; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
button:hover, .btn:hover { background-color: var(--green-tint); transform: translateY(-2px); }
.btn-primary { background-color: var(--green-tint); }

.cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 25px; }
.card-item { background-color: var(--light-navy); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7); position: relative; }
.card-image-wrapper { aspect-ratio: 63 / 88; width: 100%; overflow: hidden; background-color: #000; }
.card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.card-details { padding: 10px; text-align: center; background: var(--lightest-navy); color: var(--white); font-weight: 500; }

.status-bar { margin-bottom: 20px; }
.error-text { color: var(--error); margin-top: 10px; white-space: pre-line; }

.loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 25, 47, 0.9); display: none; justify-content: center; align-items: center; z-index: 100; flex-direction: column; gap: 20px; color: var(--green); }
.loader-overlay.active { display: flex; }
.spinner { width: 50px; height: 50px; border: 4px solid var(--green-tint); border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.hidden { display: none !important; }