* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font:16px/1.5 "Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif; }
button,input,select { color:inherit; font:inherit; }
.app-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:56px; padding:0 max(16px,calc((100% - 1120px)/2)); border-top:4px solid var(--theme-marker); border-bottom:1px solid var(--line-strong); background:var(--header-bg); color:var(--header-text); }
.brand { width:max-content; color:var(--header-brand); font-weight:800; text-decoration:none; }
.header-actions { justify-self:end; display:flex; align-items:center; gap:14px; font-size:14px; font-weight:700; }
.stitch-workspace { width:min(1120px,calc(100% - 24px)); margin:16px auto 48px; display:grid; gap:12px; }
.intro-panel,.panel { border:1px solid var(--line-strong); background:var(--surface); }
.intro-panel { padding:16px; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:5px; font-size:24px; }
h2 { margin:0; font-size:17px; }
.intro-panel p { margin:0; color:var(--muted); font-size:13px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; padding:2px 12px; }
.section-head small { color:inherit; opacity:.78; font-size:11px; }
.panel-body { padding:14px; }
.drop-zone { display:grid; place-items:center; min-height:112px; padding:16px; border:1px dashed var(--line-strong); background:var(--input-bg); cursor:pointer; text-align:center; }
.drop-zone.is-dragging { border-color:var(--accent); background:var(--accent-soft); }
.drop-zone span { color:var(--muted); font-size:12px; }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.input-actions,.result-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
button { min-height:36px; padding:5px 12px; border:1px solid var(--line-strong); border-radius:3px; background:var(--input-bg); cursor:pointer; font-weight:700; }
button:disabled { cursor:not-allowed; opacity:.45; }
button.primary { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.compact-note { margin:9px 0 0; color:var(--muted); font-size:11px; }
.image-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:12px; }
.image-item { min-width:0; border:1px solid var(--line); background:var(--surface-2); }
.image-item img { display:block; width:100%; height:145px; object-fit:contain; background:#111; }
.image-meta { padding:6px 7px; }
.image-meta b,.image-meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-meta b { font-size:11px; }
.image-meta small { color:var(--muted); font-size:10px; }
.image-controls { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.image-controls button { min-height:28px; padding:1px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; font-size:12px; }
.image-controls button:first-child { border-left:0; }
.empty-state { grid-column:1/-1; margin:0; padding:18px; color:var(--muted); text-align:center; font-size:12px; }
.build-body { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; }
.status { margin:0; color:var(--muted); font-size:12px; }
.status.error { color:var(--danger); font-weight:700; }
.progress-track { grid-column:1/-1; height:4px; background:var(--surface-2); overflow:hidden; }
.progress-track span { display:block; width:0; height:100%; background:var(--accent); transition:width .12s ease; }
.result-body { padding:14px; }
.result-body img { display:block; width:auto; max-width:100%; max-height:70vh; margin:auto; border:1px solid var(--line); background:#fff; object-fit:contain; }
.result-actions { justify-content:center; }
button:focus-visible,.drop-zone:focus-within { border-color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 24%,transparent); outline-offset:1px; }
@media (max-width:900px) {
  .app-header { grid-template-columns:auto 1fr; padding:8px 12px; }
  .app-header > strong { display:none; }
  .header-actions { gap:10px; }
}
@media (max-width:620px) {
  .theme-control span { display:none; }
  .theme-control select { width:170px; }
  .stitch-workspace { width:calc(100% - 12px); margin-top:8px; }
  .intro-panel { padding:12px; }
  h1 { font-size:20px; }
  .section-head { align-items:flex-start; }
  .section-head small { max-width:52%; text-align:right; }
  .panel-body { padding:10px; }
  .drop-zone { min-height:92px; }
  .image-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .image-item img { height:120px; }
  .build-body { grid-template-columns:1fr; }
  .progress-track { grid-column:1; }
  .result-actions button { flex:1 1 160px; }
}