:root { color-scheme: dark; --bg:#0b0c0f; --card:#151820; --fg:#e8e9ee; --muted:#9aa0aa; --line:#2a2f3a; --accent:#4f8cff; }
html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Inter, Arial; background:var(--bg); color:var(--fg); }
header{ padding:20px 24px 8px; border-bottom:1px solid var(--line); }
h1{ font-size:18px; margin:0 0 6px; }
.muted{ color:var(--muted); font-size:13px; }
main{ padding:16px 24px; }

.controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.btn{ display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--line); padding:8px 12px; border-radius:8px; cursor:pointer; background:#0e1117; }
.btn input{ display:none; }
.primary{ background:var(--accent); color:white; border:0; padding:9px 14px; border-radius:8px; cursor:pointer; font-weight:600; }
.status{ color:var(--muted); font-size:12px; margin-left:8px; }

.pill{ display:inline-block; margin-left:6px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); background:#0e1117; max-width: 40ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.tile header{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); }
.tile canvas{ display:block; width:100%; height:auto; }
.tile .meta{ color:var(--muted); font-size:12px; padding:8px 10px; }
.tile button{ margin:8px 10px 12px; }

/* Spinner + debug log */
.spinner{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; display:none; position: fixed; bottom: 16px; left: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
body.busy #globalSpinner{ display:inline-block; }
body.busy .btn input, body.busy button{ pointer-events:none; opacity:0.6; }

.log{ background:#0e1117; border:1px solid var(--line); color:#a8b3c5; padding:8px; border-radius:8px; overflow:auto; max-height:120px; font-size:12px; }