body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Barlow+Condensed:wght@300;400;600;700;800;900&display=swap');

:root {
  --bg: #090910;
  --surface: #0f0f1a;
  --surface2: #141424;
  --border: #1e1e32;
  --border2: #2a2a44;
  --accent: #7c3aed;
  --accent-b: #a855f7;
  --glow: rgba(124,58,237,0.2);
  --cyan: #06b6d4;
  --text: #ddddf4;
  --muted: #44445a;
  --muted2: #6a6a88;
  --success: #10b981;
  --warn: #f59e0b;
  --red: #ef4444;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  min-height: 100vh;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 15% -5%, rgba(124,58,237,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 105%, rgba(6,182,212,0.07) 0%, transparent 55%);
  pointer-events:none; z-index:0;
}

.wrap { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:40px 22px 80px; }

/* ── Header ── */
header {
  display:flex; align-items:flex-end; justify-content:space-between;
  border-bottom:1.5px solid var(--border2); padding-bottom:14px; margin-bottom:32px;
}
.logo { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.8rem; letter-spacing:-1px; line-height:1; }
.logo .sl { color:var(--accent-b); }
.sub { font-size:.57rem; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; padding-bottom:5px; }

/* ── Drop zone ── */
#dropzone {
  border:1.5px dashed var(--border2); background:var(--surface);
  padding:52px 36px; text-align:center; cursor:pointer;
  transition:all .22s; position:relative; overflow:hidden; border-radius:2px;
}
#dropzone::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--glow) 0%, transparent 55%);
  opacity:0; transition:opacity .22s; pointer-events:none;
}
#dropzone:hover, #dropzone.over { border-color:var(--accent-b); }
#dropzone:hover::after, #dropzone.over::after { opacity:1; }
#dropzone .di { display:block; font-size:2.4rem; margin-bottom:14px; filter:grayscale(1) opacity(.35); transition:filter .22s; }
#dropzone:hover .di { filter:none; }
#dropzone h2 { font-family:'Barlow Condensed',sans-serif; font-size:1.55rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; }
#dropzone p { font-size:.62rem; color:var(--muted); letter-spacing:.1em; }
#fileInput { display:none; }

/* ── Source info bar ── */
#srcBar { display:none; margin-top:14px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent-b); padding:14px 18px; align-items:center; gap:16px; }
#srcBar.on { display:flex; }
#srcThumb { width:68px; height:68px; object-fit:contain; background:repeating-conic-gradient(#16162a 0% 25%,#1d1d30 0% 50%) 0 0/12px 12px; flex-shrink:0; }
.src-meta { flex:1; }
.src-name { font-size:.78rem; font-weight:700; margin-bottom:3px; word-break:break-all; }
.src-info { font-size:.58rem; color:var(--muted2); line-height:2.1; }
.src-info em { color:var(--cyan); font-style:normal; }

/* ── Detection mode cards ── */
#modeSection { margin:22px 0 0; display:none; }
#modeSection.on { display:block; }
.section-label { font-size:.57rem; letter-spacing:.2em; color:var(--accent-b); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }

.mode-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media(max-width:700px){ .mode-grid { grid-template-columns:repeat(2,1fr); } }

.mode-card {
  background:var(--surface); border:1.5px solid var(--border);
  padding:14px 14px 12px; cursor:pointer; transition:all .18s;
  position:relative;
}
.mode-card:hover { border-color:var(--border2); background:var(--surface2); }
.mode-card.selected { border-color:var(--accent-b); background:rgba(168,85,247,.07); }
.mode-card.selected::after { content:'✓'; position:absolute; top:8px; right:10px; font-size:.65rem; color:var(--accent-b); }
.mode-icon { font-size:1.4rem; margin-bottom:8px; }
.mode-name { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; }
.mode-desc { font-size:.57rem; color:var(--muted2); line-height:1.7; }

/* ── Settings panel ── */
#settingsPanel { display:none; margin-top:14px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--cyan); padding:18px 22px; }
#settingsPanel.on { display:block; }

.settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px 24px; align-items:start; }

.set-group { display:flex; flex-direction:column; gap:6px; }
.set-label { font-size:.57rem; letter-spacing:.14em; color:var(--muted2); text-transform:uppercase; }
.set-hint { font-size:.52rem; color:var(--muted); line-height:1.6; margin-top:2px; }

.num-in {
  background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-family:'Space Mono',monospace;
  font-size:.9rem; padding:8px 11px; width:100%; outline:none;
  transition:border-color .18s; -moz-appearance:textfield;
}
.num-in::-webkit-outer-spin-button,.num-in::-webkit-inner-spin-button { -webkit-appearance:none; }
.num-in:focus { border-color:var(--accent-b); }

.range-wrap { display:flex; flex-direction:column; gap:5px; }
.range-top { display:flex; justify-content:space-between; align-items:center; }
.range-val { font-size:.7rem; color:var(--cyan); }

input[type=range] {
  -webkit-appearance:none; appearance:none;
  height:3px; background:var(--border2); outline:none; cursor:pointer; width:100%;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:13px; height:13px;
  background:var(--accent-b); border-radius:50%; cursor:pointer;
}

.chk-row { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.chk-row input[type=checkbox] { accent-color:var(--accent-b); width:13px; height:13px; cursor:pointer; flex-shrink:0; }
.chk-row span { font-size:.6rem; color:var(--muted2); }

/* ── Action bar ── */
.action-bar { display:none; gap:10px; margin-top:18px; }
.action-bar.on { display:flex; }

.btn-run {
  flex:1; background:linear-gradient(135deg,var(--accent),#5b21b6);
  color:#fff; border:none; font-family:'Barlow Condensed',sans-serif;
  font-weight:800; font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 24px; cursor:pointer; transition:all .2s;
  box-shadow:0 0 20px rgba(124,58,237,.3);
}
.btn-run:hover { box-shadow:0 0 32px rgba(124,58,237,.5); filter:brightness(1.1); }
.btn-run:active { transform:scale(.99); }
.btn-run:disabled { background:#1e1e30; color:var(--muted); cursor:not-allowed; box-shadow:none; }

.btn-dl {
  background:none; border:2px solid var(--success); color:var(--success);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem;
  letter-spacing:.1em; text-transform:uppercase; padding:16px 20px;
  cursor:pointer; transition:all .2s; white-space:nowrap; display:none; align-items:center; gap:6px;
}
.btn-dl:hover { background:rgba(16,185,129,.1); }
.btn-dl.on { display:flex; }

/* ── Progress ── */
#progWrap { display:none; margin-top:14px; }
#progWrap.on { display:block; }
.prog-bg { background:var(--border); height:2px; width:100%; overflow:hidden; }
.prog-fill { height:100%; background:var(--accent-b); width:0%; transition:width .18s; }
.prog-label { font-size:.57rem; color:var(--muted2); margin-top:7px; letter-spacing:.07em; }

/* ── Preview overlay ── */
#previewSection { display:none; margin-top:28px; }
#previewSection.on { display:block; }
.pv-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pv-title { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted2); }

.toggle-row { display:flex; gap:8px; }
.tog-btn {
  background:none; border:1px solid var(--border2); color:var(--muted2);
  font-family:'Space Mono',monospace; font-size:.58rem; padding:5px 10px;
  cursor:pointer; letter-spacing:.08em; transition:all .18s;
}
.tog-btn.on { border-color:var(--accent-b); color:var(--accent-b); background:rgba(168,85,247,.08); }

#overlayWrap {
  position:relative; display:block; width:100%;
  background:repeating-conic-gradient(#13131f 0% 25%,#18182a 0% 50%) 0 0/16px 16px;
  overflow:hidden; line-height:0;
}
#overlayImg {
  display:block; max-width:100%; max-height:480px;
  object-fit:contain; width:100%;
}
#overlayCanvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}

/* ── Results ── */
#resultsSection { display:none; margin-top:28px; }
#resultsSection.on { display:block; }

.res-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.res-title { font-family:'Barlow Condensed',sans-serif; font-size:1.35rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.res-title em { color:var(--accent-b); font-style:normal; }

.res-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.sort-sel {
  background:var(--bg); border:1px solid var(--border); color:var(--muted2);
  font-family:'Space Mono',monospace; font-size:.58rem; padding:6px 9px;
  outline:none; cursor:pointer; -webkit-appearance:none; appearance:none;
}

.search-in {
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-family:'Space Mono',monospace; font-size:.58rem; padding:6px 9px;
  outline:none; width:160px; transition:border-color .18s;
}
.search-in:focus { border-color:var(--accent-b); }
.search-in::placeholder { color:var(--muted); }

#objectGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px; }

.obj-card {
  background:var(--surface); border:1px solid var(--border);
  overflow:hidden; cursor:pointer; transition:all .18s;
  position:relative; animation:fadeUp .28s ease both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.obj-card:hover { border-color:var(--accent-b); box-shadow:0 0 14px var(--glow); }
.obj-card.hid { display:none; }

.thumb-bg {
  width:100%; aspect-ratio:1;
  background:repeating-conic-gradient(#13131f 0% 25%,#18182a 0% 50%) 0 0/10px 10px;
  display:flex; align-items:center; justify-content:center; padding:8px; overflow:hidden;
}
.thumb-bg canvas { max-width:100%; max-height:100%; object-fit:contain; image-rendering:pixelated; }

.card-dl {
  position:absolute; top:6px; right:6px;
  background:rgba(0,0,0,.8); border:1px solid var(--accent-b);
  color:var(--accent-b); font-size:.57rem; padding:3px 7px;
  opacity:0; transition:opacity .14s; cursor:pointer;
  font-family:'Space Mono',monospace; pointer-events:none;
}
.obj-card:hover .card-dl { opacity:1; pointer-events:auto; }

.card-info { padding:7px 9px; border-top:1px solid var(--border); }
.card-num { font-size:.55rem; color:var(--accent-b); margin-bottom:1px; letter-spacing:.1em; }
.card-dims { font-size:.55rem; color:var(--muted2); }

.foot-note { font-size:.57rem; color:var(--muted); line-height:1.9; margin-top:14px; letter-spacing:.06em; }
.foot-note em { color:var(--cyan); font-style:normal; }