:root {
  --bg: #0f1115;
  --card: #161a22;
  --text: #e6e8ee;
  --muted: #a9b0bd;
  --accent: #4f7cff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); }
.container { max-width: 960px; margin: 40px auto; padding: 0 16px; }
h1 { margin: 0 0 8px; font-size: 28px; }
.note { color: var(--muted); margin-bottom: 16px; }
.error { background: #322; color: #f5b; padding: 12px 16px; border: 1px solid #a44; border-radius: 8px; margin-bottom: 16px; }
.tool-form { background: var(--card); padding: 16px; border-radius: 12px; border: 1px solid #212636; }
label { display: block; margin-bottom: 6px; font-weight: 600; }
input[type="text"], input[type="number"], select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #2a3142; background: #0e1218; color: var(--text); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
button { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: white; border: none; cursor: pointer; font-weight: 600; }
button:hover { opacity: 0.92; }
.effects { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 8px; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.btn-link { color: #9fc2ff; text-decoration: none; font-weight: 600; margin-left: 8px; }
.presets select { width: auto; min-width: 220px; }
.result { margin-top: 24px; background: var(--card); padding: 16px; border-radius: 12px; border: 1px solid #212636; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { background: #0e1218; border: 1px solid #2a3142; border-radius: 10px; overflow: hidden; }
.card img { width: 100%; height: auto; display: block; }
.meta { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.meta .row { margin-bottom: 4px; }
.actions { display: flex; gap: 12px; padding: 10px; border-top: 1px solid #2a3142; }
.actions a { color: #9fc2ff; text-decoration: none; font-weight: 600; }
.actions a.danger { color: #ff9f9f; }
.actions a:hover { text-decoration: underline; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

/* Indeterminate progress for running jobs */
.progress { height: 6px; background: #1b2231; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.progress .bar { width: 40%; height: 100%; background: linear-gradient(90deg, rgba(79,124,255,.1), rgba(79,124,255,.6)); animation: indet 1.2s linear infinite; }
@keyframes indet { 0% { transform: translateX(-60%); } 100% { transform: translateX(160%); } }