/* Scout — themed to match flipdeal.app */
:root{
  --bg:        #0a0a0b;
  --bg-2:      #111114;
  --bg-3:      #16161a;
  --line:      #232328;
  --line-2:    #2e2e34;
  --ink:       #ededee;
  --ink-2:     #b6b6bc;
  --ink-3:     #6f6f78;
  --green:     #00C853;
  --green-dim: #1a3a26;
  --amber:     #f5a524;
  --red:       #ef4444;
  --blurple:   #5865F2;
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:     'Instrument Serif', ui-serif, Georgia, serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
body{
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  overflow-x:hidden;
  background:
    radial-gradient(800px 500px at 85% -10%, rgba(88,101,242,.08), transparent 60%),
    radial-gradient(700px 400px at -5% 30%, rgba(0,200,83,.05), transparent 60%),
    var(--bg);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* grain overlay — matches main site */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5;mix-blend-mode:overlay;
}

img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- layout ---------- */
header{
  padding:20px 20px 18px;
  border-bottom:1px solid var(--line);
  position:relative;z-index:2;
}
.brand-row{
  display:flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:-.01em;
}
.brand-row a{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.brand-row a:hover{color:var(--ink)}
.brand-row .sep{color:var(--line-2)}

.hero{padding:28px 20px 8px;position:relative;z-index:2}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:14px;
}
.eyebrow .pip{width:7px;height:7px;background:var(--green);display:inline-block}
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,8vw,44px);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:var(--ink);
  text-wrap:balance;
}
h1 em{font-style:italic;color:var(--green)}
.tag{color:var(--ink-2);font-size:14px;line-height:1.55;max-width:34ch}

main{flex:1;padding:24px 20px 32px;display:flex;flex-direction:column;gap:20px;position:relative;z-index:2}

/* ---------- scan button ---------- */
.scan-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  background:var(--green);color:#00170a;
  padding:32px 22px;
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;user-select:none;
  border:1px solid var(--green);
  transition:transform .15s ease, background .15s ease;
}
.scan-btn:hover{background:#00e25c}
.scan-btn:active{transform:translateY(-1px)}
.scan-btn .icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);
}
.scan-btn .icon svg{width:28px;height:28px}
.scan-btn .label{font-weight:700;font-size:13px;letter-spacing:.1em}

/* ---------- status / spinner ---------- */
#status{
  text-align:center;padding:28px 20px;
  background:var(--bg-2);border:1px solid var(--line);
}
.spinner{
  width:28px;height:28px;
  border:2px solid var(--line-2);border-top-color:var(--green);
  border-radius:50%;
  margin:0 auto 12px;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#status-text{
  color:var(--ink-2);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hidden{display:none !important}

/* ---------- result card ---------- */
.result-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:22px;
}
.identified{margin-bottom:18px}
.identified .brand-model{
  font-family:var(--serif);
  font-weight:400;font-style:italic;
  font-size:24px;line-height:1.15;
  color:var(--ink);
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.identified .confidence{
  display:inline-block;
  padding:3px 9px;
  font-family:var(--mono);
  font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid;
}
.confidence.high{color:var(--green);border-color:var(--green-dim);background:rgba(0,200,83,.08)}
.confidence.med {color:var(--amber);border-color:rgba(245,165,36,.3);background:rgba(245,165,36,.06)}
.confidence.low {color:var(--red);border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.06)}

/* ---------- sold-comp block ---------- */
.sold-comp{
  background:var(--bg-3);
  border:1px solid var(--line);
  padding:18px 16px;
  margin:16px 0;
  text-align:center;
}
.sold-comp .top-label{
  color:var(--ink-3);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:10px;
}
.sold-comp .price{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:42px;line-height:1;color:var(--green);
  letter-spacing:-.02em;
}
.sold-comp .meta{
  margin-top:10px;
  color:var(--ink-2);
  font-size:11px;letter-spacing:.04em;
}
.sold-comp.empty .price{font-size:18px;color:var(--ink-3);font-style:normal;font-family:var(--mono);font-weight:500}

/* ---------- max buy ---------- */
.max-bid{
  background:var(--bg-3);
  border:1px dashed var(--line-2);
  padding:12px 16px;
  margin:12px 0;
  text-align:center;
}
.max-bid .top-label{
  color:var(--ink-3);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:4px;
}
.max-bid .price{
  font-family:var(--serif);font-weight:400;font-style:italic;
  color:var(--amber);font-size:24px;line-height:1.1;
}

/* ---------- section label / source chips ---------- */
.section-label{
  color:var(--ink-3);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:14px;margin-bottom:8px;
}
.sources{display:flex;flex-wrap:wrap;gap:6px}
.source-chip{
  background:var(--bg-3);
  color:var(--ink-2);
  border:1px solid var(--line);
  padding:5px 10px;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;
}

/* ---------- listings ---------- */
.listings{margin-top:18px}
.listings h3{
  font-family:var(--mono);font-weight:500;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:8px;
}
.listing{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.listing:last-child{border-bottom:none}
.listing .info{flex:1;min-width:0}
.listing .title{
  font-size:13px;
  color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.listing .meta{
  font-size:10px;
  color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;
  margin-top:3px;
}
.listing .price{
  font-family:var(--mono);font-weight:700;
  color:var(--green);
  padding-left:10px;
  white-space:nowrap;
}

/* ---------- error ---------- */
.error{
  background:rgba(239,68,68,.06);
  color:var(--red);
  border:1px solid rgba(239,68,68,.3);
  padding:16px;
  font-size:13px;line-height:1.5;text-align:center;
}

/* ---------- retry / cta button ---------- */
.retry-btn{
  display:block;margin:18px auto 0;
  padding:12px 20px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-2);
  font-family:var(--mono);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.retry-btn:hover{border-color:var(--green);color:var(--green)}

/* ---------- footer ---------- */
footer{
  padding:18px 20px;
  text-align:center;
  border-top:1px solid var(--line);
  color:var(--ink-3);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  position:relative;z-index:2;
}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--green)}

/* ---------- search form ---------- */
.search-form{display:flex;gap:8px}
.search-input{
  flex:1;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  padding:14px 16px;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:0;
  box-shadow:none;
  margin:0;
  min-width:0;
  box-sizing:border-box;
  line-height:1.2;
}
.search-input::placeholder{color:var(--ink-3);opacity:1}
.search-input:focus{border-color:var(--green)}
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration{
  -webkit-appearance:none;
  display:none;
}
.search-go-btn{
  background:var(--green);color:#00170a;
  font-family:var(--mono);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:14px 22px;
  border:1px solid var(--green);
  cursor:pointer;white-space:nowrap;
  transition:background .15s ease;
}
.search-go-btn:hover{background:#00e25c}

/* ---------- search results grid ---------- */
.search-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:540px){.search-grid{grid-template-columns:1fr 1fr}}

.search-card{
  display:flex;flex-direction:column;gap:6px;
  padding:14px;
  background:var(--bg-2);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);
  transition:border-color .15s ease;
}
.search-card:hover{border-color:var(--line-2)}
.search-card.good-deal{
  border-color:rgba(0,200,83,.35);
  background:rgba(0,200,83,.04);
}

.src-badge{
  display:inline-block;
  font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid;padding:2px 7px;
  align-self:flex-start;
}
.deal-tag{
  font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);
}
.card-title{
  font-size:13px;color:var(--ink);line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-cond{font-size:10px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* ---------- good deal banner ---------- */
.good-deal-banner{
  background:rgba(0,200,83,.1);
  border:1px solid rgba(0,200,83,.3);
  color:var(--green);
  font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:10px 14px;
}

/* ---------- ad slot ---------- */
.ad-slot{
  min-height:90px;
  background:var(--bg-2);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.ad-slot-label{color:var(--ink-3);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- VIP CTA ---------- */
.vip-cta{
  padding:14px;
  background:var(--bg-2);border:1px solid var(--line);
  font-size:12px;color:var(--ink-2);
  line-height:1.6;text-align:center;
}
.vip-cta a{color:var(--green)}
.vip-cta a:hover{text-decoration:underline}

/* ---------- source-grouped results ---------- */
.source-group{
  background:var(--bg-2);
  border:1px solid var(--line);
  margin-bottom:10px;
  overflow:hidden;
}
.source-group[open] .source-summary{border-bottom:1px solid var(--line)}

.source-summary{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;
  border-left:3px solid;
  background:var(--bg-2);
  user-select:none;
  -webkit-user-select:none;
}
.source-summary::-webkit-details-marker{display:none}
.source-summary::marker{content:''}
.source-summary:hover{background:rgba(255,255,255,.02)}
.source-summary::after{
  content:'▸';
  margin-left:auto;
  color:var(--ink-3);
  font-size:12px;
  transition:transform .15s ease;
}
.source-group[open] .source-summary::after{transform:rotate(90deg)}

.source-summary-name{
  font-family:var(--mono);
  font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.source-summary-count{
  color:var(--ink-3);
  font-size:11px;
  letter-spacing:.05em;
}
.source-summary-deals{
  color:var(--green);
  font-size:11px;font-weight:700;
  letter-spacing:.04em;
  margin-left:4px;
}

.source-group .search-grid{
  padding:10px;
  border-radius:0;
}

/* ---------- brand slot (replaces ad-slot) ---------- */
.brand-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:18px 14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:3px solid var(--green);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.brand-slot:hover{
  border-color:var(--line-2);
  border-left-color:var(--green);
  background:rgba(0,200,83,.03);
}
.brand-slot__mark{
  font-family:var(--serif, 'Instrument Serif', serif);
  font-style:italic;
  font-size:24px;
  color:var(--green);
  letter-spacing:-.01em;
  line-height:1;
}
.brand-slot__tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:center;
}