:root { --ink:#2b2620; --paper:#f6f2ea; --line:#d8d0c2; --accent:#7a5c3e; --ok:#1f7a4d; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:Segoe UI, system-ui, sans-serif; background:var(--paper); color:var(--ink); padding:24px; max-width:1200px; margin:0 auto; }
h1 { font-size:22px; } h1 a { color:inherit; text-decoration:none; } h1 span { color:var(--accent); }
h2 { font-size:16px; margin:14px 0 8px; }
.sub { color:#6b6155; margin:4px 0 16px; font-size:14px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
button, .btn { font:600 13px Segoe UI, sans-serif; padding:8px 14px; border:1px solid var(--line);
  background:#fff; border-radius:20px; cursor:pointer; text-decoration:none; color:var(--ink); display:inline-block; }
button:hover, .btn:hover { border-color:var(--accent); }
button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.export { background:var(--ok); color:#fff; border-color:var(--ok); }
input[type=text], input[type=number], input[type=password], textarea {
  font:14px Segoe UI, sans-serif; padding:8px 10px; border:1px solid var(--line); border-radius:6px; width:100%; }
textarea { font-family:Consolas, monospace; font-size:13px; }
label { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:#8a7f6f; display:block; margin:10px 0 3px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 900px) { .grid2 { grid-template-columns:1fr; } }
.tile { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; }
.tile img { width:100%; height:130px; object-fit:cover; object-position:top; display:block; background:#eee; }
.tile .cap { padding:8px 10px; font-size:12.5px; }
.badge { font-size:10.5px; padding:2px 8px; border-radius:10px; background:#eee; }
.badge.confirmed { background:#dcefe4; color:var(--ok); }
.badge.extracted { background:#fdf3d7; color:#8a6d1a; }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
.controls input[type=range] { flex:1; min-width:140px; accent-color:var(--accent); }
#view { width:100%; height:520px; display:block; border-radius:8px; border:1px solid var(--line); background:#eee; cursor:grab; touch-action:none; }
.scalebar { font-size:12.5px; color:#6b6155; margin-top:8px; }
.sheetimg { width:100%; border:1px solid var(--line); border-radius:8px; }
.note { font-size:13px; color:#6b6155; line-height:1.5; }
.error { color:#a33; font-size:13px; margin-top:8px; }
.topbar { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.topbar form { display:flex; gap:8px; flex:1; min-width:220px; }