/* Artifact-Finder ----------------------------------------------------- */

:root {
  --bg: #0a0a0d;
  --bg2: #131319;
  --panel: #16161e;
  --line: #25252e;
  --text: #f0f0f3;
  --muted: #8a8a96;
  --accent: #6ea8ff;
  --accent2: #b48bff;
  --warn-bg: #2a230f;
  --warn-bd: #4b3a14;
  --warn-fg: #fbe7b3;
  --danger: #ff5d6a;
  --ok: #4ce0a4;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(circle at 30% 0%, #1a1530 0%, var(--bg) 60%) fixed;
  color: var(--text);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Pretendard", sans-serif;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
code, .mono {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
  font-size: 12px;
}

/* topbar -------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px; border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 13, .6); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.brand a {
  font-weight: 800; letter-spacing: .12em; font-size: 18px;
  background: linear-gradient(90deg, #fff, var(--accent2) 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand span { color: var(--accent2); padding: 0 4px; }
.brand-sub { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.topbar-spacer { flex: 1; }
.status { color: var(--muted); font-size: 12px; }

/* screens ------------------------------------------------------------- */
main { height: calc(100vh - 49px); overflow: hidden; }
.screen { display: none; height: 100%; }
.screen.active { display: flex; }

/* drop screen --------------------------------------------------------- */
#screen-drop.active {
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}

.banner {
  padding: 10px 14px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12px;
}
.banner--warn {
  background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg);
}
.banner code { background: rgba(255,255,255,.06); padding: 1px 4px; border-radius: 3px; }

.dropzone {
  width: min(620px, 80%); padding: 70px 40px;
  background: var(--panel); border: 2px dashed var(--line); border-radius: 18px;
  text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.dropzone:hover { border-color: var(--accent); background: #1a1a26; }
.dropzone.dragging { border-color: var(--accent2); background: #21172e; transform: scale(1.01); }
.dz-inner { pointer-events: none; }
.dz-icon { font-size: 50px; opacity: .8; margin-bottom: 14px; color: var(--accent2); }
.dz-title { font-size: 18px; font-weight: 600; letter-spacing: .04em; }

.dz-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dz-preview img {
  max-width: 360px; max-height: 360px;
  border-radius: 8px; border: 1px solid var(--line);
  background: #000;
}
.dz-filename { color: var(--muted); font-size: 12px; }

.dz-actions { display: flex; align-items: center; gap: 14px; }
.ckpt-line { font-size: 11px; letter-spacing: .04em; }

/* buttons ------------------------------------------------------------- */
.btn-primary {
  padding: 10px 22px; border: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: white; font-weight: 700; letter-spacing: .04em; border-radius: 8px;
  font-size: 13px; transition: transform .1s, box-shadow .1s, opacity .1s;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(110, 168, 255, .3);
}
.btn-primary:disabled { background: #2a2a35; cursor: not-allowed; opacity: .55; }

.btn-secondary {
  padding: 8px 16px; background: #20202a; border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); cursor: pointer; font-size: 12px;
  transition: background .12s;
}
.btn-secondary:hover { background: #2a2a36; }

.info { color: var(--muted); font-size: 12px; }
.info b { color: var(--text); font-weight: 600; }

/* results ------------------------------------------------------------- */
#screen-results.active { flex-direction: column; }
.results-grid {
  flex: 1; display: grid; padding: 18px; gap: 14px;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
.cell {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  position: relative; overflow: hidden; padding: 28px 12px 12px; min-height: 0;
}
.cell-title {
  position: absolute; top: 8px; left: 12px; right: 12px;
  font-size: 11px; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: #000; border-radius: 6px;
}

.results-bottom {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg2);
  flex-wrap: wrap;
}
.thr-control {
  display: flex; align-items: center; gap: 10px;
  min-width: 320px; flex: 1;
}
.thr-control label {
  color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.thr-control input[type=range] {
  flex: 1; accent-color: var(--accent2);
}
.thr-readout {
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--text);
  min-width: 52px; text-align: right;
}
.meta-info { margin-left: auto; }