:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #111111;
  --border: #1f1f1f;
  --text: #e5e5e5;
  --muted: #737373;
  --accent: #f59e0b;
  --success: #22c55e;
  --error: #ef4444;
  --info: #3b82f6;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at top right, #1b1202 0%, var(--bg) 36%);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}
h1,h2,h3,h4 { font-family: Montserrat, Inter, sans-serif; margin: 0 0 10px; }
p { margin: 0; color: var(--muted); }
button,input,textarea,select {
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
textarea { min-height: 110px; resize: vertical; }
button { cursor: pointer; transition: .2s ease; }
button:hover { border-color: #2f2f2f; }
.primary {
  background: linear-gradient(180deg, #f7b743, var(--accent));
  color: #1f1300;
  border: none;
  font-weight: 700;
}
.ghost { background: transparent; }
.ghost.danger { color: #ff8d8d; }
.badge {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-left: 6px;
}
.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
  background: rgba(10,10,10,.88);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  z-index: 20;
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #ffd58a 0%, var(--accent) 60%, #784500 100%);
}
.brand h1 { font-size: 18px; margin: 0; }
.brand p { font-size: 12px; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.view { padding: 20px; max-width: 1200px; margin: 0 auto; }
.card {
  background: linear-gradient(180deg, #171717, #131313);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.grid { display: grid; gap: 14px; }
.grid.products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid.ads { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.assets { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--border);
}
.status.done { color: var(--success); }
.status.failed { color: var(--error); }
.status.pending,.status.generating { color: var(--info); }
.pulse::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; display: inline-block; animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0% { opacity: .4; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: .4; transform: scale(.8); }
}
.thumb {
  width: 100%; aspect-ratio: 4/3; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--border); background: #0d0d0d;
}
.muted { color: var(--muted); font-size: 13px; }
.login-wrap {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
}
.login-card { width: min(420px, 92vw); }
.login-card form { display: grid; gap: 10px; margin-top: 16px; }
.error { color: var(--error); margin-top: 8px; min-height: 18px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 150px; }
.asset-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
details.collapsible {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 8px 12px 12px;
}
details.collapsible > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
}
.video { width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.list { display: grid; gap: 10px; }
.queue-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.small { font-size: 12px; }
.kbd { border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 12px; }
@media (max-width: 700px) {
  .topbar { position: static; }
  .top-actions { width: 100%; }
  .top-actions button { flex: 1; }
}