.avatar img,
.greeting-photo img,
.profile-avatar img,
.player-avatar-small img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.avatar,
.greeting-photo,
.profile-avatar,
.player-avatar-small {
  overflow: hidden;
}

.greeting-photo {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  color: var(--forest);
  font-weight: 800;
}

.profile-heading {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  color: var(--forest);
  font-size: 1.5rem;
  font-weight: 800;
}

.player-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.match-team .player-inline,
.scoreboard-team .player-inline {
  display: flex;
  width: 100%;
  margin: 4px 0;
}

.match-team.right .player-inline {
  flex-direction: row-reverse;
}

.player-avatar-small {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  color: var(--forest);
  font-size: .67rem;
  font-weight: 800;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
}

.theme-sun { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
[data-theme="dark"] .theme-moon { display: none; }

.public-actions,
.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-theme {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  cursor: pointer;
}

.sidebar-theme .theme-toggle-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
}

[data-theme="dark"] {
  --paper: #0d1512;
  --white: #17211d;
  --ink: #edf4ef;
  --muted: #a5b3aa;
  --line: #314039;
  --mint: #253c32;
  --forest: #4f987b;
  --forest-dark: #3d7b64;
  --lime: #b9db48;
  --danger: #ef8f85;
}

[data-theme="dark"] body,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .mobile-header,
[data-theme="dark"] .mobile-nav,
[data-theme="dark"] .surface,
[data-theme="dark"] .auth-panel,
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .button-light,
[data-theme="dark"] .button-danger,
[data-theme="dark"] .theme-toggle {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}

[data-theme="dark"] .side-nav a:hover,
[data-theme="dark"] .side-nav a.active,
[data-theme="dark"] .row-icon,
[data-theme="dark"] .tag,
[data-theme="dark"] .match-team {
  background: #22332c;
  color: #c5e0d1;
}

[data-theme="dark"] .tag-muted {
  background: #27312d;
  color: #a7b3ac;
}

[data-theme="dark"] .tag-lime,
[data-theme="dark"] .badge-number {
  background: #41531f;
  color: #e1f59b;
}

[data-theme="dark"] .tag-warn {
  background: #4a3a20;
  color: #f0ca7d;
}

[data-theme="dark"] .notice,
[data-theme="dark"] .flash-success {
  background: #172a21;
  border-color: #31523f;
  color: #b9d8c4;
}

[data-theme="dark"] .flash-error {
  background: #351d1b;
  border-color: #613833;
  color: #f2b2aa;
}

[data-theme="dark"] .scoreboard {
  background: #132d25;
}

[data-theme="dark"] .button-outline {
  border-color: #50655b;
  color: #b9d8c9;
}

[data-theme="dark"] .button-outline:hover,
[data-theme="dark"] .button-light:hover {
  background: #22312b;
}

[data-theme="dark"] a,
[data-theme="dark"] .link,
[data-theme="dark"] .section-link {
  color: #8fc7ac;
}

[data-theme="dark"] .brand,
[data-theme="dark"] .side-nav a.active,
[data-theme="dark"] .mobile-nav a.active,
[data-theme="dark"] .sidebar-person,
[data-theme="dark"] .button-dark,
[data-theme="dark"] .button-lime {
  color: #fff;
}

[data-theme="dark"] .list-row,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .mobile-header,
[data-theme="dark"] .mobile-nav {
  border-color: var(--line);
}

@media (max-width: 740px) {
  .profile-heading {
    align-items: flex-start;
  }

  .profile-avatar {
    width: 62px;
    height: 62px;
  }
}