:root {
  --bg: #0b0b0c;
  --panel: #121214;
  --text: #f5f6f7;
  --muted: #a5a7ab;
  --border: #232327;
  --accent: #5b8cff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
main {
  max-width: 880px;
  margin: 40px auto;
  padding: 0 16px 48px;
}

.header {
  display: flex; align-items: center; gap: 10px;
}
h1 { margin: 0 0 6px; font-size: 28px; }
.hint { color: var(--muted); margin: 6px 0 18px; }

.controls {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
textarea {
  width: 100%;
  background: #0f0f12;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  resize: vertical;
}
.row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 12px;
}
label { color: var(--muted); font-size: 14px; }
select {
  background: #0f0f12; color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; font-size: 14px;
}
button {
  background: var(--accent); color: white; border: 0;
  border-radius: 10px; padding: 10px 14px; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: not-allowed; }
button.ghost {
  background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.spinner {
  width: 28px; height: 28px; border: 3px solid #2a2b31; border-top: 3px solid var(--accent);
  border-radius: 50%; animation: spin 0.9s linear infinite; display: none;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.result { margin-top: 18px; }
video {
  width: 100%; max-width: 720px; display: block;
  border-radius: 12px; border: 1px solid var(--border);
  background: #000;
}

.history { margin-top: 28px; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.thumb { width: 100%; border-radius: 8px; }
.prompt {
  font-size: 13px; color: #e2e3e6; margin-top: 8px;
  max-height: 3.2em; overflow: hidden; text-overflow: ellipsis;
}
.meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

.pill {
  display: inline-block; background: #1a1b20; border: 1px solid var(--border);
  font-size: 12px; padding: 4px 8px; border-radius: 999px; margin-left: 8px;
}