:root {
  --web-ink: #eef7ff;
  --web-muted: rgba(222, 237, 255, .72);
  --web-blue: #1f7aff;
  --web-cyan: #58d7ff;
  --web-deep: #06162c;
  --web-card: rgba(239, 248, 255, .92);
  --web-line: rgba(113, 189, 255, .22);
}

body,
body.login-page {
  --login-accent: #1f7aff;
  --login-accent-2: #58d7ff;
  background:
    radial-gradient(circle at 18% 0, rgba(48, 141, 255, .25), transparent 34%),
    radial-gradient(circle at 84% 10%, rgba(80, 215, 255, .16), transparent 30%),
    linear-gradient(rgba(2, 12, 31, .2), rgba(2, 12, 31, .36)),
    url("../img/website-network-bg.png") top left / 627px 627px repeat,
    #041329;
  color: var(--web-ink);
}

body::before {
  background:
    radial-gradient(circle at 12% 8%, rgba(88, 215, 255, .18), transparent 24%),
    radial-gradient(circle at 88% 4%, rgba(31, 122, 255, .2), transparent 30%),
    linear-gradient(180deg, rgba(4, 15, 35, .1), rgba(4, 15, 35, .36));
}

header {
  color: var(--web-ink);
}

header p,
.profile-main span,
.profile-card p,
.metrics span,
.premium-metrics span,
.profile-meta-line,
.post-card p,
.post-card small {
  color: var(--web-muted);
}

header .eyebrow,
.panel .eyebrow,
.fa-circle-check {
  color: var(--web-cyan);
}

button,
.quiet,
.pagination button,
.sort-controls a.is-active,
.profile-open-link {
  background: linear-gradient(135deg, #0b2a55, var(--web-blue));
  color: white;
  box-shadow: 0 16px 36px rgba(31, 122, 255, .28);
}

.analyzer-languages {
  background: rgba(5, 25, 55, .7);
  border: 1px solid var(--web-line);
}

.analyzer-languages button {
  color: var(--web-muted);
}

.analyzer-languages button.is-active {
  background: linear-gradient(135deg, #58d7ff, #1f7aff);
  color: #031024;
}

.panel,
.metrics article,
.profile-card,
.premium-metrics article,
.login-card {
  border: 1px solid rgba(126, 199, 255, .22);
  background:
    linear-gradient(145deg, rgba(244, 250, 255, .94), rgba(222, 240, 255, .82));
  box-shadow: 0 22px 70px rgba(0, 9, 26, .28);
  color: #09233f;
}

.panel {
  background:
    radial-gradient(circle at 0 0, rgba(88, 215, 255, .16), transparent 32%),
    linear-gradient(145deg, rgba(248, 252, 255, .94), rgba(229, 242, 255, .86));
}

.profile-card,
.post-card {
  background:
    radial-gradient(circle at 10% 0, rgba(88, 215, 255, .22), transparent 34%),
    linear-gradient(145deg, rgba(248, 252, 255, .98), rgba(225, 239, 255, .88));
}

.metrics article > i,
.premium-metrics article > i,
.post-card-platform,
.login-logo {
  background: linear-gradient(135deg, rgba(88, 215, 255, .22), rgba(31, 122, 255, .16));
  color: var(--web-blue);
}

.metrics-primary article:first-child > i {
  color: var(--web-cyan);
}

.profile-main img,
.post-card-avatar,
.profile-detail-hero img {
  border-color: rgba(88, 215, 255, .34);
  background: #edf8ff;
  box-shadow: 0 16px 34px rgba(31, 122, 255, .2);
}

.sort-controls a {
  border: 1px solid rgba(31, 122, 255, .14);
  background: rgba(235, 246, 255, .78);
  color: #0b2a55;
}

.top-posts-table th,
.top-posts-table td,
.insight-lists span,
.signal-grid article,
.profile-metric-grid span {
  border-color: rgba(31, 122, 255, .12);
}

.top-posts-table a,
.profile-open-link,
.back-link,
.post-card strong,
.profile-main strong {
  color: #08294d;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--web-ink);
  text-decoration: none;
}

.post-card-brand {
  background: linear-gradient(135deg, #061a35, #0a2c5c);
}

.post-card-platform i::before,
.metrics-primary article:first-child > i::before {
  content: "\f0ac";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.login-page::before {
  background:
    radial-gradient(circle at 14% 10%, rgba(88, 215, 255, .22), transparent 26%),
    linear-gradient(180deg, rgba(4, 15, 35, .18), rgba(4, 15, 35, .54));
}

.login-card {
  max-width: 520px;
  background:
    radial-gradient(circle at 0 0, rgba(88, 215, 255, .18), transparent 34%),
    linear-gradient(145deg, rgba(5, 20, 43, .9), rgba(2, 10, 25, .78));
  border-color: rgba(126, 199, 255, .2);
  box-shadow:
    0 32px 95px rgba(0, 6, 18, .54),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.login-logo svg {
  width: 34px;
  height: 34px;
}

.login-copy h1 {
  color: #f7fbff;
}

.login-copy p {
  color: rgba(222, 237, 255, .74);
}

.login-field {
  overflow: hidden;
  border: 1px solid rgba(126, 199, 255, .16);
  border-radius: 16px;
  border-color: rgba(126, 199, 255, .16);
  background: rgba(255, 255, 255, .08);
}

.login-field-icon {
  color: rgba(88, 215, 255, .82);
}

.login-card .login-field input {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f7fbff;
}

.login-card .login-field input::placeholder {
  color: rgba(222, 237, 255, .42);
}

.login-form button {
  background: linear-gradient(135deg, #0b2a55, #1f7aff);
}

@media (max-width: 1400px) {
  .profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  header { align-items: flex-start; flex-direction: column; }
  .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .profiles { grid-template-columns: 1fr; }
}