:root {
  --bg-dark: #0c0d14;
  --card-bg: rgba(25,26,34,0.85);
  --glass-border: rgba(255,255,255,0.08);
  --accent: #8f6df9;
  --highlight: #4dc6ff;
  --text: #f2f2f7;
  --text-muted: #a1a1b5;
  --shadow: rgba(0,0,0,0.6);
  --particle-color: rgba(77,198,255,0.2);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg-dark);
  overflow-x: hidden;
  position: relative;
}

/* PARTICULAS FLUTUANTES */
#particles {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}

/* HEADER */
header {
  text-align:center;
  padding:20px 10px 25px;
  position: sticky;
  top:0;
  backdrop-filter: blur(10px) saturate(180%);
  background: rgba(25,26,34,0.75);
  border-bottom:1px solid var(--glass-border);
  z-index:10;
  box-shadow:0 4px 30px var(--shadow);
}

header h1 {
  margin:0;
  font-size:26px;
  font-weight:600;
  background: linear-gradient(90deg,var(--highlight),var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:0 0 12px rgba(77,198,255,0.4);
}

header input {
  margin-top:12px;
  padding:10px 16px;
  width:90%;
  max-width:420px;
  border-radius:20px;
  border:1px solid var(--glass-border);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size:15px;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}
header input:focus { outline:none; border-color:var(--accent); background: rgba(255,255,255,0.15); }

/* GRID DE USUÁRIOS */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:20px; padding:25px; z-index:1; position:relative; }

.card {
  background: var(--card-bg);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--glass-border);
  box-shadow:0 6px 25px var(--shadow);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  position:relative;
}
.card:hover { transform: translateY(-5px); box-shadow:0 10px 35px rgba(0,0,0,0.8); border-color: var(--accent); }

.card::before {
  content:"";
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  opacity:0;
  transition: opacity 0.5s;
}
.card:hover::before { opacity:1; }

.card img {
  width:100%;
  height:220px; 
  object-fit: cover;
  object-position:center;
  background: rgba(255,255,255,0.05);
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.85);
}
.card:hover img { transform: scale(1.05); filter: brightness(1); }

.card .info { padding:14px 16px 18px; }
.card h2 { margin:0; font-size:18px; font-weight:600; color: var(--highlight); text-shadow:0 0 6px rgba(77,198,255,0.5); transition:0.3s; }
.card p { margin:6px 0 0; color: var(--text-muted); font-size:14px; }

/* DETALHE */
.hide { display:none; }

#userDetail { padding:24px; animation: fadeInZoom 0.5s ease; }

#backBtn {
  border:0;
  background: rgba(255,255,255,0.1);
  border-radius:12px;
  padding:8px 14px;
  color: var(--highlight);
  cursor:pointer;
  font-weight:500;
  transition:0.2s;
  box-shadow:0 2px 6px var(--shadow);
}
#backBtn:hover { background: rgba(255,255,255,0.2); }

.detail-box {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  padding:20px;
  border-radius:20px;
  background: rgba(25,26,34,0.85);
  border:1px solid var(--glass-border);
  box-shadow:0 8px 25px var(--shadow);
  backdrop-filter: blur(14px) saturate(150%);
  animation: fadeInZoom 0.4s ease;
}

.detail-box img {
  width:280px;
  height:280px;
  border-radius:14px;
  object-fit:cover;
  object-position:center;
}

.detail-info { flex:1; min-width:260px; }
.detail-info h2 { margin-top:0; font-size:26px; color:var(--accent); text-shadow:0 0 8px rgba(147,112,219,0.5); transition:0.3s; }
.detail-info p { font-size:15px; margin:8px 0; color: var(--text-muted); }

footer {
  text-align:center;
  padding:20px;
  font-size:14px;
  color: var(--text-muted);
  background: rgba(25,26,34,0.9);
  border-top:1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}

/* ANIMAÇÕES */
@keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeInZoom { from{opacity:0; transform:scale(0.95);} to{opacity:1; transform:scale(1);} }

/* MOBILE */
@media(max-width:600px){
  .card img{height:180px;}
  .detail-box{flex-direction:column;align-items:center;text-align:center;}
  .detail-box img{width:90%; height:auto;}
}