body{
  margin:0;
  font-family:'Inter',system-ui;
  color:#e8e8e8;
  background:#080808;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
}

.flag{position:absolute;top:0;left:0;width:180px;}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:40px 40px;
}

.card {
    width: 450px;
    text-align: center;
    min-width: 50vw;
    margin-top:80px;
    margin-bottom:80px;
}

.name{font-size:42px;margin-bottom:8px;}
.title{color:#8c8c8c;margin-bottom:10px;}
.bio{color:#bfbfbf;margin-bottom:28px;}

.scanBox{
  background:#0e0e0e;
  border:1px solid #222;
  padding:22px;
  border-radius:16px;
}

select{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  background:#080808;
  border:1px solid #222;
  border-radius:10px;
  color:white;
  font-family:Inter;
}

input{
  width:95.5%;
  padding:12px;
  margin-bottom:12px;
  background:#080808;
  border:1px solid #222;
  border-radius:10px;
  color:white;
  font-family:Inter;
}

#scanBtn{
  width:100%;
  padding:13px;
  background:#e8e8e8;
  color:black;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

#scanBtn:hover{background:white}

#results{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:24px;

  text-align:left;
}

.resultCard{
  background:#0e0e0e;
  border:1px solid #222;
  padding:24px;
  border-radius:16px;
}

.resultTitle{
  font-size:14px;
  color:#888;
  margin-bottom:10px;
  text-transform:uppercase;
}

.row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid #111;
}

.row:last-child{border:none}

.row span:last-child{
  text-align:right;
  word-break:break-word;
  max-width:60%;
}

.good{color:#7CFFB2}
.bad{color:#FF7C7C}
.neutral{color:#aaa}

.navLinks{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:22px;
}

.navLinks a{
  color:#aaa;
  font-size:.9rem;
  border-bottom:1px solid #222;
}

.navLinks a:hover{
  color:white;
  border-color:white;
}

.credits{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  color:#555;
  font-size:.85rem;
}

.credits a{color:white}