:root{
  --surface: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink2: #52514e;
  --muted: #898781;
  --border: rgba(11,11,11,0.10);
  --grid: #e1e0d9;
  --accent: #2a78d6;
  --good: #0ca30c;
  --warn: #d99a1c;
  --bad: #d03b3b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
}
.shell{display:flex;min-height:100vh}
.sidebar{
  width:260px;flex:none;
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:20px 14px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{font-size:16px;font-weight:700}
.brand-sub{font-size:11.5px;color:var(--muted);margin:4px 0 18px;line-height:1.4}
.navgroup-label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 8px 6px}
.navitem{
  display:block;width:100%;text-align:left;
  background:none;border:none;border-radius:7px;
  padding:8px 10px;font-size:13px;color:var(--ink2);cursor:pointer;
}
.navitem:hover{background:rgba(11,11,11,0.05);color:var(--ink)}
.navitem.active{background:rgba(42,120,214,0.10);color:var(--accent);font-weight:600}

.navfoot{
  margin:22px 8px 4px;padding-top:14px;
  border-top:1px solid var(--border);
  font-size:10.5px;line-height:1.5;color:var(--muted);
}
.navfoot a{color:var(--muted);text-decoration:underline}
.navfoot a:hover{color:var(--ink2)}

.content{flex:1;padding:34px 40px;max-width:900px}
.welcome h1{font-size:20px;margin:0 0 8px}
.welcome p{color:var(--ink2);font-size:13.5px}

.tool h2{font-size:19px;margin:0 0 4px}
.tool .desc{color:var(--ink2);font-size:13px;margin:0 0 6px;line-height:1.5}
.tool .scope{
  font-size:12px;color:var(--warn);background:rgba(217,154,28,0.10);
  border:1px solid rgba(217,154,28,0.3);border-radius:8px;padding:8px 12px;margin:10px 0 18px;
}

.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.field input[type=text],
.field input[type=number],
.field input[type=password],
.field select,
.field textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:7px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--ink);
}
.field textarea{min-height:140px;resize:vertical}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.row{display:flex;gap:12px}
.row > .field{flex:1}

.dropzone{
  border:1.5px dashed var(--border);border-radius:10px;padding:22px;
  text-align:center;color:var(--ink2);font-size:13px;cursor:pointer;
  background:#fff;margin-bottom:16px;
}
.dropzone.drag{border-color:var(--accent);background:rgba(42,120,214,0.05)}
.filelist{list-style:none;padding:0;margin:0 0 16px;font-size:12.5px}
.filelist li{
  display:flex;justify-content:space-between;gap:8px;
  padding:6px 10px;border:1px solid var(--grid);border-radius:6px;margin-bottom:6px;background:#fff;
}
.filelist button{background:none;border:none;color:var(--bad);cursor:pointer;font-size:12px}

button.btn{
  background:var(--ink);color:#fff;border:none;border-radius:8px;
  padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;
}
button.btn:hover{opacity:.88}
button.btn:disabled{opacity:.4;cursor:not-allowed}
button.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--border)}

.status{margin-top:14px;font-size:12.5px;color:var(--ink2)}
.status.err{color:var(--bad)}
.status.ok{color:var(--good)}

.result{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:10px;background:#fff}
.result a.dl{
  display:inline-block;margin-top:6px;background:var(--good);color:#fff;
  padding:8px 14px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;
}

canvas.preview{max-width:100%;border:1px solid var(--border);border-radius:8px;background:#fff}
.sigpad{border:1px solid var(--border);border-radius:8px;background:#fff;touch-action:none;cursor:crosshair}
.thumbgrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumbgrid figure{margin:0;text-align:center;font-size:11px;color:var(--muted)}
.thumbgrid img{max-width:140px;border:1px solid var(--border);border-radius:6px;display:block;margin-bottom:4px}

.iframe-preview{width:100%;height:340px;border:1px solid var(--border);border-radius:8px;background:#fff}

@media print{
  .shell > .sidebar, .content > *:not(#print-target){display:none !important}
  #print-target{display:block !important}
}