:root {
  color-scheme: dark;
  --bg: #07060d;
  --bg-deep: #05040a;
  --panel: #0a0911;
  --panel-2: #0d0b16;
  --panel-3: #11101b;
  --surface: rgba(15, 14, 25, .82);
  --surface-strong: rgba(18, 17, 30, .96);
  --surface-soft: rgba(116, 132, 255, .055);
  --line: rgba(138, 132, 180, .16);
  --line-soft: rgba(138, 132, 180, .09);
  --line-strong: rgba(126, 139, 255, .34);
  --primary: #7486ff;
  --primary-strong: #6376ff;
  --primary-soft: #a5afff;
  --cyan: #72d7ff;
  --blue: #5a9dff;
  --violet: #8978ff;
  --text: #f7f6fb;
  --muted: #a6a2b3;
  --muted-strong: #c4c0cf;
  --success: #53e2b0;
  --warning: #f1b45f;
  --danger: #ff738e;
  --shadow: 0 28px 90px rgba(0, 0, 0, .43);
  --radius-xl: 31px;
  --radius-lg: 23px;
  --radius-md: 17px;
  --radius-sm: 12px;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% -8%, rgba(93, 112, 255, .10), transparent 28%),
    radial-gradient(circle at 92% 30%, rgba(88, 75, 160, .08), transparent 25%),
    linear-gradient(180deg, #080711 0%, var(--bg) 52%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: rgba(116, 134, 255, .34); color: #fff; }
.is-hidden { display: none !important; }

.ambient {
  position: fixed;
  z-index: -4;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(135px);
  opacity: .11;
  pointer-events: none;
}
.ambient-one { top: -260px; left: -230px; background: #5c70ff; }
.ambient-two { top: 30%; right: -350px; background: #715fff; opacity: .08; }
.noise-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .027;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.cursor-light {
  position: fixed;
  z-index: -1;
  width: 390px;
  height: 390px;
  margin: -195px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(116, 134, 255, .10), transparent 68%);
  transform: translate3d(-500px, -500px, 0);
}
.scroll-progress {
  position: fixed;
  z-index: 50;
  inset: 0 auto auto 0;
  width: var(--scroll-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  box-shadow: 0 0 16px rgba(116, 134, 255, .8);
}

.page-shell { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }
.header {
  position: relative;
  min-height: 584px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 78% 42%, rgba(100, 119, 255, .13), transparent 25%),
    linear-gradient(112deg, rgba(17, 20, 46, .98), rgba(8, 7, 15, .98) 62%);
  box-shadow: var(--shadow);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 139, 230, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 139, 230, .038) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
  transform: translate(var(--grid-x, 0), var(--grid-y, 0));
}
.header::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--pointer-x, 76%) var(--pointer-y, 20%), rgba(126, 139, 255, .11), transparent 23%);
  pointer-events: none;
}
.data-traces { position: absolute; inset: 0; pointer-events: none; opacity: .48; }
.data-traces span { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(129, 142, 255, .42), transparent); animation: trace 9s linear infinite; }
.data-traces span:nth-child(1) { top: 18%; left: -20%; width: 50%; }
.data-traces span:nth-child(2) { top: 43%; right: -24%; width: 55%; animation-delay: -2s; }
.data-traces span:nth-child(3) { bottom: 20%; left: 12%; width: 34%; animation-delay: -4s; }
.data-traces span:nth-child(4) { left: 68%; top: 0; width: 1px; height: 38%; background: linear-gradient(transparent, rgba(129,142,255,.35), transparent); animation-delay: -6s; }
.data-traces span:nth-child(5) { left: 26%; bottom: 0; width: 1px; height: 28%; background: linear-gradient(transparent, rgba(129,142,255,.35), transparent); animation-delay: -7s; }
.data-traces span:nth-child(6) { bottom: 8%; right: 4%; width: 26%; animation-delay: -8s; }
@keyframes trace { 0% { transform: translateX(-44px); opacity: 0; } 22% { opacity: .72; } 100% { transform: translateX(135px); opacity: 0; } }

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 18px 31px;
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 43px;
  height: 43px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(143, 153, 255, .20);
  background: #080819;
  box-shadow: 0 9px 28px rgba(69, 82, 220, .18);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy { display: flex; flex-direction: column; letter-spacing: .17em; line-height: 1; }
.brand-copy strong { font-size: .9rem; }
.brand-copy span { margin-top: 5px; color: var(--primary-soft); font-size: .62rem; letter-spacing: .38em; }
.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 8, 16, .48);
  color: var(--muted-strong);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.live-dot, .footer-pill > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(83, 226, 176, .075), 0 0 13px rgba(83, 226, 176, .52);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .58; transform: scale(.84); } }

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(320px, .87fr);
  align-items: center;
  min-height: 505px;
  padding: 48px 68px 64px;
}
.hero-copy { max-width: 700px; }
.eyebrow, .section-kicker, .profile-kicker, .state-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--primary-soft);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow > span { width: 31px; height: 1px; background: linear-gradient(90deg, var(--primary), transparent); }
.hero-copy h1 {
  margin: 17px 0 19px;
  font-size: clamp(3.15rem, 6.1vw, 5.65rem);
  line-height: .97;
  letter-spacing: -.061em;
}
.hero-copy h1 span { color: #fff; }
.hero-copy h1 em { color: var(--primary); font-style: normal; }
.typing-caret { display: inline-block; width: 3px; height: .82em; margin-left: 7px; background: var(--cyan); vertical-align: -.06em; animation: blink .85s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-copy p { max-width: 590px; margin: 0; color: var(--muted); font-size: 1rem; }
.hero-visual {
  position: relative;
  width: min(354px, 100%);
  aspect-ratio: 1;
  justify-self: end;
  transform: perspective(900px) rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg));
  transition: transform 140ms ease-out;
}
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(129, 142, 255, .20); }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-soft); box-shadow: 0 0 13px var(--primary); }
.orbit-outer { inset: 4%; animation: spin 18s linear infinite; }
.orbit-outer::before { top: 17%; left: 4%; }
.orbit-outer::after { right: 1%; bottom: 26%; }
.orbit-inner { inset: 19%; border-style: dashed; animation: spinReverse 13s linear infinite; }
.orbit-inner::before { top: -4px; left: 50%; }
.orbit-inner::after { left: 8%; bottom: 10%; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
.hero-emblem {
  position: absolute;
  inset: 27%;
  overflow: hidden;
  border-radius: 28%;
  border: 1px solid rgba(148, 158, 255, .27);
  background: rgba(8, 8, 18, .82);
  box-shadow: 0 0 0 14px rgba(116, 134, 255, .035), 0 24px 70px rgba(45, 60, 202, .28);
  animation: float 4.5s ease-in-out infinite;
}
.hero-emblem img { width: 100%; height: 100%; object-fit: cover; }
@keyframes float { 50% { transform: translateY(-9px) rotate(1deg); } }
.signal { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.signal-one { top: 18%; right: 17%; animation: signalPulse 2.2s infinite; }
.signal-two { bottom: 13%; left: 26%; animation: signalPulse 2.2s -1s infinite; }
.signal-three { top: 48%; left: 2%; animation: signalPulse 2.2s -.45s infinite; }
@keyframes signalPulse { 50% { transform: scale(1.75); opacity: .35; } }

main { padding: 38px 0 0; }
.user-id-input { padding: 45px 0 76px; }
.search-layout { display: grid; grid-template-columns: .94fr 1.06fr; gap: 48px; align-items: center; }
.search-intro { padding: 28px 25px 28px 10px; }
.search-intro h2 { margin: 13px 0 15px; font-size: clamp(2.45rem, 5vw, 4.35rem); line-height: .98; letter-spacing: -.056em; }
.search-intro > p { max-width: 500px; margin: 0 0 32px; color: var(--muted); }
.feature-list { display: grid; gap: 10px; }
.feature-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(100%, 390px);
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted-strong);
  transition: 180ms ease;
}
.feature-item:hover { border-color: var(--line); background: rgba(116, 134, 255, .035); transform: translateX(4px); }
.feature-icon, .input-header-icon, .meta-icon, .stat-icon, .stat-title-icon, .state-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(126, 139, 255, .17);
  border-radius: 12px;
  background: rgba(116, 134, 255, .06);
  color: var(--primary-soft);
}
.feature-icon svg, .input-header-icon svg, .meta-icon svg, .stat-icon svg, .stat-title-icon svg, .state-icon svg { width: 20px; height: 20px; }
.feature-item strong { font-size: .88rem; }

.input-container {
  position: relative;
  overflow: hidden;
  padding: 31px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at var(--surface-x, 50%) var(--surface-y, 20%), rgba(116, 134, 255, .11), transparent 30%),
    linear-gradient(145deg, rgba(16, 15, 27, .94), rgba(8, 7, 14, .98));
  box-shadow: 0 25px 65px rgba(0, 0, 0, .30);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 140ms ease, border-color 180ms ease;
}
.input-container:hover { border-color: rgba(126, 139, 255, .28); }
.input-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 37%, rgba(255,255,255,.027) 50%, transparent 63%); transform: translateX(-100%); animation: surfaceShine 7s ease-in-out infinite; }
@keyframes surfaceShine { 55%,100% { transform: translateX(100%); } }
.input-header { position: relative; display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.input-header h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }
.input-form { position: relative; margin-top: 22px; }
.input-group label { display: block; margin-bottom: 8px; color: var(--muted-strong); font-size: .76rem; font-weight: 700; }
.input-control { display: grid; grid-template-columns: 21px minmax(0,1fr); align-items: center; gap: 11px; min-height: 53px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4, 4, 9, .58); transition: 180ms ease; }
.input-control:focus-within { border-color: rgba(126, 139, 255, .58); box-shadow: 0 0 0 4px rgba(116, 134, 255, .07); }
.input-control svg { width: 20px; color: var(--primary-soft); }
.input-control input { min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: .92rem; }
.input-control input::placeholder { color: #6f6b7b; }
.input-feedback { min-height: 19px; margin: 7px 0 0; color: var(--danger); font-size: .72rem; }
.input-help { display: flex; gap: 9px; margin-top: 5px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.help-badge { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--line); border-radius: 50%; color: var(--primary-soft); font-size: .67rem; font-weight: 800; }
.search-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  margin-top: 21px;
  padding: 0 8px 0 19px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-strong), #7f8eff);
  box-shadow: 0 14px 35px rgba(88, 105, 247, .25);
  color: #fff;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 800;
  transition: 180ms ease;
}
.search-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(88, 105, 247, .34); }
.search-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: rgba(255,255,255,.13); }
.btn-icon svg { width: 18px; }
.example-item { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 14px; padding: 14px 2px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--muted-strong); cursor: pointer; font-size: .75rem; }
.example-item strong { color: #fff; }
.example-item svg { width: 18px; color: var(--primary-soft); transition: transform 180ms ease; }
.example-item:hover svg { transform: translateX(4px); }

.state-panel {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 480px;
  margin: 20px 0 56px;
  padding: 55px 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(9, 8, 15, .84);
  text-align: center;
}
.loader-visual { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 24px; }
.loader-visual img { width: 50px; height: 50px; object-fit: cover; border-radius: 15px; opacity: .82; }
.loader-ring { position: absolute; inset: 0; border: 1px solid rgba(126, 139, 255, .15); border-top-color: var(--primary); border-radius: 50%; animation: spin 3.7s linear infinite; }
.loader-ring-two { inset: 16px; border-style: dashed; border-top-color: var(--cyan); animation: spinReverse 4.6s linear infinite; }
.state-panel h2 { margin: 9px 0 3px; font-size: 2.7rem; letter-spacing: -.055em; }
.state-panel p { margin: 0; color: var(--muted); }
.loading-track { width: min(270px, 75vw); height: 3px; margin-top: 28px; overflow: hidden; border-radius: 999px; background: rgba(126, 139, 255, .08); }
.loading-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--primary), var(--cyan), transparent); animation: loadingSlide 1.55s ease-in-out infinite; }
@keyframes loadingSlide { from { transform: translateX(-120%); } to { transform: translateX(340%); } }
.error-icon { width: 58px; height: 58px; margin-bottom: 18px; color: var(--danger); }
.secondary-action { margin-top: 22px; padding: 11px 17px; border: 1px solid var(--line); border-radius: 10px; background: rgba(116, 134, 255, .07); cursor: pointer; }

.profile-section {
  position: relative;
  overflow: hidden;
  padding: 52px 55px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 13% 24%, rgba(116, 134, 255, .11), transparent 24%),
    linear-gradient(145deg, rgba(16, 15, 27, .94), rgba(7, 6, 12, .98));
  box-shadow: var(--shadow);
}
.profile-glow { position: absolute; top: -170px; left: -130px; width: 420px; height: 420px; border-radius: 50%; background: rgba(116, 134, 255, .11); filter: blur(95px); }
.profile-grid-mark { position: absolute; inset: 0; opacity: .035; background-image: linear-gradient(rgba(126,139,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(126,139,255,.5) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,#000,transparent 58%); }
.profile-header { position: relative; display: grid; grid-template-columns: 224px minmax(0,1fr); gap: 48px; align-items: center; }
.avatar-container { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.avatar-orbit { position: absolute; inset: -14px; border: 1px solid rgba(126, 139, 255, .21); border-radius: 50%; animation: spin 16s linear infinite; }
.avatar-orbit::before, .avatar-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-soft); box-shadow: 0 0 14px var(--primary); }
.avatar-orbit::before { top: 20px; left: 22px; }
.avatar-orbit::after { right: 15px; bottom: 29px; }
.avatar { position: absolute; inset: 7px; overflow: hidden; border: 3px solid rgba(255,255,255,.78); border-radius: 50%; background: #090813; box-shadow: 0 22px 52px rgba(0,0,0,.42), 0 0 0 8px rgba(116,134,255,.045); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.status-indicator { position: absolute; right: 8px; bottom: 14px; width: 24px; height: 24px; border: 5px solid #0b0a13; border-radius: 50%; background: #74717d; }
.status-indicator.online { background: #48d597; }
.status-indicator.idle { background: #f2ba59; }
.status-indicator.dnd { background: #f06479; }
.status-bubble { position: absolute; z-index: 5; left: 145px; top: -20px; width: 235px; padding: 14px 31px 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(15, 14, 24, .96); box-shadow: 0 16px 40px rgba(0,0,0,.35); color: var(--muted-strong); font-size: .75rem; }
.status-close { position: absolute; top: 4px; right: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; }
.status-text { display: flex; gap: 7px; }
.user-badge-unique {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 170px;
  padding: 8px 13px;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(149, 160, 255, .31);
  border-radius: 999px;
  background: rgba(13, 12, 23, .96);
  box-shadow: 0 9px 30px rgba(0,0,0,.36), 0 0 22px rgba(116,134,255,.12);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}
.user-badge-unique::before, .nickname-tag::before, .role-tag::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
  transform: translateX(-125%);
  animation: tagShine 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tagShine { 45%,100% { transform: translateX(125%); } }
.badge-icon { display: grid; place-items: center; width: 16px; height: 16px; color: var(--primary-soft); }
.badge-icon svg { width: 16px; height: 16px; }
.user-badge-unique.premium { border-color: rgba(114,215,255,.35); box-shadow: 0 0 24px rgba(114,215,255,.14); }
.user-details { min-width: 0; }
.user-details h1 { margin: 8px 0 0; font-size: clamp(2.7rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.058em; }
.user-tag { margin-top: 7px; color: var(--primary-soft); font-size: 1rem; }
.identity-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
.user-id, .ghost-action { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,5,10,.38); color: var(--muted-strong); cursor: pointer; font-size: .72rem; }
.user-id svg, .ghost-action svg { width: 16px; color: var(--primary-soft); }
.copy-label { color: var(--primary-soft); font-weight: 700; }
.user-bio { max-width: 650px; margin-top: 20px; padding: 15px 17px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(5,5,10,.34); }
.bio-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--primary-soft); font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bio-icon svg { width: 17px; }
.bio-content { color: var(--muted); font-size: .79rem; }
.user-meta { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 47px -55px -30px; border-top: 1px solid var(--line-soft); }
.meta-item { display: flex; align-items: center; gap: 12px; min-height: 94px; padding: 19px 27px; border-right: 1px solid var(--line-soft); }
.meta-item:last-child { border-right: 0; }
.meta-icon { width: 37px; height: 37px; border-radius: 11px; }
.meta-label { display: block; color: var(--muted); font-size: .68rem; }
.meta-value { display: block; margin-top: 3px; color: #fff; font-size: .78rem; }
.status-meta-icon > span { width: 9px; height: 9px; border-radius: 50%; background: #74717d; }
body[data-presence="online"] .status-meta-icon > span { background: #48d597; box-shadow: 0 0 12px rgba(72,213,151,.55); }
body[data-presence="idle"] .status-meta-icon > span { background: #f2ba59; }
body[data-presence="dnd"] .status-meta-icon > span { background: #f06479; }

.content { padding: 54px 0 0; }
.section { padding: 0 0 68px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.section-title { margin: 5px 0 0; font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.052em; }
.section-count { display: inline-flex; min-width: 34px; height: 27px; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .69rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.stat-card { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 112px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(15,14,25,.86), rgba(8,7,13,.94)); transition: transform 180ms ease, border-color 180ms ease; }
.stat-card::after { content: ""; position: absolute; right: -42px; bottom: -58px; width: 130px; height: 130px; border-radius: 50%; background: var(--card-glow, rgba(116,134,255,.10)); filter: blur(7px); }
.stat-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.stat-icon { position: relative; z-index: 1; width: 41px; height: 41px; color: var(--card-accent, var(--primary-soft)); }
.stat-card > div { position: relative; z-index: 1; min-width: 0; }
.stat-value { display: block; overflow: hidden; color: #fff; font-size: 1.42rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.stat-label { display: block; margin-top: 5px; color: var(--muted); font-size: .69rem; }
.stat-trend { position: absolute; z-index: 1; right: 14px; top: 13px; color: var(--muted); font-size: .61rem; }
.stat-purple { --card-accent:#9e90ff; --card-glow:rgba(116,134,255,.10); }
.stat-cyan { --card-accent:#72d7ff; --card-glow:rgba(77,182,255,.10); }
.stat-pink { --card-accent:#7089ff; --card-glow:rgba(90,121,255,.10); }
.stat-lime { --card-accent:#7ae5ff; --card-glow:rgba(74,211,255,.09); }
.nickname-panel { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(10,9,17,.72); }
.nickname-list { display: flex; flex-wrap: wrap; gap: 9px; }
.nickname-tag, .role-tag { position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; border: 1px solid var(--line); background: rgba(116,134,255,.055); color: var(--muted-strong); }
.nickname-tag { padding: 8px 12px; border-radius: 10px; font-size: .73rem; animation: tagReveal .45s both; animation-delay: var(--reveal-delay,0ms); }
@keyframes tagReveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.record-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.record-card { position: relative; min-height: 105px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(12,11,20,.78); }
.record-card::after { content:""; position:absolute; right:-32px; bottom:-42px; width:90px; height:90px; border-radius:50%; background:rgba(116,134,255,.07); }
.record-icon { position: relative; z-index:1; display:block; margin-bottom:7px; font-size:1rem; filter:saturate(.7); }
.record-card strong { position:relative; z-index:1; display:block; font-size:1.25rem; }
.record-card > span:last-child { position:relative; z-index:1; color:var(--muted); font-size:.68rem; }

.servers-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.server-card { min-width:0; padding: 20px; border:1px solid var(--line); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(14,13,23,.84),rgba(8,7,13,.95)); animation: cardReveal .55s both; animation-delay:var(--reveal-delay,0ms); transition:transform 180ms ease,border-color 180ms ease; }
.server-card:hover { transform:translateY(-3px); border-color:var(--line-strong); }
@keyframes cardReveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.server-header { display:flex; align-items:center; gap:13px; }
.server-icon { flex:0 0 auto; width:51px; height:51px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#0c0b14; }
.server-icon img { width:100%; height:100%; object-fit:cover; }
.server-info { min-width:0; flex:1; }
.server-name { overflow:hidden; color:#fff; font-size:.83rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.server-nickname { margin-top:3px; overflow:hidden; color:var(--muted); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.server-details { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px; font-size:.65rem; }
.server-registration { color:#70d9a8; }
.server-hours { color:var(--primary-soft); }
.server-roles { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.role-tag { --role-color:rgba(126,139,255,.22); padding:6px 9px; border-color:color-mix(in srgb,var(--role-color) 36%,rgba(138,132,180,.14)); border-radius:9px; background:color-mix(in srgb,var(--role-color) 11%,rgba(8,7,13,.88)); color:color-mix(in srgb,var(--role-color) 60%,#e7e4ee); font-size:.65rem; animation:roleReveal .45s both; animation-delay:var(--role-delay,0ms); }
@keyframes roleReveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.role-icon { width:14px; height:14px; object-fit:contain; }
.role-emoji { line-height:1; }
.managed-role { border-style:dashed; }
.no-role { color:var(--muted); }
.role-overflow.is-hidden-role { display:none; }
.more-indicator { border:1px solid rgba(126,139,255,.22); border-radius:9px; background:rgba(116,134,255,.075); color:var(--primary-soft); cursor:pointer; padding:6px 9px; font-size:.65rem; font-weight:800; }
.more-indicator:hover { background:rgba(116,134,255,.13); }
.empty-panel { padding:25px; border:1px dashed var(--line); border-radius:var(--radius-md); color:var(--muted); text-align:center; font-size:.76rem; }

.timeline-list { display:grid; gap:11px; }
.timeline-card { display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(12,11,20,.78); animation:cardReveal .5s both; animation-delay:var(--reveal-delay,0ms); }
.timeline-marker { position:relative; display:flex; justify-content:center; }
.timeline-marker::after { content:""; position:absolute; top:19px; bottom:-30px; width:1px; background:var(--line); }
.timeline-card:last-child .timeline-marker::after { display:none; }
.timeline-marker span { position:relative; z-index:1; width:10px; height:10px; margin-top:6px; border:2px solid rgba(255,255,255,.75); border-radius:50%; background:var(--danger); box-shadow:0 0 12px rgba(255,115,142,.34); }
.ticket-marker span { background:var(--primary); box-shadow:0 0 12px rgba(116,134,255,.35); }
.timeline-content { min-width:0; }
.timeline-head { display:flex; justify-content:space-between; gap:14px; }
.timeline-kicker { color:var(--primary-soft); font-size:.61rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.timeline-head h3 { margin:2px 0 0; font-size:.88rem; }
.timeline-content p { margin:9px 0; color:var(--muted-strong); font-size:.75rem; }
.timeline-meta { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.64rem; }
.status-chip { align-self:flex-start; padding:5px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted-strong); font-size:.61rem; }
.status-chip.ativa,.status-chip.aberto,.status-chip.pendente { border-color:rgba(241,180,95,.28); color:#f4c47b; }
.status-chip.resolvido,.status-chip.concluido,.status-chip.revogada { border-color:rgba(83,226,176,.25); color:#72d9b3; }
.feedback-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.feedback-card { position:relative; overflow:hidden; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(12,11,20,.78); animation:cardReveal .5s both; animation-delay:var(--reveal-delay,0ms); }
.feedback-card::after { content:""; position:absolute; top:-35px; right:-45px; width:110px; height:110px; border-radius:50%; background:rgba(116,134,255,.06); }
.feedback-card-head { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:.66rem; }
.feedback-card p { position:relative; margin:12px 0; color:var(--muted-strong); font-size:.75rem; line-height:1.5; }
.feedback-card small { position:relative; color:var(--muted); }

.detailed-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.stat-category { min-width:0; padding:22px; border:1px solid var(--line); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(14,13,23,.82),rgba(8,7,13,.94)); transition:border-color 180ms ease; }
.stat-category:hover { border-color:var(--line-strong); }
.stat-category-wide { grid-column:span 2; }
.category-heading { display:flex; align-items:center; gap:12px; margin-bottom:17px; }
.category-heading h3 { margin:0; font-size:.9rem; }
.stat-title-icon { width:38px; height:38px; }
.stat-breakdown { display:grid; gap:8px; }
.stat-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:13px; min-height:40px; padding:7px 9px; border-radius:10px; background:rgba(116,134,255,.035); }
.stat-row-main { min-width:0; }
.stat-row-label { display:flex; align-items:center; gap:7px; min-width:0; color:var(--muted-strong); font-size:.72rem; }
.stat-row-label > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-row-value { color:#fff; font-size:.77rem; font-weight:800; }
.stat-bar { height:3px; margin-top:5px; overflow:hidden; border-radius:99px; background:rgba(116,134,255,.07); }
.stat-bar span { display:block; width:var(--bar,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary-strong),var(--cyan)); }
.stars { display:flex; gap:2px; color:var(--primary-soft); }
.star.empty { color:#373442; }
.no-data { padding:13px; border-radius:10px; background:rgba(116,134,255,.027); color:var(--muted); font-size:.72rem; text-align:center; }

.site-footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:23px; margin:37px 0 24px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(8,7,14,.72); color:var(--muted); font-size:.69rem; }
.footer-brand { display:flex; align-items:center; gap:8px; color:#fff; font-weight:800; }
.footer-brand img { width:28px; height:28px; border-radius:8px; object-fit:cover; }
.site-footer p { margin:0; text-align:center; }
.footer-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted-strong); }
.footer-pill > span { width:6px; height:6px; box-shadow:0 0 10px rgba(83,226,176,.55); }
.reveal-section { opacity:0; transform:translateY(20px); transition:opacity .62s ease,transform .62s ease; }
.reveal-section.is-visible { opacity:1; transform:translateY(0); }

/* Estado de carregamento reproduz a página dedicada da referência. */
body.loading-mode { min-height:100svh; overflow:hidden; background:#07060d; }
body.loading-mode .ambient, body.loading-mode .cursor-light, body.loading-mode .scroll-progress { opacity:0; }
body.loading-mode .page-shell {
  display:grid;
  grid-template-rows:44px minmax(0,1fr) 95px;
  width:min(calc(100% - 32px),1280px);
  height:min(600px,100svh);
  min-height:min(600px,100svh);
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(126,122,165,.20);
  border-top:0;
  border-radius:0 0 31px 31px;
  background:linear-gradient(180deg,#0a0911 0%,#08070e 100%);
  box-shadow:0 32px 95px rgba(0,0,0,.55);
}
body.loading-mode .header { min-height:44px; margin:0; border:0; border-bottom:1px solid rgba(126,122,165,.18); border-radius:0; background:linear-gradient(90deg,rgba(21,27,54,.70),rgba(9,8,15,.75)); box-shadow:none; }
body.loading-mode .header::before, body.loading-mode .header::after, body.loading-mode .header > * { display:none; }
body.loading-mode main { display:grid; min-height:0; padding:0; }
body.loading-mode .state-panel.loading { align-content:center; width:100%; height:100%; min-height:0; margin:0; padding:43px 26px 34px; border:0; border-radius:0; background:transparent; box-shadow:none; }
body.loading-mode .loader-visual { width:116px; height:116px; margin-bottom:25px; }
body.loading-mode .loader-visual::before { content:""; position:absolute; inset:25px; border:1px dashed rgba(126,139,255,.14); border-radius:50%; animation:spinReverse 10s linear infinite; }
body.loading-mode .loader-visual img { width:52px; height:52px; border:0; border-radius:14px; opacity:.52; filter:grayscale(.25); box-shadow:0 0 26px rgba(116,134,255,.16); }
body.loading-mode .loader-ring { inset:1px; border-color:rgba(126,139,255,.16); border-top-color:var(--primary); box-shadow:inset 0 0 18px rgba(116,134,255,.02); }
body.loading-mode .loader-ring::before, body.loading-mode .loader-ring::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--primary-soft); box-shadow:0 0 12px var(--primary); }
body.loading-mode .loader-ring::before { top:9px; left:23px; }
body.loading-mode .loader-ring::after { right:15px; bottom:20px; }
body.loading-mode .loader-ring-two { inset:17px; border-bottom-color:var(--cyan); }
body.loading-mode .loader-ring-two::before, body.loading-mode .loader-ring-two::after { display:none; }
body.loading-mode .state-eyebrow { color:#aa9cff; font-size:.66rem; font-weight:900; letter-spacing:.17em; }
body.loading-mode .state-panel h2 { margin:8px 0 4px; font-size:2.55rem; letter-spacing:-.06em; }
body.loading-mode .state-panel p { font-size:.86rem; }
body.loading-mode .loading-track { width:270px; margin-top:29px; background:rgba(126,122,165,.09); }
body.loading-mode .site-footer { margin:0; padding:25px 68px; border:0; border-top:1px solid rgba(126,122,165,.18); border-radius:0; background:rgba(6,5,10,.74); }
body.loading-mode .footer-brand img { width:27px; height:27px; opacity:.62; box-shadow:0 0 16px rgba(116,134,255,.14); }

@media (max-width:1020px) {
  .hero-grid { grid-template-columns:1fr .66fr; padding:48px 44px 60px; }
  .hero-visual { width:300px; }
  .search-layout { gap:25px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .record-grid { grid-template-columns:repeat(3,1fr); }
  .user-meta { grid-template-columns:repeat(2,1fr); }
  .meta-item:nth-child(2) { border-right:0; }
  .meta-item:nth-child(-n+2) { border-bottom:1px solid var(--line-soft); }
}
@media (max-width:780px) {
  .page-shell { width:min(calc(100% - 20px),var(--max)); }
  .header { min-height:auto; border-radius:24px; }
  .topbar { min-height:68px; padding:14px 18px; }
  .topbar-status span:last-child { display:none; }
  .hero-grid { grid-template-columns:1fr; gap:18px; padding:43px 24px 52px; }
  .hero-copy h1 { font-size:clamp(2.75rem,13vw,4.35rem); }
  .hero-visual { width:min(285px,76vw); justify-self:center; }
  .search-layout { grid-template-columns:1fr; }
  .search-intro { padding:20px 8px; }
  .input-container { padding:23px; }
  .profile-section { padding:36px 22px 24px; border-radius:24px; }
  .profile-header { grid-template-columns:1fr; gap:35px; text-align:center; }
  .identity-actions { justify-content:center; }
  .user-bio { margin-inline:auto; text-align:left; }
  .status-bubble { left:50%; top:-26px; transform:translateX(-50%); }
  .user-meta { margin:44px -22px -24px; }
  .servers-grid,.detailed-stats,.feedback-list { grid-template-columns:1fr; }
  .record-grid { grid-template-columns:repeat(2,1fr); }
  .stat-category-wide { grid-column:auto; }
  .site-footer { grid-template-columns:1fr; justify-items:center; text-align:center; }
  body.loading-mode { overflow-y:auto; }
  body.loading-mode .page-shell { width:min(calc(100% - 18px),1280px); height:min(600px,calc(100svh - 8px)); margin:0 auto 8px; border-radius:0 0 24px 24px; }
  body.loading-mode .state-panel.loading { padding:40px 20px 32px; }
  body.loading-mode .site-footer { padding:23px 20px; }
}
@media (max-width:520px) {
  .brand-copy { display:none; }
  .user-id { max-width:100%; }
  .user-id > span:first-child { overflow:hidden; text-overflow:ellipsis; }
  .stats-grid,.user-meta,.record-grid { grid-template-columns:1fr; }
  .meta-item { border-right:0; border-bottom:1px solid var(--line-soft); }
  .meta-item:last-child { border-bottom:0; }
  .section-title { font-size:2.2rem; }
  .stat-card { min-height:105px; }
  .server-card { padding:17px; }
  .status-bubble { width:210px; }
  body.loading-mode .page-shell { grid-template-rows:42px minmax(0,1fr) auto; min-height:100svh; height:auto; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .cursor-light { display:none; }
}