:root{
  --bg:#050505;
  --panel:#0b0b0b;
  --panel2:#070707;
  --fg:#f4f4f4;
  --muted:#a6a6a6;
  --line:#242424;
  --line2:#3a3a3a;
  --red:#ff2a2a;
  --shadow: rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(1200px 700px at 50% -10%, #151515 0%, var(--bg) 55%),
    var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* subtle texture */
.bg-noise{
  pointer-events:none;
  position:fixed; inset:0;
  opacity:.06;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* CRT-ish scanlines */
.scanlines{
  pointer-events:none;
  position:fixed; inset:0;
  opacity:.08;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.12) 0px,
    rgba(255,255,255,.12) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
}

.wrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 18px;
}

.top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 18px;
}

.brand{
  display:inline-block;
  text-decoration:none;
  color:var(--fg);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0f0f0f, #070707);
}

.brand:hover{ border-color: var(--line2); }

.topRight{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:.92rem;
}

.led{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid var(--line);
  background: #111;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.led.ok{
  background: var(--red);
  box-shadow: 0 0 18px rgba(255,42,42,.45);
}
.led.bad{
  background: #777;
  box-shadow: 0 0 10px rgba(200,200,200,.2);
}

.card{
  border:1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  box-shadow: 0 20px 70px var(--shadow);
  padding: 18px;
}

.head{
  display:flex;
  align-items:center;
  gap: 16px;
}

.avatar{
  width: 92px;
  height: 92px;
  border-radius: 16px;
  border:1px solid var(--line);
  object-fit: cover;
  background: #0f0f0f;
  flex: 0 0 auto;
}

.meta{ flex: 1 1 auto; min-width: 0; }

.nameRow{
  display:flex;
  align-items:baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.name{
  margin:0;
  font-size: 1.55rem;
  letter-spacing: .02em;
}

.handle{
  color: var(--muted);
  font-size: .95rem;
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  background: #0c0c0c;
}

.tagline{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.35;
}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

.badge{
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .78rem;
  color: var(--fg);
  background: #090909;
}
.badge:nth-child(1){
  border-color: rgba(255,42,42,.55);
}

.bio{
  margin: 16px 0 10px;
  color: #d9d9d9;
  line-height: 1.55;
}

.links{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 12px;
}

.btn{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #101010, #070707);
  color: var(--fg);
  text-decoration:none;
  transition: transform .06s ease, border-color .12s ease;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: var(--line2);
}

.btn:active{
  transform: translateY(0px);
}

.icon{
  width: 24px;
  text-align:center;
  filter: saturate(0.9);
}

.label{
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* show tiny marker for external links */
.btn[data-external="1"]::after{
  content:"↗";
  margin-left:auto;
  color: var(--muted);
  font-size:.9rem;
  padding-left: 10px;
}

.divider{
  height:1px;
  background: var(--line);
  margin: 16px 0 12px;
}

.foot{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-size: .9rem;
}

.dot{
  width:8px; height:8px;
  border-radius:50%;
  background: var(--red);
  box-shadow: 0 0 18px rgba(255,42,42,.45);
}

/* missing-username help */
.help{ margin-top: 14px; }
.helpCard{
  border:1px dashed var(--line2);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.25);
}
.helpCard h2{ margin: 0 0 8px; font-size: 1.1rem; }
.helpCard p{ margin: 8px 0; color: var(--muted); }
.example code{ color: var(--fg); }

/* responsive */
@media (max-width: 520px){
  .head{ align-items:flex-start; }
  .avatar{ width:80px; height:80px; }
  .name{ font-size: 1.35rem; }
}