style.css

:root{
  --bg:#f6f7fb;
  --fg:#10131a;
  --muted:#667085;
  --card:#ffffff;
  --line:#e6e8ef;
  --primary:#2563eb;
  --primary-ink:#ffffff;
  --accent:#0ea5e9;
  --ok:#16a34a;
  --warn:#ea580c;
  --err:#dc2626;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --radius:16px;
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }

.app-header, .app-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.app-footer{ position:static; border-top:1px solid var(--line); border-bottom:none; margin-top:32px; }

.brand{ display:flex; align-items:center; gap:10px; }
.logo{ font-size:22px; }
.title{ font-weight:700; letter-spacing:.2px; }
.nav{ display:flex; gap:8px; }
.linkish{ background:transparent; border:1px solid var(--line); border-radius:10px; height:36px; padding:0 10px; cursor:pointer; }
.linkish:hover{ background:#f0f2f8; }

.header-tools{ display:flex; gap:10px; align-items:center; }
.header-tools input{ height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; width:340px; }
.btn{
  appearance:none; border:none; border-radius:10px; height:40px; padding:0 14px;
  background:var(--primary); color:var(--primary-ink); font-weight:700; cursor:pointer;
}
.btn:hover{ filter:brightness(0.96); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-secondary{ background:var(--accent); }

.container{ max-width:1040px; margin:24px auto; padding:0 16px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 6px 18px rgba(0,0,0,.04); }

.section-title{ margin:0 0 6px 0; }
.subtle{ color:var(--muted); margin-top:0; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } }

.label{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.hint{ color:var(--muted); font-size:12px; margin-top:6px; }

input[type="text"], input[type="file"], select, input[type="number"]{
  width:100%; border:1px solid var(--line); border-radius:10px; height:44px; padding:0 10px; background:#fff;
}

.actions{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.status{ color:var(--muted); font-size:14px; min-height:1em; }

/* Stage 1 */
.result-block{ margin-top:18px; display:none; }
.result-title{ margin:0 0 6px 0; }
.mono-block{ background:#fafbff; border:1px dashed var(--line); padding:12px; border-radius:10px; font-family:var(--mono); white-space:pre-wrap; }

/* Tags editor */
.tags-editor{ display:flex; flex-wrap:wrap; gap:8px; background:#fafbff; border:1px dashed var(--line); border-radius:10px; padding:10px; min-height:52px; }
.tag{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); padding:8px 10px; border-radius:999px; background:#fff; }
.tag input{ border:none; outline:none; width:160px; }
.tag .x{ cursor:pointer; color:#999; }
.tag .x:hover{ color:#333; }
.add-tag{ border:1px dashed var(--line); background:#fff; color:var(--muted); }

/* Stage 2 gallery + download icon */
.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:18px; }
@media (max-width:980px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr);} }
@media (max-width:620px){ .gallery-grid{ grid-template-columns:1fr;} }

.gallery-item{ border:1px solid var(--line); background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.gallery-item img{ display:block; width:100%; height:auto; }
.gallery-item .caption{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border-top:1px solid var(--line); font-size:14px; }
.icon-btn{ background:transparent; border:none; cursor:pointer; padding:4px; border-radius:8px; }
.icon-btn:hover{ background:#f2f4fb; }
.icon{ width:18px; height:18px; fill:#475569; }

/* Stage 3 jobs */
.jobs-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:16px; }
@media (max-width:980px){ .jobs-grid{ grid-template-columns:1fr; } }

.job-card{ border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px; }
.job-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.badge{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); background:#f7f9ff; color:#3b82f6; }
.badge.ok{ background:#ecfdf5; color:#16a34a; border-color:#bbf7d0; }
.badge.err{ background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.small{ color:var(--muted); font-size:12px; }
.job-body{ display:grid; grid-template-columns:1fr; gap:8px; }
.mini{ font-family:var(--mono); font-size:12px; color:#475569; word-break:break-all; }
.viewer{ width:100%; height:320px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.file-links a{ display:inline-block; margin-right:8px; }
/* Stage 3 reference images */
.ref-actions{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.ref-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width:980px){ .ref-grid{ grid-template-columns:repeat(3, 1fr);} }
@media (max-width:680px){ .ref-grid{ grid-template-columns:repeat(2, 1fr);} }
.ref-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.ref-card img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.ref-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-top:1px solid var(--line); }