/* Minimal ergonomic design without Tailwind for simplicity */
:root {
  --bg: #0d1117;
  --bg-alt: #161b22;
  --panel: #1f242d;
  --accent: linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899);
  --text: #e6edf3;
  --text-dim: #9da5b4;
  --radius: 14px;
  --focus: #6366f1;
  --danger: #ef4444;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background: radial-gradient(circle at 25% 15%, #1e2530, #0d1117 65%); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color:#818cf8; text-decoration:none; }
a:hover { text-decoration:underline; }

.app-shell { height:100dvh; display:flex; flex-direction:column; }
header { padding:2rem 2rem 1rem; max-width: 1600px; margin: 0 auto; width: 100%; }
header h1 { margin:0; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:600; letter-spacing:.5px; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; }

main { flex:1; display:grid; gap:1.6rem; grid-template-columns: minmax(300px,360px) 1fr; padding:0 2rem 2rem; max-width: 1600px; margin: 0 auto; width: 100%; }
@media (max-width: 1100px) { main { grid-template-columns: 1fr; } }

.panel { background:linear-gradient(145deg,#242b37,#1b2029); border:1px solid #2d3643; padding:1.4rem 1.6rem 2rem; border-radius: var(--radius); box-shadow:0 8px 32px -8px rgba(0,0,0,.4), 0 4px 14px -4px rgba(0,0,0,.4); position:relative; overflow:hidden; }
.panel:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 120% -10%, rgba(99,102,241,.35), transparent 60%); pointer-events:none; }

form { display:flex; flex-direction:column; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; }
.field-label { font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); }
.field-helper { display:block; font-weight:400; text-transform:none; margin-left:0; margin-top:.15rem; font-size:.7rem; letter-spacing:.2px; color:rgba(230,237,243,.72); }
input { background:var(--bg-alt); border:1px solid #303945; color:var(--text); padding:.75rem .85rem; border-radius:10px; font:inherit; outline:none; transition:border-color .15s, background .3s; }
input:focus { border-color: var(--focus); box-shadow:0 0 0 3px rgba(99,102,241,.35); }
select { background:var(--bg-alt); border:1px solid #303945; color:var(--text); padding:.65rem .7rem; border-radius:10px; font:inherit; }
/* Hidden utility */
.hidden { display:none !important; }
/* Image dropzone */
.dropzone { position:relative; border:1px dashed #3b4556; border-radius:12px; background:#0f141c; padding:1rem; display:grid; grid-template-columns: 1fr; align-items:center; justify-content:stretch; min-height:140px; cursor:pointer; gap:.75rem; }
.dropzone.has-image { grid-template-columns: 1fr auto; justify-content:space-between; }
.dropzone:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.dropzone.dragover { background:#121927; border-color:#4b5568; }
.dropzone .drop-hint { color:#9aa4b2; text-align:center; }
.dropzone.has-image .drop-hint { text-align:left; }
.dropzone img { width:96px; height:96px; object-fit:cover; border-radius:10px; border:1px solid #2c3645; background:#0f141c; object-position:center; }
button.primary { border:none; background:var(--accent); color:#fff; font:600 0.95rem/1 system-ui; padding:.85rem 1.1rem; border-radius: 12px; cursor:pointer; letter-spacing:.5px; box-shadow:0 4px 16px -4px rgba(99,102,241,.4); position:relative; overflow:hidden; }
button.primary:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
button.primary:hover { filter:brightness(1.05); }
button.primary:active { transform:translateY(1px); }
button.secondary { background:#2a3140; color:var(--text-dim); border:1px solid #384252; padding:.75rem 1rem; border-radius:12px; cursor:pointer; font:500 0.85rem/1 system-ui; }
button.secondary:disabled { opacity:.4; cursor:default; }
.actions { display:flex; gap:.75rem; }
.tiny { font-size:.65rem; letter-spacing:.5px; color:var(--text-dim); margin-top:-.4rem; }

.status { padding:.65rem .8rem; border-radius:10px; background:#232b35; font-size:.8rem; letter-spacing:.5px; min-height:2.2rem; display:flex; flex-direction:column; align-items:flex-start; border:1px solid #303945; white-space:pre-line; line-height:1.2; }
.status[data-state="err"] { background:#351f1f; border-color:#4d2a2a; color:#fca5a5; }
/* Task specific colors: in-progress (yellow), ready (green), failed (red) */
.status[data-task="in-progress"] { background:#3a341f; border-color:#524726; color:#facc15; }
.status[data-task="ready"] { background:#1f3524; border-color:#274d31; color:#4ade80; }
.status[data-task="failed"] { background:#351f1f; border-color:#4d2a2a; color:#f87171; }

.viewer { position:relative; background:#11161d; border:1px solid #232c37; border-radius: var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; transition: border-color .18s ease, filter .18s ease; }
canvas { width:100%; height:100%; display:block; image-rendering:crisp-edges; }

#viewer-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-weight:600;
  letter-spacing:.4px;
  background: linear-gradient(180deg, rgba(17,22,29,0.85), rgba(17,22,29,0.6));
  border-bottom: 1px solid rgba(61,74,96,.35);
  text-align:center;
  padding: 1rem;
  pointer-events:none;
  z-index: 2;
}
#viewer-placeholder.hidden { display:none; }

.viewer.viewer-active {
  box-shadow: none;
  filter:
    drop-shadow(0 3px 10px rgba(99,102,241,.14))
    drop-shadow(0 8px 16px rgba(99,102,241,.18));
}

.viewer-toolbar { position:absolute; top:1rem; right:1rem; display:flex; gap:.5rem; padding:.45rem .55rem; background:rgba(17,22,29,.78); border:1px solid rgba(61,74,96,.65); border-radius:12px; box-shadow:0 10px 24px -14px rgba(0,0,0,.55); backdrop-filter:blur(8px); pointer-events:auto; z-index:5; }
.viewer-action { border:none; background:rgba(255,255,255,.05); color:var(--text); font:600 0.75rem/1 system-ui; padding:.4rem .7rem; border-radius:8px; letter-spacing:.35px; cursor:pointer; transition:background .18s ease, transform .18s ease; }
.viewer-action:hover:not(:disabled) { background:rgba(255,255,255,.09); transform:translateY(-1px); }
.viewer-action:active:not(:disabled) { transform:translateY(0); }
.viewer-action:disabled { opacity:.35; cursor:default; }

/* Drag & Drop overlay */
#drop-overlay { position:fixed; inset:0; pointer-events:none; background:rgba(20,24,33,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; font:600 1.2rem system-ui; color:#a855f7; text-shadow:0 0 14px rgba(168,85,247,.45); opacity:0; transition:opacity .18s; z-index:1000; letter-spacing:.5px; }
#drop-overlay.visible { opacity:1; pointer-events:none; }

footer { padding:1.2rem 2rem; font-size:.75rem; text-align:center; color:var(--text-dim); }
.logo { font-weight:700; }