:root {
  color-scheme: dark;
  --bg: #08111f;
  --panel: rgba(255, 255, 255, 0.075);
  --panel-strong: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.13);
  --text: #f6f7fb;
  --muted: #a6b3c4;
  --accent: #74f7cf;
  --accent-2: #8aa5ff;
  --danger: #ff8f8f;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(116, 247, 207, 0.18), transparent 34rem),
    radial-gradient(circle at top right, rgba(138, 165, 255, 0.18), transparent 34rem),
    var(--bg);
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border .15s ease;
}
button:hover { transform: translateY(-1px); background: rgba(255,255,255,0.13); }
button.primary, .primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101d; border: none; font-weight: 800; }
button.ghost { color: var(--accent); border-color: rgba(116,247,207,.35); }
input, select, textarea {
  width: 100%;
  background: rgba(0,0,0,.24);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: .82rem .9rem;
  outline: none;
}
textarea { resize: vertical; }
label { display: grid; gap: .45rem; color: var(--muted); font-size: .9rem; }
.app-shell { max-width: 1480px; margin: 0 auto; padding: 1.2rem; }
.hero {
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border-radius: 30px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.hero:after { content:""; position:absolute; right:-8rem; bottom:-8rem; width:20rem; height:20rem; background:rgba(116,247,207,.11); border-radius:50%; filter:blur(10px); }
.topbar, .hero-content, .toolbar, .editor-header, .row-actions, .media-actions { display:flex; gap:1rem; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:.8rem; align-items:center; }
.logo { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#06101d; font-weight:900; }
.brand small { display:block; color:var(--muted); margin-top:.15rem; }
.status { padding:.45rem .75rem; border-radius:999px; background:rgba(255,255,255,.08); color:var(--muted); font-size:.88rem; }
.status.ok { color:#071018; background:var(--accent); }
.settings-button { width:100%; font-weight:800; font-size:1rem; }
.modal { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.62); display:grid; place-items:center; padding:1rem; }
.modal.hidden { display:none; }
.modal-card { width:min(620px, 100%); background:#111d30; border:1px solid var(--border); border-radius:26px; padding:1.2rem; box-shadow:var(--shadow); display:grid; gap:1rem; }
.modal-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.modal-header h2 { margin:.1rem 0; }
.modal-header p { color:var(--muted); margin:.2rem 0 0; }
.icon-button { width:42px; height:42px; border-radius:50%; padding:0; font-size:1.6rem; }
.settings-grid { display:grid; gap:1rem; }
.key-status { padding:.85rem 1rem; border-radius:14px; border:1px solid rgba(116,247,207,.25); color:var(--accent); background:rgba(116,247,207,.08); }
.hero-content { align-items:flex-end; margin-top:2rem; position:relative; z-index:1; }
.hero h1 { font-size: clamp(2rem, 5vw, 4.8rem); max-width: 980px; line-height:.92; margin:.35rem 0; letter-spacing:-.06em; }
.lead { color:var(--muted); max-width:720px; font-size:1.08rem; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.82rem; }
.quick-actions { min-width: 300px; display:grid; gap:.7rem; }
.grid-layout { display:grid; grid-template-columns: 340px 1fr; gap:1rem; margin-top:1rem; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding:1rem; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.config-panel { display:flex; flex-direction:column; gap:1rem; }
.panel-title { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.panel-title h2, .toolbar h2, .editor-header h2 { margin:0; }
.panel-title span, .toolbar p, .editor-header p, .hint { color:var(--muted); font-size:.88rem; }
.jobs-title { margin-top:1rem; }
.jobs-list { display:grid; gap:.7rem; max-height:360px; overflow:auto; }
.job-card { border:1px solid var(--border); background:rgba(0,0,0,.2); border-radius:16px; padding:.85rem; }
.job-card strong { display:block; }
.job-card small { color:var(--muted); }
.job-card a { color:var(--accent); font-weight:800; }
.mini-start { margin-top:.35rem; padding:.35rem .6rem; border-radius:10px; font-size:.78rem; }
.mini-delete { margin-top:.35rem; margin-left:.35rem; padding:.35rem .6rem; border-radius:10px; font-size:.78rem; color:#ffd4d4; border-color:rgba(255,143,143,.35); }
.albums-panel { min-height:420px; }
.toolbar-actions { display:flex; gap:.7rem; align-items:center; }
.toolbar-actions input { min-width:260px; }
.albums-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:.9rem; margin-top:1rem; }
.album-card { text-align:left; padding:0; overflow:hidden; border-radius:20px; }
.album-card.active { outline:2px solid var(--accent); }
.album-thumb { height:145px; background:linear-gradient(135deg, rgba(116,247,207,.22), rgba(138,165,255,.24)); display:grid; place-items:center; color:var(--accent); font-weight:800; overflow:hidden; position:relative; }
.album-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.album-card:hover .album-thumb img { transform:scale(1.04); }
.album-thumb:after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.28)); pointer-events:none; }
.album-body { padding:.9rem; display:grid; gap:.3rem; }
.album-body small, .album-body p { color:var(--muted); margin:0; }
.editor-panel { grid-column: 2; display:grid; gap:1rem; }
.media-actions { justify-content:flex-start; flex-wrap:wrap; }
.assets-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:.8rem; min-height:150px; }
.asset-card { position:relative; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:rgba(0,0,0,.22); cursor:pointer; }
.asset-card.selected { outline:2px solid var(--accent); }
.asset-thumb { aspect-ratio: 9 / 12; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); color:var(--muted); overflow:hidden; }
.asset-thumb img { width:100%; height:100%; object-fit:cover; }
.asset-meta { padding:.7rem; display:grid; gap:.25rem; font-size:.8rem; }
.asset-meta small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { position:absolute; top:.55rem; left:.55rem; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:999px; padding:.25rem .5rem; font-size:.72rem; }
.check { position:absolute; top:.55rem; right:.55rem; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.65); display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); padding:0; font-weight:900; z-index:2; }
.asset-card.selected .check { background:var(--accent); color:#06101d; font-weight:900; }
.asset-card.is-video:after { content:'▶'; position:absolute; inset:auto auto 3.4rem .55rem; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.22); color:white; pointer-events:none; }
.preview-card { width:min(960px, 100%); max-height:92vh; }
.preview-body { display:grid; place-items:center; background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:18px; overflow:hidden; min-height:260px; }
.preview-body video, .preview-body img { max-width:100%; max-height:70vh; display:block; }
.preview-body video { width:100%; background:#000; }
.load-more-media { min-height:120px; border-style:dashed; color:var(--accent); font-weight:800; }
.empty-state, .empty { color:var(--muted); display:grid; place-items:center; padding:2rem; border:1px dashed var(--border); border-radius:18px; }
.job-form { border-top:1px solid var(--border); padding-top:1rem; display:grid; gap:1rem; }
.form-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem; }
.create { justify-self:start; }
.prompt-preview { margin:0; white-space:pre-wrap; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:18px; padding:1rem; color:var(--muted); display:none; }
@media (max-width: 1050px) {
  .grid-layout { grid-template-columns:1fr; }
  .editor-panel { grid-column:auto; }
  .hero-content, .topbar, .toolbar, .editor-header { align-items:flex-start; flex-direction:column; }
  .quick-actions { width:100%; }
  .form-grid { grid-template-columns:1fr; }
  .toolbar-actions { width:100%; flex-direction:column; }
}