@import url('base9142.css');

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background:rgba(10,14,26,0.55);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-header .brand img{ width:34px; height:34px; }
.site-header .brand{ font-size:0; } /* logo only, no visible site name */

.user-zone{ display:flex; align-items:center; gap:12px; }
.user-chip{
  display:flex; align-items:center; gap:9px; padding:6px 14px 6px 6px;
  border-radius:999px; background:var(--panel); border:1px solid var(--panel-border);
  font-size:13.5px; color:var(--text-1);
}
.user-chip img{ width:26px; height:26px; border-radius:50%; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* ---------- Hero ---------- */
.hero{
  max-width:760px; margin:0 auto; padding:56px 20px 8px; text-align:center;
}
.hero h1{
  font-size:clamp(26px, 4vw, 38px); font-weight:700; letter-spacing:-0.02em;
  margin:0 0 12px; color:var(--text-0);
}
.hero p{
  font-size:15.5px; color:var(--text-1); max-width:520px; margin:0 auto; line-height:1.65;
}

/* ---------- Scan panel ---------- */
.scan-panel{
  max-width:640px; margin:34px auto 0; padding:0 20px 80px;
}

.tabs{
  display:flex; gap:6px; margin-bottom:0; position:relative;
}
.tab{
  flex:1; text-align:center; padding:15px 10px; font-size:14.5px; font-weight:500;
  color:var(--text-2); cursor:pointer; border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:rgba(255,255,255,0.02); border:1px solid var(--panel-border); border-bottom:none;
  transition:color .15s ease, background .15s ease;
}
.tab.active{ color:var(--text-0); background:var(--panel); }
.tab:hover{ color:var(--text-0); }

.panel-body{
  padding:52px 34px 40px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.tabs + .panel-body{ border-top-left-radius:0; border-top-right-radius:0; }

.panel-pane{ display:none; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.panel-pane.active{ display:flex; }

.drop-icon{ width:120px; height:120px; opacity:0.9; }

.dropzone{
  width:100%; padding:30px 16px; border-radius:var(--radius-md);
  border:1.5px dashed var(--panel-border); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone.drag-over{ border-color:var(--accent); background:var(--accent-soft); }
.dropzone input[type=file]{ display:none; }
.file-picked{ font-size:13.5px; color:var(--text-1); margin-top:10px; word-break:break-all; }

.url-form, .search-form{ width:100%; display:flex; flex-direction:column; gap:16px; align-items:center; }

.consent-note{
  font-size:12px; color:var(--text-2); line-height:1.7; max-width:480px;
}
.consent-note a{ color:var(--text-1); text-decoration:underline; }

.gate-note{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--warn);
  background:var(--warn-soft); padding:10px 16px; border-radius:999px;
}

/* ---------- Results ---------- */
.result-card{
  max-width:640px; margin:24px auto 80px; padding:0; overflow:hidden;
}
.result-head{
  display:flex; align-items:center; gap:16px; padding:26px 30px;
  border-bottom:1px solid var(--panel-border);
}
.result-ring{
  width:76px; height:76px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.result-ring svg{ transform:rotate(-90deg); }
.result-ring .ring-label{
  position:absolute; font-size:15px; font-weight:700; font-family:'Roboto Mono',monospace;
}
.result-meta h2{ font-size:16px; margin:0 0 4px; word-break:break-all; }
.result-meta p{ margin:0; font-size:13px; color:var(--text-2); }
.verdict-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  padding:4px 12px; border-radius:999px; margin-top:8px;
}
.verdict-pill.clean{ background:var(--good-soft); color:#7bf0b3; }
.verdict-pill.suspicious{ background:var(--warn-soft); color:#ffd08a; }
.verdict-pill.malicious{ background:var(--bad-soft); color:#ffa3b3; }

.vendor-list{ padding:8px 30px 26px; }
.vendor-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px; border-bottom:1px solid rgba(255,255,255,0.045); font-size:13.5px;
}
.vendor-row:last-child{ border-bottom:none; }
.vendor-name{ color:var(--text-1); }
.vendor-verdict{ font-family:'Roboto Mono',monospace; font-size:12.5px; }
.vendor-verdict.clean{ color:var(--good); }
.vendor-verdict.malicious{ color:var(--bad); }
.vendor-verdict.suspicious{ color:var(--warn); }
.vendor-verdict.undetected{ color:var(--text-2); }

.status-line{
  display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-1);
  padding:20px 30px;
}
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--panel-border); border-top-color:var(--accent);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.search-results{ display:flex; flex-direction:column; gap:10px; width:100%; }
.search-hit{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; border-radius:var(--radius-md); background:rgba(255,255,255,0.03);
  border:1px solid var(--panel-border); text-align:left; cursor:pointer;
}
.search-hit:hover{ background:rgba(255,255,255,0.06); }
.search-hit .hit-id{ font-family:'Roboto Mono',monospace; font-size:12.5px; word-break:break-all; }
.search-hit .hit-type{ font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; }

.error-banner{
  max-width:640px; margin:18px auto 0; padding:14px 20px; border-radius:var(--radius-md);
  background:var(--bad-soft); color:#ffb3c0; font-size:13.5px; text-align:center;
}

footer.site-footer{
  text-align:center; padding:28px 20px 40px; font-size:12px; color:var(--text-2);
}
footer.site-footer a{ color:var(--text-2); }

@media (max-width:480px){
  .panel-body{ padding:40px 20px 32px; }
  .result-head{ flex-direction:column; text-align:center; }
}