:root{
  --bg:#06070a;
  --panel:#0d0f14;
  --glass: rgba(255,255,255,0.03);
  --neon1: #00f0ff;
  --neon2: #7b61ff;
  --accent: linear-gradient(90deg,var(--neon1),var(--neon2));
  --muted: #9aa2b1;
  --card:#0f1720;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:
 radial-gradient(1200px 600px at 10% 10%, rgba(123,97,255,0.06), transparent),
 radial-gradient(800px 400px at 90% 90%, rgba(0,240,255,0.03), transparent),
 var(--bg);
 color:#d7e6f6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.app{max-width:1100px;margin:28px auto;padding:20px}

.topbar{
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 -1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
}

.logo{display:flex;align-items:center;gap:12px}
.logo-dot{width:10px;height:10px;border-radius:50%;background:var(--neon1);box-shadow:0 0 12px var(--neon1)}
.logo-title{font-weight:700;letter-spacing:0.6px;color:linear-gradient(90deg,#00f0ff,#7b61ff)}
.search-wrap{position:relative;flex:1;max-width:640px;display:flex;align-items:center}
#search{
  width:100%;padding:12px 44px 12px 16px;border-radius:10px;background:var(--glass);border:1px solid rgba(255,255,255,0.03);
  color:#e6f7ff;font-size:16px;outline:none;box-shadow: 0 6px 18px rgba(11,12,18,0.5), inset 0 1px 0 rgba(255,255,255,0.02);
  font-family: "SFMono-Regular", Menlo, Monaco, monospace;
}
#search::placeholder{color: #6e7a87}
#clear{position:absolute;right:6px;border:0;background:transparent;color:#98a8b9;font-size:16px;padding:6px;cursor:pointer}

.stats-row{display:flex;align-items:center;gap:12px;margin:18px 0}
.stat{font-family: "SFMono-Regular", monospace;background: linear-gradient(90deg, rgba(0,240,255,0.06), rgba(123,97,255,0.04));padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.hint{color:var(--muted);font-size:13px}

.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-top:8px}

.card{
  display:flex;gap:14px;padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.03);box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-6px);box-shadow: 0 18px 36px rgba(0,0,0,0.6)}
.card-left{width:110px;display:flex;flex-direction:column;align-items:center;gap:8px}
.profile{width:96px;height:96px;border-radius:8px;object-fit:cover;border:4px solid rgba(0,240,255,0.06);background:linear-gradient(180deg,#071018,#09121b)}
.sig-wrap{width:100%;display:flex;justify-content:center}
.signature{width:80px;height:28px;object-fit:contain;opacity:0.95;filter:grayscale(20%) contrast(1.05)}

.card-right{flex:1}
.name{margin:0;color:#fff;font-size:18px;letter-spacing:0.4px}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;color:var(--muted);font-size:13px}
.details{color:#bcd3ef;font-size:13px;line-height:1.5;background: linear-gradient(90deg, rgba(0,240,255,0.01), transparent);padding:8px;border-radius:8px;margin-top:6px;border:1px solid rgba(255,255,255,0.02)}

.footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}

/* highlight matched text */
.mark{background: linear-gradient(90deg, rgba(123,97,255,0.14), rgba(0,240,255,0.12)); padding:0 4px; border-radius:4px; color:#eafcff}
@media (max-width:520px){
  .topbar{flex-direction:column;align-items:stretch;gap:10px}
  .card{flex-direction:row}
  .card-left{width:86px}
}
/* Keep contact links same color as details text (not blue/purple) */
.contact a,
.contact a:visited,
.details a,
.details a:visited {
  color: #e6f7ff;   /* या #fff / current details text color */
  text-decoration: none;
}

/* Optional: hover me sirf subtle underline chahiye to */
.contact a:hover,
.details a:hover {
  text-decoration: underline;   /* ya none if you want no underline */
}

/* Optional: better tap/keyboard focus without changing color */
.contact a:focus,
.details a:focus {
  outline: 2px solid rgba(0,240,255,0.35);
  outline-offset: 2px;
}
/* ---- Password Gate ---- */
.gate{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(800px 400px at 50% 0%, rgba(0,240,255,0.06), transparent), #06070a;
  z-index:9999;
}
.gate-card{
  width: min(92vw, 380px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.gate-card h2{ margin:0 0 10px 0; font-size:20px; }
#gate-pass{
  width:100%; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06); color:#eafcff; font-size:16px; outline:none;
}
#gate-btn{
  margin-top:10px; width:100%; padding:10px; border:0; border-radius:10px; cursor:pointer;
  background: linear-gradient(90deg, #00f0ff, #7b61ff); color:#001a1d; font-weight:700;
}
.gate-msg{ margin-top:8px; color:#ffb3b3; min-height:18px; font-size:13px; }
.gate-hint{ margin-top:6px; color:#9aa2b1; font-size:12px; text-align:center; }
.gate-shake{ animation: gateShake .35s linear; }
@keyframes gateShake{
  0%{ transform: translateX(0) } 25%{ transform: translateX(-8px) }
  50%{ transform: translateX(8px) } 75%{ transform: translateX(-6px) } 100%{ transform: translateX(0) }
}