.setup-menu {
  display: contents;
}

.tt-menu-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  text-align: left;
}

.tt-menu-button .tt-menu-icon {
  flex: 0 0 auto;
  width: clamp(24px, 1.25em, 28px);
  height: clamp(24px, 1.25em, 28px);
  object-fit: contain;
  pointer-events: none;
}

:root[data-theme="dark"] .tt-menu-button .tt-menu-icon,
:root[data-theme="gunmetal"] .tt-menu-button .tt-menu-icon {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

:root[data-theme="light"] .tt-menu-button .tt-menu-icon {
  filter: none;
  opacity: 1;
}

.tt-menu-button .tt-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.range-settings-toggle.tt-menu-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 22px;
  justify-content: stretch;
}

.range-settings-toggle.tt-menu-button .tt-menu-icon {
  justify-self: start;
}

.range-settings-toggle.tt-menu-button .tt-menu-label {
  justify-self: start;
}

:root[data-menu-icons="off"] .tt-menu-button .tt-menu-icon {
  display: none;
}

.club-menu-action-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 12px;
  aspect-ratio: 1;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: #e1261c;
  box-shadow: 0 0 0 2px rgba(225, 38, 28, 0.18);
  pointer-events: none;
}

.club-menu-action-badge[hidden] {
  display: none;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: max(20px, var(--tt-safe-top)) max(20px, var(--tt-safe-right)) max(20px, var(--tt-safe-bottom)) max(20px, var(--tt-safe-left));
  background: rgba(0, 0, 0, 0.72);
}

.loading-card {
  width: min(92vw, 460px);
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.loading-card h2 {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2rem);
}

.loading-card progress {
  width: 100%;
  height: 18px;
  accent-color: var(--accent-2);
}

.loading-card span {
  color: var(--muted);
  font-size: clamp(1rem, 4vw, 1.18rem);
  font-weight: 700;
}

.loading-card-ocr {
  gap: 14px;
}

.loading-card-ocr h2 {
  display: flex;
  gap: 12px;
  align-items: center;
}

.loading-card-ocr h2::before {
  content: "";
  width: 24px;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: tt-ocr-spin 0.9s linear infinite;
}

.loading-card-error h2::before {
  animation: none;
  border-color: rgba(245, 181, 66, 0.78);
}

.ocr-loading-subtitle {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

.ocr-loading-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ocr-loading-steps li {
  position: relative;
  min-height: 28px;
  padding-left: 32px;
  color: var(--muted);
  font-weight: 800;
}

.ocr-loading-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  aspect-ratio: 1;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--field);
}

.ocr-loading-steps li.is-done {
  color: var(--text);
}

.ocr-loading-steps li.is-done::before {
  border-color: var(--accent-2);
  background: var(--accent-2);
}

.ocr-loading-steps li.is-active {
  color: var(--text);
}

.ocr-loading-steps li.is-active::before {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(141, 200, 145, 0.18);
}

.ocr-loading-debug {
  max-height: 150px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font: 0.82rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.ocr-loading-debug-image {
  width: min(100%, 320px);
  max-height: 220px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

@keyframes tt-ocr-spin {
  to {
    transform: rotate(360deg);
  }
}

.about-dialog {
  width: min(92vw, 680px);
  max-height: 82svh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
}

.about-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.about-dialog.dialog-fallback[open],
.learning-dialog.dialog-fallback[open],
.saved-series-dialog.dialog-fallback[open],
.settings-dialog.dialog-fallback[open],
.admin-dialog.dialog-fallback[open],
.profile-dialog.dialog-fallback[open],
.messages-dialog.dialog-fallback[open],
.analysis-plot-dialog.dialog-fallback[open],
.add-series-source-dialog.dialog-fallback[open],
.add-series-crop-dialog.dialog-fallback[open],
.kk-score-review-dialog.dialog-fallback[open],
.series-photo-dialog.dialog-fallback[open] {
  display: block;
  position: fixed;
  inset: max(14px, var(--tt-safe-top)) max(14px, var(--tt-safe-right)) max(14px, var(--tt-safe-bottom)) max(14px, var(--tt-safe-left));
  margin: auto;
  z-index: 1100;
  box-shadow: var(--shadow);
}

.about-content {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.add-series-source-dialog {
  width: min(92vw, 520px);
}

.add-series-source-actions {
  display: grid;
  gap: 12px;
}

.about-head {
  display: grid;
  grid-template-columns: 1fr 54px;
  align-items: center;
  gap: 12px;
}

.about-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2rem);
}

#aboutCloseButton,
#helpCloseButton,
#addSeriesSourceCloseButton {
  min-height: 54px;
  padding: 0;
  font-size: 1.8rem;
}

#aboutBody {
  overflow: auto;
  max-height: calc(82svh - 100px);
  color: var(--muted);
  line-height: 1.45;
}

#aboutBody h3 {
  margin: 18px 0 8px;
  color: var(--text);
}

#aboutBody ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

#helpBody {
  overflow: auto;
  max-height: calc(82svh - 180px);
  color: var(--muted);
  font-size: clamp(1.18rem, 4.4vw, 1.34rem);
  line-height: 1.45;
}

#helpBody h3 {
  margin: 18px 0 8px;
  color: var(--text);
  font-size: clamp(1.45rem, 5vw, 1.75rem);
}

#helpBody h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.22rem, 4.4vw, 1.4rem);
}

#helpBody ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

#helpBody p {
  margin: 6px 0 0;
  font-size: 1em;
}

.install-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.install-help-grid section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.install-help-grid img {
  width: 48px;
  aspect-ratio: 1;
  border-radius: 8px;
}

#helpOkButton {
  min-height: 54px;
}

.help-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

.help-language-button {
  justify-self: start;
  width: auto;
  min-height: 42px;
  padding: 0 12px;
}

.help-tabs button {
  width: auto;
  min-height: 42px;
  padding: 0 12px;
  font-size: 0.95rem;
}

.help-tabs button.active {
  border-color: rgba(141, 200, 145, 0.72);
  background: rgba(141, 200, 145, 0.16);
  color: var(--text);
}

.terms-content {
  display: grid;
  gap: 10px;
}

.terms-content h3,
.terms-content h4,
.terms-content p {
  margin: 0;
}

.terms-content h4 {
  margin-top: 10px;
  color: var(--accent-2);
}

.feature-locked-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.feature-locked-card h3,
.feature-locked-card p {
  margin: 0;
}

.learning-dialog {
  width: min(96vw, 980px);
  max-height: 92svh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
}

.learning-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.series-photo-dialog {
  width: min(96vw, 980px);
  max-height: 96dvh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050606;
  color: var(--text);
  padding: 0;
}

.series-photo-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.series-photo-viewer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  max-height: 96dvh;
  padding: max(12px, var(--tt-safe-top)) max(12px, var(--tt-safe-right)) max(12px, var(--tt-safe-bottom)) max(12px, var(--tt-safe-left));
}

.series-photo-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
}

.series-photo-download {
  display: grid;
  place-items: center;
  min-height: 54px;
  border: 1px solid rgba(141, 200, 145, 0.58);
  border-radius: 8px;
  color: var(--text);
  background: rgba(141, 200, 145, 0.16);
  text-decoration: none;
  font-weight: 800;
  padding: 0 14px;
}

#seriesPhotoCloseButton {
  min-height: 54px;
  padding: 0;
  font-size: 1.8rem;
}

#seriesPhotoImage {
  display: block;
  width: 100%;
  max-height: calc(96dvh - 92px);
  object-fit: contain;
  background: #050606;
}

.learning-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  max-height: 92svh;
  padding: max(16px, var(--tt-safe-top)) max(16px, var(--tt-safe-right)) max(16px, var(--tt-safe-bottom)) max(16px, var(--tt-safe-left));
}

.saved-series-dialog .learning-content {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.learning-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.learning-title {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.learning-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.learning-head-actions button {
  width: auto;
}

.learning-head-actions button[id$="CloseButton"] {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  padding: 0;
  font-size: 1.8rem;
  line-height: 1;
}

.learning-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2rem);
}

.learning-head span,
.learning-empty,
.learning-section-title {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
}

#learningCloseButton {
  min-height: 54px;
  padding: 0;
  font-size: 1.8rem;
}

#profileCloseButton,
#messagesCloseButton,
#settingsCloseButton,
#adminCloseButton {
  min-height: 54px;
  padding: 0;
  font-size: 1.8rem;
}

#clearLearningButton {
  min-height: 46px;
  padding: 0 16px;
}

.learning-list {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.learning-section-title {
  margin-top: 4px;
  text-transform: uppercase;
}

.learning-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: var(--surface-soft);
}

.learning-row.positive {
  border-left-color: var(--accent-2);
}

.learning-row.negative {
  border-left-color: var(--accent);
}

.saved-series-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent-2);
  border-radius: 8px;
  background: var(--surface-soft);
}

.saved-series-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.saved-series-actions {
  display: grid;
  gap: 8px;
  width: min(230px, 38vw);
}

.saved-series-date {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.saved-series-date input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 0 10px;
  font-size: 0.92rem;
}

.saved-series-meta {
  display: grid;
  gap: 4px;
  color: var(--text);
  font-size: clamp(1rem, 2.7vw, 1.22rem);
  font-weight: 650;
}

.saved-series-meta small {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.saved-series-delete {
  min-height: 46px;
  padding: 0 12px;
  border-color: rgba(255, 90, 70, 0.54);
  color: #ffd8d2;
  font-size: 0.9rem;
}

.saved-series-edit {
  min-height: 46px;
  padding: 0 12px;
  border-color: rgba(141, 200, 145, 0.52);
  color: #d9f2da;
  font-size: 0.9rem;
}

.saved-series-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050606;
}

.saved-series-photo-button {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.saved-series-photo-button:focus-visible {
  outline: 3px solid rgba(141, 200, 145, 0.72);
  outline-offset: -4px;
}

.saved-series-photo img {
  display: block;
  width: 100%;
  max-height: min(54vh, 520px);
  object-fit: contain;
  background: #050606;
}

.saved-series-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}

.saved-series-filters label {
  gap: 6px;
  min-width: 0;
  font-size: 0.88rem;
}

.saved-series-filters select,
.saved-series-filters input,
.saved-series-filters button {
  min-height: 46px;
  width: 100%;
  padding: 0 12px;
  font-size: 0.95rem;
}

.series-edit-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 6, 6, 0.88);
}

.series-edit-meta label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.series-edit-meta select {
  min-height: 42px;
  padding: 0 10px;
  font-size: 0.92rem;
}

.points-help-table {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.points-help-table div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.points-help-table span {
  min-width: 0;
}

.points-help-table strong {
  color: var(--accent);
  white-space: nowrap;
}

.site-prompt-content {
  max-width: min(440px, calc(100vw - 28px));
}

.site-prompt-content #sitePromptMessage {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}

.site-prompt-input-wrap {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.86rem;
}

.site-prompt-input-wrap input {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 0 12px;
  font-size: 1rem;
}

.site-prompt-actions {
  margin-top: 14px;
}

.saved-series-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.saved-series-shot {
  display: grid;
  gap: 6px;
}

.saved-series-shot .shot-preview {
  grid-row: auto;
  width: 100%;
  min-width: 0;
}

.saved-series-shot span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.saved-series-score-table {
  display: grid;
  gap: 10px;
}

.saved-series-score-table-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.saved-series-score-table-summary strong {
  color: var(--text);
}

.saved-series-score-table-grid {
  display: grid;
  grid-template-columns: 54px minmax(84px, 0.75fr) minmax(86px, 0.75fr) minmax(96px, 0.85fr) minmax(78px, 0.7fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 6, 6, 0.42);
}

.saved-series-score-table-grid > * {
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.saved-series-score-table-grid > strong {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  font-size: 0.78rem;
}

.analysis-list {
  gap: 14px;
}

.rankings-dialog {
  width: min(96vw, 1040px);
}

.rankings-content {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.rankings-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.rankings-scope,
.rankings-toggle-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.rankings-scope button,
.rankings-toggle-filters button {
  min-height: 46px;
  padding: 8px 12px;
}

.rankings-scope button.active,
.rankings-toggle-filters button.active {
  border-color: rgba(141, 200, 145, 0.72);
  background: rgba(141, 200, 145, 0.16);
}

.rankings-weapon-filter[hidden] {
  display: none;
}

.rankings-filters select,
.rankings-filters input {
  min-height: 54px;
  font-size: 1rem;
}

.rankings-table {
  display: grid;
  gap: 8px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 54px 34px minmax(0, 1fr) minmax(120px, auto);
  gap: 10px;
  align-items: center;
  width: 100%;
  color: inherit;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.ranking-row:hover,
.ranking-row:focus-visible {
  border-color: rgba(141, 200, 145, 0.66);
  background: rgba(141, 200, 145, 0.1);
}

.ranking-row.current-user {
  border-color: rgba(141, 200, 145, 0.74);
  background: rgba(141, 200, 145, 0.14);
}

.ranking-rank {
  font-size: 1.1rem;
}

.ranking-medal {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.ranking-medal-placeholder {
  visibility: hidden;
}

.ranking-medal svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: rgba(16, 18, 20, 0.52);
  stroke-linejoin: round;
  stroke-width: 0.9;
}

.ranking-medal.rank-1 {
  color: #f6c94d;
  filter: drop-shadow(0 0 7px rgba(246, 201, 77, 0.45));
}

.ranking-medal.rank-2 {
  color: #cfd6df;
  filter: drop-shadow(0 0 7px rgba(207, 214, 223, 0.36));
}

.ranking-medal.rank-3 {
  color: #c47b3a;
  filter: drop-shadow(0 0 7px rgba(196, 123, 58, 0.34));
}

.ranking-profile {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.ranking-photo {
  width: 46px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: #050606;
}

.ranking-photo-frame {
  position: relative;
  display: inline-grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  overflow: visible;
}

.ranking-photo-frame.has-bling .ranking-photo {
  position: relative;
  z-index: 2;
  border-radius: 50%;
}

.ranking-bling {
  position: absolute;
  inset: -10%;
  z-index: 3;
  width: 120%;
  height: 120%;
  object-fit: contain;
  pointer-events: none;
}

.ranking-name {
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-series-dialog {
  width: min(96vw, 820px);
}

.ranking-report-dialog {
  width: min(94vw, 560px);
}

.ranking-series-content {
  grid-template-rows: auto minmax(0, 1fr);
}

.ranking-report-content {
  grid-template-rows: auto minmax(0, 1fr);
}

.ranking-report-form {
  display: grid;
  gap: 14px;
  overflow: auto;
}

.ranking-report-form textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--field);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.42;
  resize: vertical;
}

.ranking-report-form button {
  min-height: 54px;
  padding: 0 14px;
}

.ranking-series-report-button {
  min-height: 48px;
  padding: 0 14px;
  border-color: rgba(235, 152, 92, 0.62);
  background: rgba(235, 152, 92, 0.16);
  color: var(--text);
  font-size: clamp(0.9rem, 2.8vw, 1rem);
  font-weight: 850;
  white-space: nowrap;
}

.ranking-series-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 4px;
}

.ranking-series-reported-badge {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(235, 152, 92, 0.64);
  border-radius: 999px;
  background: rgba(235, 152, 92, 0.16);
  color: var(--text);
  padding: 0 14px;
  font-weight: 850;
}

.ranking-series-body {
  display: grid;
  gap: 14px;
  overflow: auto;
}

.ranking-series-photo {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050606;
}

.ranking-series-photo img {
  display: block;
  width: 100%;
  max-height: min(58vh, 560px);
  object-fit: contain;
}

.ranking-series-score {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.ranking-stats {
  display: grid;
  gap: 3px;
  justify-items: end;
}

.ranking-score {
  color: var(--text);
  font-weight: 850;
}

.ranking-stats small {
  color: var(--muted);
  font-weight: 750;
}

.profile-dialog {
  width: min(96vw, 760px);
}

.loadout-dialog {
  width: min(96vw, 920px);
}

.confirm-dialog {
  width: min(92vw, 440px);
}

.messages-dialog {
  width: min(96vw, 1060px);
}

.settings-dialog,
.admin-dialog {
  width: min(96vw, 760px);
}

.profile-content {
  grid-template-rows: auto minmax(0, 1fr);
}

.settings-content {
  grid-template-rows: auto minmax(0, 1fr);
}

.shop-content {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.admin-content {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.admin-dialog .learning-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

#adminRefreshButton {
  width: auto;
  min-height: 54px;
  padding: 0 14px;
  font-size: 1rem;
}

.admin-search {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
}

.admin-search input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 0 14px;
  font-size: 1rem;
}

.admin-tabs {
  margin: 0;
}

.messages-content {
  grid-template-rows: auto auto minmax(0, 1fr);
}

#settingsStatus[data-tone="success"],
#shopStatus[data-tone="success"],
#adminStatus[data-tone="success"] {
  color: #bde8c0;
}

#settingsStatus[data-tone="error"],
#shopStatus[data-tone="error"],
#adminStatus[data-tone="error"] {
  color: #ffb5ad;
}

.shop-points-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.shop-points-card span {
  color: var(--muted);
  font-weight: 800;
}

.shop-points-card strong {
  color: var(--accent-2);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
}

.shop-tabs {
  margin: 0;
}

.shop-products-list {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.shop-product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.shop-product-card.has-media {
  grid-template-columns: 64px minmax(0, 1fr) minmax(140px, auto);
}

.shop-product-image {
  width: 64px;
  aspect-ratio: 1;
  object-fit: contain;
}

.shop-theme-preview {
  display: grid;
  width: 64px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.32rem;
  font-weight: 900;
  text-shadow: var(--engraved-text-shadow);
}

.shop-theme-preview-gunmetal {
  background:
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 32% 22%, rgba(226, 237, 240, 0.18), transparent 42%),
    linear-gradient(145deg, #263139, #0d1215 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -10px 24px rgba(0, 0, 0, 0.44);
}

.shop-product-info {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.shop-product-info strong {
  color: var(--text);
  text-shadow: var(--engraved-text-shadow);
}

.shop-product-info span,
.shop-product-info small,
.shop-unavailable {
  color: var(--muted);
  font-weight: 750;
}

.shop-product-card button {
  min-height: 54px;
  padding: 0 16px;
  font-size: 1rem;
}

.shop-coming-soon {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(141, 200, 145, 0.42);
  border-radius: 8px;
  background: rgba(141, 200, 145, 0.09);
}

.shop-coming-soon-coin {
  display: grid;
  width: 72px;
  aspect-ratio: 1;
  place-items: center;
  border: 4px solid #f2ca62;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4b7, #d49a32 72%);
  color: #2b2018;
  font-size: 2rem;
  font-weight: 950;
}

.shop-coming-soon strong {
  display: block;
  color: var(--text);
  font-size: 1.1rem;
}

.shop-coming-soon span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.35;
}

.settings-form {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.settings-section {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.settings-section h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.16rem, 3.4vw, 1.34rem);
}

.settings-section label {
  font-size: 1rem;
}

.settings-section select,
.settings-section button,
.settings-section .secondary-link {
  min-height: 54px;
  font-size: 1rem;
}

.settings-range-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.settings-range-row input {
  grid-column: 1 / -1;
  width: 100%;
  height: 34px;
  accent-color: var(--accent-2);
}

.profile-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-check-row input {
  width: 24px;
  min-width: 24px;
  height: 24px;
  accent-color: var(--accent-2);
}

.admin-sections {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.admin-section {
  display: grid;
  gap: 10px;
}

.admin-search[hidden],
.admin-section[hidden] {
  display: none;
}

.admin-section h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.05rem, 3vw, 1.22rem);
}

.admin-users-list,
.admin-reports-list {
  display: grid;
  gap: 10px;
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-user-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-user-info strong,
.admin-user-info span,
.admin-user-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-info span,
.admin-user-info small {
  color: var(--muted);
  font-weight: 750;
}

.admin-user-actions {
  display: grid;
  gap: 8px;
}

.admin-user-group {
  min-height: 48px;
  font-size: 0.96rem;
}

.admin-user-points-button {
  min-height: 48px;
  padding: 8px 12px;
}

.admin-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-report-info {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-report-info strong,
.admin-report-info span,
.admin-report-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-report-info span,
.admin-report-info small,
.admin-report-reason {
  color: var(--muted);
  font-weight: 750;
}

.admin-report-reason {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.admin-report-actions {
  display: grid;
  gap: 8px;
}

.admin-report-actions button,
.admin-delete-report-form button {
  min-height: 48px;
  padding: 0 14px;
}

.admin-report-actions .danger,
.admin-delete-report-form .danger {
  border-color: rgba(255, 117, 100, 0.72);
  background: rgba(255, 117, 100, 0.17);
}

.admin-delete-report-dialog {
  width: min(94vw, 560px);
}

.admin-delete-report-content {
  grid-template-rows: auto minmax(0, 1fr);
}

.admin-delete-report-form {
  display: grid;
  gap: 14px;
  overflow: auto;
}

.admin-delete-report-form textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--field);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.42;
  resize: vertical;
}

#messagesStatus[data-tone="error"] {
  color: #ffb5ad;
}

#messagesStatus[data-tone="success"] {
  color: #bde8c0;
}

.messages-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(180px, auto);
  gap: 12px;
  align-items: end;
}

.messages-tabs {
  grid-column: 1 / -1;
  margin: 0;
}

.messages-tabs button {
  min-height: 46px;
}

.messages-toolbar select,
.message-form input,
.message-form textarea,
.message-reply-form textarea {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--field);
  color: var(--text);
  padding: 0 14px;
  font-size: 1rem;
}

.message-form textarea,
.message-reply-form textarea {
  min-height: 132px;
  padding: 12px 14px;
  line-height: 1.42;
  resize: vertical;
}

.message-to-all-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(235, 152, 92, 0.46);
  border-radius: 8px;
  background: rgba(235, 152, 92, 0.12);
  color: var(--text);
  font-weight: 850;
}

.message-to-all-label[hidden] {
  display: none;
}

.message-to-all-label input {
  width: 22px;
  min-height: 22px;
  accent-color: var(--accent);
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

.messages-compose,
.message-detail,
.message-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.messages-compose {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.messages-compose[hidden] {
  display: none;
}

.messages-compose h3 {
  margin: 0;
  font-size: clamp(1.14rem, 3.5vw, 1.36rem);
}

.message-form,
.message-reply-form {
  display: grid;
  gap: 12px;
}

.message-form button,
.message-reply-form button,
#messageNewButton,
#messagesDeleteButton {
  height: 54px;
  min-height: 54px;
  padding: 0 14px;
}

.messages-browser {
  display: grid;
  grid-template-rows: minmax(180px, 0.82fr) minmax(220px, 1fr);
  gap: 12px;
  min-height: 0;
}

.messages-layout.compose-closed {
  grid-template-columns: minmax(0, 1fr);
}

.messages-layout.compose-open {
  grid-template-columns: minmax(0, 1fr);
}

.messages-layout.compose-closed .messages-browser {
  grid-column: 1;
}

.messages-browser[hidden] {
  display: none;
}

.messages-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.message-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.message-row.unread {
  border-left: 5px solid var(--accent-2);
}

.message-row input[type="checkbox"] {
  width: 24px;
  min-height: 24px;
  margin-top: 6px;
  accent-color: var(--accent);
}

.message-row-button {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.message-row-button:hover,
.message-row-button:focus-visible {
  outline: 2px solid rgba(141, 200, 145, 0.62);
  outline-offset: 4px;
}

.message-row-main,
.message-row-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.message-row-main strong,
.message-row-main span,
.message-row-meta span,
.message-row-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-row-main strong {
  color: var(--text);
  font-size: 1.02rem;
}

.message-row-main span,
.message-row-meta,
.message-row-preview {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.message-read-state {
  flex: 0 0 auto;
  color: #bde8c0;
}

.message-row.unread .message-read-state {
  color: #ffd18f;
}

.message-detail {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}

.message-detail h3 {
  margin: 0;
  font-size: clamp(1.18rem, 3.4vw, 1.5rem);
  overflow-wrap: anywhere;
}

.message-detail-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 750;
}

.message-detail-body {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.48;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-detail-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.message-reply-form {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.profile-form {
  display: grid;
  gap: 16px;
  align-content: start;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.profile-tabs {
  position: sticky;
  top: var(--tt-safe-gap);
  z-index: 4;
  margin: 0;
  padding-bottom: 10px;
  background: var(--panel);
}

.profile-tabs button {
  min-height: 46px;
}

.profile-tab-has-badge {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}

.profile-tab-badge {
  width: 11px;
  aspect-ratio: 1;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: #e1261c;
  pointer-events: none;
}

.profile-tab-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.profile-tab-panel[hidden] {
  display: none;
}

.profile-tab-panel > h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.2rem, 4vw, 1.5rem);
}

.profile-privacy-options {
  display: grid;
  gap: 12px;
}

.profile-grid,
.profile-weapon-row,
.profile-account-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-form input,
.profile-form select {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--field);
  color: var(--text);
  padding: 0 14px;
  font-size: 1rem;
}

.profile-photo-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-photo-bling-wrap {
  position: relative;
  display: grid;
  width: 96px;
  aspect-ratio: 1;
  place-items: center;
  align-self: center;
  overflow: visible;
}

.profile-photo-preview {
  width: 96px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050606;
}

.profile-photo-bling-wrap.has-bling .profile-photo-preview {
  position: relative;
  z-index: 2;
  border-radius: 50%;
}

.profile-photo-bling {
  position: absolute;
  inset: -10%;
  z-index: 3;
  width: 120%;
  height: 120%;
  object-fit: contain;
  pointer-events: none;
}

.profile-photo-actions {
  display: grid;
  gap: 10px;
}

.profile-bling-label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
}

.profile-bling-hint {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.35;
}

.profile-cropper {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(141, 200, 145, 0.42);
  border-radius: 8px;
  background: rgba(141, 200, 145, 0.09);
}

.profile-crop-frame {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: #050606;
  cursor: grab;
  touch-action: none;
}

.profile-crop-frame:active {
  cursor: grabbing;
}

.profile-crop-frame::after {
  content: "";
  position: absolute;
  inset: 33.333%;
  border: 1px solid rgba(255, 255, 255, 0.56);
  pointer-events: none;
}

.profile-crop-frame img {
  position: absolute;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
}

.profile-crop-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-crop-actions button {
  min-height: 50px;
  font-size: 1rem;
}

.add-series-crop-dialog {
  width: min(96vw, 900px);
}

.kk-score-review-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
}

.kk-score-review-content {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 100dvh;
  padding: max(12px, var(--tt-safe-top)) max(12px, var(--tt-safe-right)) max(12px, var(--tt-safe-bottom)) max(12px, var(--tt-safe-left));
}

.kk-score-review-content .learning-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.kk-score-review-form {
  display: grid;
  min-height: 0;
}

.kk-score-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

.kk-score-review-workspace,
.kk-score-review-side {
  min-width: 0;
  min-height: 0;
}

.kk-score-review-workspace {
  display: grid;
  grid-template-rows: minmax(220px, 0.82fr) minmax(260px, 1fr);
  gap: 12px;
}

.kk-score-review-form.image-zoom-active .kk-score-review-workspace {
  grid-template-rows: minmax(320px, min(58dvh, 680px)) minmax(260px, 1fr);
}

.kk-score-review-settings-toggle {
  display: none;
  min-height: 50px;
  border: 1px solid rgba(141, 200, 145, 0.58);
  border-radius: 8px;
  background: rgba(141, 200, 145, 0.14);
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
}

.kk-score-review-side {
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: auto;
  padding-right: 2px;
}

.kk-score-review-back {
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  padding: 0;
  font-size: 1.6rem;
}

.kk-score-review-preview {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  --kk-review-zoom: 1;
  --kk-review-pan-x: 0px;
  --kk-review-pan-y: 0px;
}

.kk-score-review-preview figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050606;
}

.kk-score-preview-button {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
  touch-action: manipulation;
}

.kk-score-preview-button:disabled {
  cursor: default;
}

.kk-score-preview-button:focus-visible {
  outline: 3px solid rgba(141, 200, 145, 0.72);
  outline-offset: -4px;
}

.kk-score-review-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #050606;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.kk-score-review-preview.zoom-active {
  grid-template-columns: 1fr;
  min-height: 0;
  cursor: grab;
  touch-action: none;
}

.kk-score-review-preview.zoom-active:active {
  cursor: grabbing;
}

.kk-score-review-preview.zoom-active figure:not(.is-zoomed) {
  display: none;
}

.kk-score-review-preview.zoom-active .is-zoomed {
  display: block;
  width: 100%;
  height: 100%;
}

.kk-score-review-preview.zoom-active .kk-score-preview-button {
  cursor: grab;
  touch-action: none;
}

.kk-score-review-preview.zoom-active img {
  transform: translate(var(--kk-review-pan-x), var(--kk-review-pan-y)) scale(var(--kk-review-zoom));
  transform-origin: center center;
}

.kk-score-image-zoom-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 8px;
  background: rgba(20, 22, 24, 0.86);
  font-size: 1.8rem;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.kk-score-review-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
}

.kk-score-review-meta label,
.kk-score-review-setup-meta label,
.kk-score-review-average {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.kk-score-review-meta input,
.kk-score-review-setup-meta select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 0 10px;
  font-size: 1rem;
}

.kk-score-review-setup-meta {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.kk-score-review-average {
  min-height: 46px;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(141, 200, 145, 0.12);
}

.kk-score-review-average strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.kk-score-review-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kk-score-review-tools button {
  width: auto;
  min-height: 44px;
  padding: 0 12px;
  font-size: 0.95rem;
}

.kk-score-table-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
}

.kk-score-table-head,
.kk-score-row {
  display: grid;
  grid-template-columns: 54px minmax(116px, 0.95fr) minmax(98px, 0.8fr) minmax(112px, 0.9fr) minmax(80px, 0.7fr);
  gap: 8px;
  align-items: center;
}

.kk-score-table-wrap.has-scanline .kk-score-table-head,
.kk-score-table-wrap.has-scanline .kk-score-row {
  grid-template-columns: 54px minmax(120px, 0.95fr) minmax(116px, 0.9fr) minmax(98px, 0.75fr) minmax(112px, 0.85fr) minmax(80px, 0.65fr);
}

.kk-score-table-head {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kk-score-table-rows {
  display: grid;
  gap: 6px;
  max-height: none;
  overflow: auto;
  padding-right: 3px;
}

.kk-score-row {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.kk-score-row-number {
  color: var(--text);
  font-weight: 900;
  text-align: center;
}

.kk-score-row-crop {
  display: grid;
  place-items: center;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.kk-score-row-crop img {
  display: block;
  width: 100%;
  height: 42px;
  object-fit: contain;
  background: #050606;
}

.kk-score-row input,
.kk-score-row select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 0 9px;
  font-size: 1rem;
}

.kk-score-row input.ocr-low-confidence,
.kk-score-row select.ocr-low-confidence {
  border-color: rgba(245, 181, 66, 0.82);
  background: color-mix(in srgb, var(--field) 82%, #f5b542 18%);
  box-shadow: inset 0 0 0 1px rgba(245, 181, 66, 0.18);
}

.add-series-crop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  max-height: min(58dvh, 620px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050606;
  cursor: grab;
  touch-action: none;
}

.add-series-crop-frame:active {
  cursor: grabbing;
}

.add-series-crop-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244, 246, 242, 0.32);
  pointer-events: none;
  z-index: 2;
}

.add-series-crop-frame img {
  position: absolute;
  z-index: 1;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  touch-action: none;
}

.add-series-crop-debug-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92);
}

.add-series-crop-box {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 60%;
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(5, 6, 6, 0.96),
    0 0 0 3px rgba(141, 200, 145, 0.86),
    inset 0 0 0 1px rgba(5, 6, 6, 0.54),
    0 12px 30px rgba(0, 0, 0, 0.42);
  cursor: move;
  touch-action: none;
  transform: translate(-50%, -50%);
}

.add-series-crop-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(5, 6, 6, 0.88);
  pointer-events: none;
}

.add-series-crop-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(5, 6, 6, 0.52);
  box-shadow: 0 0 0 1px rgba(5, 6, 6, 0.88);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.add-series-crop-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.add-series-crop-guide::before,
.add-series-crop-guide::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.62);
  opacity: 0.72;
  box-shadow: 0 0 0 1px rgba(5, 6, 6, 0.35);
  transform: translate(-50%, -50%);
}

.add-series-crop-guide::before {
  width: 78%;
  height: 1px;
}

.add-series-crop-guide::after {
  width: 1px;
  height: 78%;
}

.add-series-crop-handle,
.add-series-crop-rotate-handle {
  position: absolute;
  z-index: 4;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  touch-action: none;
}

.add-series-crop-handle::before,
.add-series-crop-handle::after,
.add-series-crop-rotate-handle::before,
.add-series-crop-rotate-handle::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.add-series-crop-handle::before {
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  border-color: #ffffff;
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 1px rgba(5, 6, 6, 0.95)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65));
  transform: translate(-50%, -50%);
}

.add-series-crop-handle::after {
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: rgba(141, 200, 145, 0.98);
  box-shadow: 0 0 0 1px rgba(5, 6, 6, 0.72);
  transform: translate(-50%, -50%);
}

.add-series-crop-handle:hover::before,
.add-series-crop-handle:focus-visible::before,
.add-series-crop-handle.is-active::before {
  border-color: #f7d75e;
}

.add-series-crop-handle:hover::after,
.add-series-crop-handle:focus-visible::after,
.add-series-crop-handle.is-active::after {
  background: #f7d75e;
}

.add-series-crop-box.is-moving {
  cursor: grabbing;
  box-shadow:
    0 0 0 1px rgba(5, 6, 6, 0.96),
    0 0 0 4px rgba(247, 215, 94, 0.92),
    inset 0 0 0 1px rgba(5, 6, 6, 0.54),
    0 16px 36px rgba(0, 0, 0, 0.48);
}

.add-series-crop-rotate-handle {
  left: 50%;
  top: 74px;
  transform: translate(-50%, -50%);
  cursor: grab;
  background: linear-gradient(rgba(141, 200, 145, 0.96), rgba(141, 200, 145, 0.96)) center -36px / 2px 54px no-repeat;
}

.add-series-crop-rotate-handle::before {
  position: absolute;
  inset: 5px;
  border: 3px solid #ffffff;
  border-right-color: transparent;
  border-radius: 999px;
  background: rgba(5, 6, 6, 0.56);
  box-shadow: 0 0 0 1px rgba(5, 6, 6, 0.9), 0 4px 12px rgba(0, 0, 0, 0.44);
}

.add-series-crop-rotate-handle::after {
  right: 7px;
  top: 13px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #ffffff;
  transform: rotate(-38deg);
}

.add-series-crop-rotate-handle:hover::before,
.add-series-crop-rotate-handle:focus-visible::before,
.add-series-crop-rotate-handle.is-active::before {
  border-color: #f7d75e;
  border-right-color: transparent;
}

.add-series-crop-rotate-handle:hover::after,
.add-series-crop-rotate-handle:focus-visible::after,
.add-series-crop-rotate-handle.is-active::after {
  border-left-color: #f7d75e;
}

.add-series-crop-rotate-handle.is-active {
  cursor: grabbing;
}

.handle-nw { left: 0; top: 0; transform: translate(0, 0); cursor: nwse-resize; }
.handle-n { left: 50%; top: 0; transform: translate(-50%, 0); cursor: ns-resize; }
.handle-ne { right: 0; top: 0; transform: translate(0, 0); cursor: nesw-resize; }
.handle-e { right: 0; top: 50%; transform: translate(0, -50%); cursor: ew-resize; }
.handle-se { right: 0; bottom: 0; transform: translate(0, 0); cursor: nwse-resize; }
.handle-s { left: 50%; bottom: 0; transform: translate(-50%, 0); cursor: ns-resize; }
.handle-sw { left: 0; bottom: 0; transform: translate(0, 0); cursor: nesw-resize; }
.handle-w { left: 0; top: 50%; transform: translate(0, -50%); cursor: ew-resize; }

.handle-nw::before { border-left-width: 4px; border-top-width: 4px; }
.handle-ne::before { border-right-width: 4px; border-top-width: 4px; }
.handle-se::before { border-right-width: 4px; border-bottom-width: 4px; }
.handle-sw::before { border-left-width: 4px; border-bottom-width: 4px; }

.handle-nw::after,
.handle-se::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.handle-ne::after,
.handle-sw::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.handle-n::before,
.handle-s::before,
.handle-e::before,
.handle-w::before {
  width: 30px;
  height: 12px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: rgba(5, 6, 6, 0.42);
}

.handle-e::before,
.handle-w::before {
  width: 12px;
  height: 30px;
}

.handle-n::after,
.handle-s::after {
  width: 3px;
  height: 18px;
}

.handle-e::after,
.handle-w::after {
  width: 18px;
  height: 3px;
}

.add-series-rotation-value {
  color: var(--muted);
  font-size: 0.84rem;
}

.add-series-target-select-row {
  display: grid;
  gap: 0;
}

.add-series-target-select-row select {
  width: 100%;
}

.add-series-recognition-status {
  min-height: 1.2rem;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-file-label input {
  padding: 14px;
  height: auto;
}

#profilePhotoRemoveButton {
  min-height: 48px;
  padding: 0 14px;
  font-size: 0.98rem;
}

.profile-check-row {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-check-row input {
  min-height: 24px;
  width: 24px;
  accent-color: var(--accent-2);
}

.profile-weapons-section {
  display: grid;
  gap: 12px;
}

.profile-weapons-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-weapons-section h3 {
  margin: 0;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
}

.loadout-limit-text {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-weapons-list {
  display: grid;
  gap: 10px;
}

.profile-weapon-row {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.profile-weapon-remove {
  align-self: end;
  min-height: 54px;
}

.confirm-content {
  display: grid;
  gap: 16px;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-account-meta {
  margin: 0;
}

.profile-account-meta div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-account-meta dt {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.profile-account-meta dd {
  margin: 0;
  color: var(--text);
  font-size: 1.04rem;
  font-weight: 750;
}

.friends-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.friends-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.friends-head h3 {
  margin: 0;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
}

#friendsStatus {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: right;
}

#friendsStatus[data-tone="error"] {
  color: #ffb5ad;
}

#friendsStatus[data-tone="success"] {
  color: #bde8c0;
}

.friend-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
  gap: 10px;
  align-items: end;
}

.friends-grid {
  display: grid;
  gap: 12px;
}

.friends-grid section {
  display: grid;
  gap: 8px;
}

.friends-grid h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  text-transform: uppercase;
}

.friends-list {
  display: grid;
  gap: 8px;
}

.friend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.friend-row-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.friend-row-info strong,
.friend-row-info span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-row-info span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
}

.friend-row-actions {
  display: flex;
  gap: 8px;
}

.friend-row-actions button,
#friendRequestButton {
  min-height: 46px;
  padding: 0 12px;
  font-size: 0.92rem;
}

.profile-club-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.profile-club-field:not(.has-club) > span {
  display: none;
}

.profile-club-summary {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.4;
}

.profile-club-control button {
  min-height: 54px;
  padding: 0 14px;
  white-space: nowrap;
}

.clubs-content {
  box-sizing: border-box;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow-x: hidden;
}

.clubs-dialog {
  width: min(96vw, 980px);
  max-height: 92svh;
  box-sizing: border-box;
}

.clubs-dialog.dialog-fallback[open] {
  width: min(96vw, 980px);
  max-height: 92svh;
}

.clubs-dialog.is-fullscreen,
.clubs-dialog:fullscreen,
.clubs-dialog:-webkit-full-screen {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
}

.clubs-dialog.is-fullscreen .clubs-content,
.clubs-dialog:fullscreen .clubs-content,
.clubs-dialog:-webkit-full-screen .clubs-content {
  min-height: 100dvh;
  max-height: 100dvh;
}

.club-create-dialog {
  width: min(92vw, 520px);
}

.club-create-dialog-content {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.clubs-dialog .learning-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

#clubsCloseButton,
#clubsFullscreenButton {
  display: grid;
  place-items: center;
  min-width: var(--tt-touch-min);
  width: var(--tt-touch-min);
  min-height: var(--tt-touch-min);
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

#clubsCloseButton {
  font-size: 1.35rem;
}

#clubCreateCloseButton {
  display: grid;
  place-items: center;
  min-width: 54px;
  width: 54px;
  min-height: 54px;
  padding: 0;
  font-size: 1.8rem;
  line-height: 1;
}

.clubs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.clubs-main-column,
.clubs-side-column,
.clubs-directory-panel,
.clubs-list,
.clubs-my-club-panel,
.club-create-card,
.club-detail-panel,
.club-admin-form,
.club-join-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.clubs-directory-panel[hidden],
.clubs-my-club-panel[hidden],
#clubCreatePanel[hidden],
#clubDetailPanel[hidden],
#clubMembersList[hidden],
#clubJoinRequestsList[hidden],
#clubInvitesList[hidden] {
  display: none;
}

.clubs-toolbar {
  display: grid;
  gap: 10px;
}

.club-search {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.club-search input,
.club-create-form input,
.club-admin-form input,
.club-join-form textarea,
.club-admin-form textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 10px 12px;
  font-size: 1rem;
}

.club-join-form textarea,
.club-admin-form textarea {
  min-height: 108px;
  resize: vertical;
}

.club-card,
.club-detail-panel,
.club-create-card,
.club-member-row,
.club-admin-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.club-card,
.club-detail-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  text-align: left;
}

.club-card-button {
  width: 100%;
  color: var(--text);
  cursor: pointer;
}

.club-card-button.active,
.club-card-button:hover {
  border-color: rgba(141, 200, 145, 0.62);
  background: rgba(141, 200, 145, 0.08);
}

.club-card-featured {
  border-color: rgba(141, 200, 145, 0.5);
}

.club-logo,
.club-logo-preview {
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(141, 200, 145, 0.25), rgba(255, 255, 255, 0.06));
  color: var(--text);
  font-weight: 900;
}

.club-logo-large {
  width: 76px;
}

.club-logo-preview {
  width: 76px;
}

.club-logo-preview .club-logo {
  width: 100%;
  border: 0;
}

.club-logo img,
.club-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.club-card-info,
.club-member-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.club-card-info h3,
.clubs-main-column h3,
.clubs-side-column h3,
.club-admin-form h3,
.club-admin-form h4 {
  margin: 0;
}

.club-card-info strong,
.club-card-info h3,
.club-member-info strong,
.club-card-info span,
.club-member-info span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.club-motto,
.club-meta,
.club-inline-note {
  color: var(--muted);
  font-weight: 750;
}

.club-inline-note {
  margin: 0;
}

.club-create-card,
.club-admin-form {
  padding: 12px;
}

.club-create-form,
.club-admin-form {
  display: grid;
  gap: 10px;
}

.club-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.club-admin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(141, 200, 145, 0.52);
  border-radius: 999px;
  color: #bde8c0;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.club-site-admin-badge {
  width: fit-content;
  border-color: rgba(255, 199, 102, 0.58);
  color: #ffd58a;
}

.club-site-admin-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.club-self-actions {
  justify-content: flex-start;
  margin-top: 8px;
}

.club-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.club-actions button,
.club-create-form button,
.club-admin-form button,
.club-join-form button {
  min-height: 44px;
  padding: 0 12px;
}

#clubsStatus[data-tone="error"] {
  color: #ffb5ad;
}

#clubsStatus[data-tone="success"] {
  color: #bde8c0;
}

#clubCreateDialogStatus[data-tone="error"] {
  color: #ffb5ad;
}

#clubCreateDialogStatus[data-tone="success"] {
  color: #bde8c0;
}

#profileStatus[data-tone="error"] {
  color: #ffb5ad;
}

#profileStatus[data-tone="success"] {
  color: #bde8c0;
}

#profileSaveButton {
  min-height: 58px;
}

.profile-danger-zone {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 90, 70, 0.28);
}

.danger-button {
  min-height: 58px;
  border-color: rgba(255, 90, 70, 0.62);
  background: rgba(180, 35, 24, 0.24);
  color: #ffd8d2;
}

.delete-account-dialog {
  width: min(94vw, 620px);
}

.delete-account-warning {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 90, 70, 0.42);
  border-radius: 8px;
  background: rgba(180, 35, 24, 0.16);
}

.delete-account-warning p {
  margin: 0;
  color: #ffd8d2;
  font-size: clamp(1.08rem, 4vw, 1.24rem);
}

.delete-account-warning ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.45;
}

.delete-account-form {
  display: grid;
  gap: 12px;
}

.delete-account-form input {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101214;
  color: var(--text);
  padding: 0 14px;
  font-size: 1.1rem;
}

#deleteAccountCloseButton {
  min-height: 54px;
  padding: 0;
  font-size: 1.8rem;
}

.analysis-actions {
  display: flex;
  justify-content: stretch;
  margin-top: 8px;
}

.analysis-plot-dialog {
  width: min(96vw, 96dvh, 1040px);
  height: min(96vw, 96dvh, 1040px);
  max-height: 96dvh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050606;
  color: var(--text);
  padding: 0;
  overflow: hidden;
}

.analysis-plot-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.analysis-plot-viewer {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-height: 96dvh;
  overflow: hidden;
  padding: 8px;
}

.analysis-plot-head {
  position: absolute;
  top: max(8px, var(--tt-safe-top));
  right: max(8px, var(--tt-safe-right));
  z-index: 3;
  display: block;
}

.analysis-plot-head h2 {
  display: none;
}

.analysis-plot-download {
  display: none;
  place-items: center;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid rgba(141, 200, 145, 0.58);
  border-radius: 8px;
  color: var(--text);
  background: rgba(141, 200, 145, 0.16);
  text-decoration: none;
  font-weight: 800;
}

#analysisPlotCloseButton {
  display: grid;
  place-items: center;
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: rgba(5, 6, 6, 0.86);
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1;
}

.analysis-plot-canvas {
  display: block;
  width: min(calc(96vw - 16px), calc(96dvh - 16px), 1024px);
  aspect-ratio: 1;
  height: auto;
  max-height: calc(96dvh - 16px);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101214;
}

.analysis-download {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(141, 200, 145, 0.52);
  border-radius: 8px;
  background: rgba(141, 200, 145, 0.15);
  color: var(--text);
  font-size: clamp(1rem, 3.4vw, 1.18rem);
  font-weight: 800;
  text-decoration: none;
}

.analysis-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.analysis-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(141, 200, 145, 0.12);
}

.analysis-metric span,
.analysis-metric small {
  min-width: 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 2.5vw, 0.96rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.analysis-metric strong {
  color: var(--text);
  font-size: clamp(1.55rem, 5vw, 2.4rem);
  line-height: 1;
}

.analysis-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.analysis-group {
  display: grid;
  gap: 5px;
  min-height: 74px;
  padding: 10px 12px;
  text-align: left;
}

.analysis-group.active {
  border-color: rgba(141, 200, 145, 0.74);
  background: rgba(141, 200, 145, 0.16);
}

.analysis-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.analysis-range {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.analysis-range-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.analysis-range-head strong {
  font-size: clamp(1rem, 3vw, 1.18rem);
}

.analysis-range-head span {
  min-width: 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 2.7vw, 1.04rem);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: right;
}

.analysis-range-track {
  position: relative;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 20, 22, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.analysis-range-track::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-50%);
}

.analysis-range-fill {
  position: absolute;
  top: 50%;
  z-index: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  pointer-events: none;
  transform: translateY(-50%);
}

.analysis-range-track input {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  z-index: 2;
  width: calc(100% - 36px);
  height: 58px;
  min-height: 58px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}

.analysis-range-track input::-webkit-slider-runnable-track {
  height: 58px;
  background: transparent;
}

.analysis-range-track input::-webkit-slider-thumb {
  width: 34px;
  height: 34px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}

.analysis-range-track input::-moz-range-track {
  height: 58px;
  background: transparent;
}

.analysis-range-track input::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
  pointer-events: auto;
}

.analysis-group {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent-2);
  border-radius: 8px;
  background: var(--surface-soft);
}

.analysis-group strong {
  font-size: 1rem;
}

.analysis-group span {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
}

.analysis-chart {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.analysis-chart-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.analysis-chart h3 {
  min-width: 0;
  margin: 0;
  font-size: clamp(1rem, 3vw, 1.24rem);
}

.analysis-visual .analysis-chart-head,
.analysis-timeline .analysis-chart-head {
  grid-template-columns: minmax(0, 1fr);
}

.analysis-chart-controls {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 6px;
}

.analysis-chart-controls button {
  min-height: 46px;
  padding: 0;
  font-size: 1.2rem;
}

.analysis-canvas {
  position: static;
  display: block;
  inset: auto;
  width: 100%;
  height: clamp(260px, 42vh, 430px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101214;
  touch-action: none;
}

.analysis-visual .analysis-canvas {
  aspect-ratio: 1;
  height: auto;
  min-height: 300px;
}

.analysis-visual-expandable .analysis-canvas {
  cursor: zoom-in;
}

.analysis-visual-expandable .analysis-canvas:focus-visible {
  outline: 3px solid rgba(141, 200, 145, 0.72);
  outline-offset: 3px;
}

.analysis-timeline .analysis-canvas {
  height: clamp(220px, 32vh, 320px);
}

.analysis-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.analysis-mode-toggle button {
  min-height: 50px;
  padding: 0 12px;
  font-size: clamp(0.95rem, 3vw, 1.08rem);
}

.analysis-mode-toggle button.active {
  background: var(--accent-2);
  color: #101214;
}

.analysis-chart-slider {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: clamp(0.95rem, 3vw, 1.08rem);
  font-weight: 800;
}

.analysis-chart-slider span {
  overflow-wrap: anywhere;
}

.analysis-chart-slider input {
  width: 100%;
  height: 36px;
  accent-color: var(--accent-2);
}

.shot-preview {
  position: relative;
  grid-row: span 2;
  width: min(28vw, 280px);
  min-width: 180px;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f3eee4;
}

.shot-preview canvas {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
}

.shot-preview-marker {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border: 3px solid rgba(95, 197, 255, 0.92);
  border-radius: 50%;
  background: rgba(95, 197, 255, 0.16);
  box-shadow: 0 0 0 0 rgba(95, 197, 255, 0.42);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: shot-preview-pulse 1.45s ease-out infinite;
}

@keyframes shot-preview-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(95, 197, 255, 0.45);
    opacity: 0.95;
  }
  72% {
    box-shadow: 0 0 0 16px rgba(95, 197, 255, 0);
    opacity: 0.58;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(95, 197, 255, 0);
    opacity: 0.95;
  }
}

.learning-row > span {
  min-width: 0;
  align-self: end;
  color: var(--text);
  font-size: clamp(1.05rem, 2.8vw, 1.28rem);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.learning-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.learning-actions button {
  min-height: 58px;
  padding: 0 12px;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
}

.learning-actions button.active {
  background: var(--accent-2);
  color: #101214;
}

:root[data-theme="gunmetal"] .about-dialog,
:root[data-theme="gunmetal"] .learning-dialog,
:root[data-theme="gunmetal"] .loading-card,
:root[data-theme="gunmetal"] .series-photo-download,
:root[data-theme="gunmetal"] .feature-locked-card,
:root[data-theme="gunmetal"] .shop-points-card,
:root[data-theme="gunmetal"] .shop-product-card,
:root[data-theme="gunmetal"] .settings-section,
:root[data-theme="gunmetal"] .profile-tab-panel,
:root[data-theme="gunmetal"] .profile-photo-row,
:root[data-theme="gunmetal"] .profile-cropper,
:root[data-theme="gunmetal"] .profile-account-meta div,
:root[data-theme="gunmetal"] .club-card,
:root[data-theme="gunmetal"] .club-detail-panel,
:root[data-theme="gunmetal"] .club-create-card,
:root[data-theme="gunmetal"] .club-member-row,
:root[data-theme="gunmetal"] .club-admin-form,
:root[data-theme="gunmetal"] .analysis-group,
:root[data-theme="gunmetal"] .analysis-chart {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 8px),
    var(--surface-soft);
  border-color: rgba(207, 220, 226, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="gunmetal"] .learning-head h2,
:root[data-theme="gunmetal"] .settings-section h3,
:root[data-theme="gunmetal"] .profile-tab-panel > h3,
:root[data-theme="gunmetal"] .friends-head h3,
:root[data-theme="gunmetal"] .club-card-info h3,
:root[data-theme="gunmetal"] .club-card-info strong,
:root[data-theme="gunmetal"] .profile-account-meta dd,
:root[data-theme="gunmetal"] #helpBody h3,
:root[data-theme="gunmetal"] #helpBody h4,
:root[data-theme="gunmetal"] .shop-coming-soon strong,
:root[data-theme="gunmetal"] .analysis-chart h3,
:root[data-theme="gunmetal"] .learning-row > span {
  text-shadow: var(--engraved-text-shadow);
}

:root[data-theme="gunmetal"] .help-tabs button.active,
:root[data-theme="gunmetal"] .rankings-scope button.active,
:root[data-theme="gunmetal"] .rankings-toggle-filters button.active,
:root[data-theme="gunmetal"] .analysis-mode-toggle button.active,
:root[data-theme="gunmetal"] .learning-actions button.active {
  border-color: rgba(222, 235, 239, 0.34);
  background:
    linear-gradient(180deg, rgba(216, 229, 234, 0.26), rgba(54, 70, 78, 0.42)),
    var(--panel-2);
  color: var(--text);
}

:root[data-theme="gunmetal"] .profile-form input,
:root[data-theme="gunmetal"] .profile-form select,
:root[data-theme="gunmetal"] .admin-search input,
:root[data-theme="gunmetal"] .rankings-filters select,
:root[data-theme="gunmetal"] .messages-toolbar select,
:root[data-theme="gunmetal"] .message-form textarea,
:root[data-theme="gunmetal"] .message-reply-form textarea,
:root[data-theme="gunmetal"] .ranking-report-form textarea,
:root[data-theme="gunmetal"] .club-search input,
:root[data-theme="gunmetal"] .club-create-form input,
:root[data-theme="gunmetal"] .club-admin-form input,
:root[data-theme="gunmetal"] .club-join-form textarea,
:root[data-theme="gunmetal"] .club-admin-form textarea {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.08)),
    var(--field);
  border-color: rgba(205, 218, 224, 0.22);
}

@media (max-width: 900px), (max-height: 560px) and (pointer: coarse) {
  .kk-score-review-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    overflow: auto;
  }

  .kk-score-review-workspace {
    grid-template-rows: minmax(180px, 34dvh) minmax(230px, auto);
  }

  .kk-score-review-form.image-zoom-active .kk-score-review-workspace {
    grid-template-rows: minmax(220px, 46dvh) minmax(230px, auto);
  }

  .kk-score-review-settings-toggle {
    display: grid;
    place-items: center;
  }

  .kk-score-review-side {
    overflow: visible;
    padding-right: 0;
  }

  .kk-score-review-side .kk-score-review-meta,
  .kk-score-review-side .kk-score-review-setup-meta {
    display: none;
  }

  .kk-score-review-form.settings-open .kk-score-review-side .kk-score-review-meta,
  .kk-score-review-form.settings-open .kk-score-review-side .kk-score-review-setup-meta {
    display: grid;
  }
}

@media (orientation: portrait) and (max-width: 820px) {
  .clubs-layout {
    grid-template-columns: 1fr;
  }

  .clubs-side-column {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .learning-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .learning-content {
    max-height: 100dvh;
    padding: max(14px, var(--tt-safe-top)) max(14px, var(--tt-safe-right)) max(16px, var(--tt-safe-bottom)) max(14px, var(--tt-safe-left));
  }

  .learning-head-actions {
    align-self: start;
  }

  .learning-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .shot-preview {
    grid-row: auto;
    width: min(100%, 430px);
    min-width: 0;
    justify-self: center;
  }

  .analysis-metrics,
  .analysis-visual-grid {
    grid-template-columns: 1fr;
  }

  .rankings-filters,
  .messages-toolbar,
  .messages-layout,
  .ranking-row,
  .shop-product-card,
  .clubs-layout,
  .club-card,
  .club-detail-panel,
  .club-member-row,
  .profile-club-control,
  .saved-series-filters,
  .series-edit-meta {
    grid-template-columns: 1fr;
  }

  .messages-layout {
    overflow: auto;
  }

  .messages-browser {
    grid-template-rows: auto auto;
  }

  .message-row-main,
  .message-row-meta {
    align-items: start;
    flex-direction: column;
  }

  .ranking-row {
    align-items: start;
  }

  .ranking-stats {
    justify-items: start;
  }

  .analysis-range-head {
    grid-template-columns: 1fr;
  }

  .analysis-range-head span {
    text-align: left;
  }

  .analysis-visual .analysis-canvas {
    min-height: 260px;
  }

  .kk-score-review-content {
    padding: max(10px, var(--tt-safe-top)) max(10px, var(--tt-safe-right)) max(10px, var(--tt-safe-bottom)) max(10px, var(--tt-safe-left));
  }

  .kk-score-review-layout,
  .kk-score-review-workspace {
    grid-template-columns: 1fr;
  }

  .kk-score-review-layout {
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: auto;
  }

  .kk-score-review-workspace {
    grid-template-rows: minmax(220px, 42dvh) minmax(260px, auto);
  }

  .kk-score-review-preview,
  .kk-score-review-meta,
  .kk-score-review-setup-meta,
  .kk-score-table-head,
  .kk-score-row {
    grid-template-columns: 1fr;
  }

  .kk-score-review-preview.zoom-active {
    min-height: 0;
  }

  .kk-score-table-head {
    display: none;
  }

  .kk-score-row {
    gap: 6px;
  }

  .kk-score-row-number {
    text-align: left;
  }

  .saved-series-score-table-grid {
    grid-template-columns: 38px minmax(48px, 0.65fr) minmax(54px, 0.75fr) minmax(64px, 0.85fr) minmax(48px, 0.65fr);
  }

  .saved-series-score-table-grid > * {
    padding: 7px 6px;
    font-size: 0.86rem;
  }

  .analysis-plot-dialog {
    width: min(100vw, 100dvh);
    height: min(100vw, 100dvh);
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .analysis-plot-viewer {
    max-height: 100dvh;
  }

  .analysis-plot-download {
    display: none;
  }

  .analysis-plot-canvas {
    width: min(calc(100vw - 16px), calc(100dvh - 16px));
    max-height: calc(100dvh - 16px);
  }

  .learning-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-actions button {
    min-height: 64px;
  }

  .learning-actions button:nth-child(3) {
    grid-column: 1 / -1;
  }

  .saved-series-head {
    grid-template-columns: 1fr;
  }

  .saved-series-delete {
    width: 100%;
  }

  .saved-series-actions {
    width: 100%;
  }

  .install-help-grid {
    grid-template-columns: 1fr;
  }

  .profile-grid,
  .profile-weapon-row,
    .profile-account-meta,
    .friend-request-row,
    .friend-row,
    .club-member-row,
    .admin-user-row,
    .admin-report-row {
    grid-template-columns: 1fr;
  }

  .friends-head {
    align-items: start;
    flex-direction: column;
  }

  #friendsStatus {
    text-align: left;
  }

  .profile-photo-row {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .profile-photo-bling-wrap,
  .profile-photo-preview {
    width: 84px;
  }

  .shop-product-card,
  .shop-product-card.has-media,
  .shop-coming-soon {
    grid-template-columns: 1fr;
  }

  .shop-product-image {
    justify-self: start;
  }

  .profile-club-control button,
  .club-actions {
    width: 100%;
  }

  .club-actions {
    justify-content: stretch;
  }

  .club-actions button {
    flex: 1 1 150px;
  }
}