/* influence.tools community experiment: Mastodon 4.7.x */
:root {
  --color-bg-primary: #0d1728;
  --color-bg-secondary: #111f32;
  --color-bg-tertiary: #1b3043;
  --color-text-primary: #f6f8f1;
  --color-text-secondary: #acbdc9;
  --color-text-brand: #bcefc9;
  --color-bg-brand-base: #087d70;
  --color-bg-brand-base-hover: #066e63;
  --color-bg-brand-soft: #183e3d;
  --color-bg-brand-softest: #153333;
  --color-border-primary: #2a3c51;
  --color-border-brand: #bcefc9;
  --color-border-brand-soft: #426c67;
  --color-indigo-700: #087d70;
  --color-indigo-800: #066e63;
}

body { background-color: #0d1728; }

.navigation-panel__logo .logo--wordmark { display: none; }
.navigation-panel__logo .column-link--logo::after {
  content: "influence.tools";
  display: block;
  color: #f6f8f1;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.navigation-panel__logo .column-link--logo::first-letter { color: #d7fb78; }

/* Mastodon's sign-in, sign-up, and recovery pages use a separate header. */
.logo-container a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 40px);
  text-decoration: none;
}
.logo-container .logo--wordmark { display: none; }
.logo-container a::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  flex: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='%230d1728' stroke='%232a3c51'/%3E%3Cpath d='M14 18 32 32 49 16M32 32 51 45M32 32 18 51' fill='none' stroke='%23bcefc9' stroke-width='4'/%3E%3Ccircle cx='14' cy='18' r='5' fill='%23d7fb78'/%3E%3Ccircle cx='49' cy='16' r='5' fill='%23b5befe'/%3E%3Ccircle cx='51' cy='45' r='5' fill='%23d7fb78'/%3E%3Ccircle cx='18' cy='51' r='5' fill='%23b5befe'/%3E%3Ccircle cx='32' cy='32' r='6' fill='%23d7fb78'/%3E%3C/svg%3E");
}
.logo-container a::after {
  content: "influence.tools";
  color: #f6f8f1;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.button, .button.button-primary { border-radius: 12px; }
.status, .account, .detailed-status { border-color: #2a3c51; }
a:focus-visible, button:focus-visible { outline-color: #d7fb78; }