:root {
  --bg: #07070a;
  --bg-1: #0b0b10;
  --bg-2: #101017;
  --fg: #eeeef2;
  --dim: #8a8a93;
  --dim-2: #5a5a63;
  --dim-3: #36363d;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-3: rgba(255, 255, 255, 0.22);
  --green: oklch(0.74 0.16 145);
  --red: oklch(0.65 0.18 25);
  --amber: oklch(0.78 0.13 75);
  --blue: oklch(0.72 0.14 245);
  --violet: oklch(0.7 0.13 285);
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1240px;
  --radius: 12px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  position: relative;
}

#waves {
  position: fixed; 
  inset: 0; 
  z-index: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none; 
  opacity: 0.75;
}

main { 
  position: relative; 
  z-index: 3; 
  max-width: var(--max); 
  margin: 0 auto; 
  padding: 36px 36px 80px; 
  min-height: calc(100vh - 220px); 
}

.profile-head { 
  position: relative; 
  border: 1px solid var(--line); 
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)); 
  border-radius: 16px; 
  padding: 28px; 
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ph-top { 
  display: flex; 
  align-items: center;
  justify-content: center;
  gap: 22px; 
  flex-wrap: wrap; 
  margin-bottom: 18px;
}

.ph-name-wrap {
  text-align: center;
  width: 100%;
}

.avatar { 
  width: 44px; 
  height: 44px; 
  border-radius: 50%; 
  border: 1px solid var(--line-2); 
  display: inline-grid; 
  place-items: center; 
  font-family: var(--font-mono); 
  font-weight: 600; 
  font-size: 16px; 
  color: #fff; 
  background: linear-gradient(135deg, #667eea, #764ba2); 
  flex-shrink: 0; 
  letter-spacing: 0.02em; 
  overflow: hidden;
  position: relative;
}

.avatar .avatar-ini { 
  grid-area: 1 / 1; 
  z-index: 1; 
}

.avatar .avatar-img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  z-index: 2; 
}

.avatar.xl { 
  width: 104px; 
  height: 104px; 
  font-size: 38px; 
  border-width: 3px; 
  box-shadow: 0 0 0 4px var(--bg-1), 0 12px 28px -10px rgba(0,0,0,0.6); 
}

.ph-name-wrap { 
  flex: 1; 
  min-width: 0; 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
  padding-bottom: 2px; 
}

.profile-display { 
  font-family: var(--font-sans); 
  font-weight: 600; 
  font-size: 26px; 
  color: #fff; 
  letter-spacing: -0.015em; 
  line-height: 1.1; 
}

.profile-handle { 
  font-family: var(--font-mono); 
  font-size: 14px; 
  color: var(--dim); 
}

.profile-grid { 
  display: grid; 
  grid-template-columns: 1.4fr 1fr; 
  gap: 14px; 
}

.panel { 
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)); 
  border: 1px solid var(--line); 
  border-radius: 14px; 
  padding: 22px; 
}

.panel-head { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  margin-bottom: 16px; 
  flex-wrap: wrap; 
}

.panel-title { 
  font-family: var(--font-mono); 
  font-size: 12px; 
  color: #fff; 
  letter-spacing: 0.18em; 
}

.kv { 
  display: grid; 
  grid-template-columns: 130px 1fr; 
  row-gap: 10px; 
  column-gap: 18px; 
  font-family: var(--font-mono); 
  font-size: 12.5px; 
}

.kv .k { 
  color: var(--dim); 
  letter-spacing: 0.1em; 
  padding-top: 2px; 
}

.kv .v { 
  color: #fff; 
}

.rc-tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 6px; 
}

.tag { 
  font-family: var(--font-mono); 
  font-size: 10.5px; 
  letter-spacing: 0.1em; 
  padding: 5px 10px; 
  border-radius: 999px; 
  background: rgba(255,255,255,0.04); 
  color: var(--dim); 
  border: 1px solid var(--line); 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  line-height: 1; 
}

.tag.human { 
  color: var(--green); 
  border-color: color-mix(in oklch, var(--green) 28%, transparent); 
  background: color-mix(in oklch, var(--green) 7%, transparent); 
}

@media (max-width: 980px) {
  .profile-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 110px 1fr; }
}

@media (max-width: 720px) {
  main { padding: 24px 20px 60px; }
  .profile-head { padding: 18px; }
  .profile-display { font-size: 24px; }
}