html {
  background-color: var(--scat-bg);
  color: var(--scat-text);
}

body {
  margin: 0;
  color: var(--scat-text);
  font-family: var(--scat-font-sans);
}

* {
  box-sizing: border-box;
}

a {
  color: var(--scat-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select {
  font-family: inherit;
}

button {
  cursor: pointer;
}

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 0.75rem 1.25rem;
  background: var(--scat-sunken);
  border-right: 1px solid var(--scat-border);
}

.brand {
  padding: 0 0.45rem;
}

.logo {
  margin: 0;
  font-size: var(--scat-text-lg);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.tagline {
  margin: 0.15rem 0 0;
  color: var(--scat-muted);
  font-size: var(--scat-text-sm);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--scat-radius-md);
  color: var(--scat-text);
  padding: 0.45rem 0.55rem;
  font-size: var(--scat-text-md);
  font-weight: 700;
  text-decoration: none;
}

.nav-item:hover:not(.active) {
  background: var(--scat-hover);
  text-decoration: none;
}

.nav-item.active {
  background: var(--scat-selected);
  color: var(--scat-text-secondary);
}

.nav-form {
  margin: 0;
}

.sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--scat-radius-md);
  background: var(--scat-hover);
}

.sidebar-user .meta {
  min-width: 0;
}

.sidebar-user .name {
  margin: 0;
  font-size: var(--scat-text-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user .login {
  margin: 0;
  color: var(--scat-muted);
  font-size: var(--scat-text-xs);
}

.main {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.4rem 1.6rem;
  overflow: auto;
  max-height: 100vh;
}

.page-title {
  margin: 0 0 0.35rem;
  font-size: var(--scat-text-2xl);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--scat-danger-soft);
  border: 1px solid var(--scat-danger-line);
  border-radius: var(--scat-radius-md);
  color: var(--scat-text);
}

.card {
  background: var(--scat-overlay);
  border: 1px solid var(--scat-border);
  border-radius: var(--scat-radius-lg);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: var(--scat-shadow-popover);
  min-width: 0;
}

.card h2 {
  margin: 0 0 0.7rem;
}

.hint {
  margin: 0 0 0.75rem;
  color: var(--scat-muted);
  font-size: var(--scat-text-md);
}

.error {
  margin: 0 0 0.75rem;
  color: var(--scat-danger);
  font-size: var(--scat-text-md);
}

.ok {
  margin: 0 0 0.75rem;
  color: var(--scat-success);
  font-size: var(--scat-text-md);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--scat-text-sm);
  color: var(--scat-muted);
}

/* A titled group inside a long form: heading, status, fields, then its own actions. */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--scat-border-subtle);
}

:root .shell .form-section > * {
  margin: 0;
}

.form-section > .form-actions {
  margin-top: 0.25rem;
}

.form label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--scat-text);
  font-size: var(--scat-text-md);
}

.form label.check input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--scat-accent);
}

.admin-user-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-user-heading h2 { margin: 0; overflow-wrap: anywhere; }
.admin-user-heading .btn { flex-shrink: 0; }
.admin-user-management .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: end;
  gap: 12px;
}
.admin-user-management .form-row label,
.admin-user-management input { min-width: 0; }
.admin-user-close { margin-top: 16px; }

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: end;
}

.form-row label {
  flex: 1;
  min-width: 10rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

input,
select {
  background: var(--scat-sunken);
  border: 1px solid var(--scat-border);
  border-radius: var(--scat-radius-sm);
  color: var(--scat-text);
  padding: 0.45rem 0.6rem;
  font-size: var(--scat-text-md);
  outline: none;
  width: 100%;
}

input:focus,
select:focus {
  border-color: var(--scat-accent);
}

.btn {
  background: var(--scat-hover);
  border: 1px solid var(--scat-border);
  color: var(--scat-text);
  border-radius: var(--scat-radius-sm);
  padding: 0.4rem 0.75rem;
  font-size: var(--scat-text-md);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn:hover:not(:disabled) {
  background: var(--scat-hover);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--scat-accent);
  border-color: var(--scat-accent);
  color: var(--scat-on-accent);
}

.btn.ghost {
  background: transparent;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--scat-radius-full);
  /* .badge.error also matches the page-level .error rule; drop its paragraph margin. */
  margin: 0;
  padding: 0.12rem 0.5rem;
  font-size: var(--scat-text-xs);
  width: fit-content;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Same status chips as the desktop app (frontend/src/style.css). */
.badge.running {
  background: var(--scat-success-soft);
  color: var(--scat-success);
}

.badge.stopped {
  background: var(--scat-hover);
  color: var(--scat-muted);
}

.badge.error {
  background: var(--scat-danger-soft);
  color: var(--scat-danger);
}

.avatar,
.avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--scat-selected);
}

.avatar.lg,
.avatar-fallback.lg {
  width: 56px;
  height: 56px;
}

.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--scat-text-secondary);
}

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 0.9rem;
  background: var(--scat-sunken);
  border: 1px solid var(--scat-border);
  border-radius: var(--scat-radius-lg);
  color: inherit;
  text-decoration: none;
}

a.user-card:hover {
  border-color: var(--scat-accent);
  text-decoration: none;
}

.user-card.disabled {
  opacity: 0.72;
}

.user-card .body {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

/* Keep "Управлять" on one line across cards with different badge counts. */
.user-card .body > .btn:last-child {
  margin-top: auto;
}

.user-card strong {
  font-size: var(--scat-text-base);
}

.user-card .sub {
  color: var(--scat-muted);
  font-size: var(--scat-text-sm);
}

.identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.identity h2 {
  margin: 0 0 0.2rem;
}

.user-card.current,
a.user-card.current {
  border-color: var(--scat-accent);
  box-shadow: 0 0 0 1px var(--scat-selected);
}

.channel-nav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0.85rem 0 0.35rem;
}

.streamer-carousel {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.35rem 0 0.55rem;
  margin: 0.2rem 0 0.4rem;
}

.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 7.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem;
  background: var(--scat-sunken);
  border: 1px solid var(--scat-border);
  border-radius: var(--scat-radius-lg);
  color: inherit;
  text-decoration: none;
  text-align: center;
}

a.carousel-card:hover {
  border-color: var(--scat-accent);
  text-decoration: none;
}

.carousel-card.current {
  border-color: var(--scat-accent);
  background: var(--scat-selected);
}

.carousel-card.disabled {
  opacity: 0.72;
}

.carousel-name {
  font-size: var(--scat-text-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.collection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.collection-head h2 {
  margin: 0 0 0.35rem;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  padding: 0;
  margin: 0.4rem 0 0;
  list-style: none;
}

.item-grid li,
.item-card {
  background: var(--scat-sunken);
  padding: 0.85rem;
  border-radius: var(--scat-radius-lg);
  border: 1px solid var(--scat-border);
  min-width: 0;
}

.item-thumb {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0;
  border: 0;
  border-radius: var(--scat-radius-md);
  overflow: hidden;
  background: var(--scat-sunken);
  cursor: pointer;
}

.item-thumb img,
.item-ph {
  width: 100%;
  height: 7rem;
  object-fit: contain;
  display: block;
}

.item-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--scat-muted);
  font-size: var(--scat-text-sm);
}

/* Unopened items never contain their media, even beneath the badge. */
.item-ph.unopened { background: #000; }
.item-thumb .badge-dup {
  position: absolute;
  bottom: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--scat-danger);
  font-weight: 700;
  white-space: nowrap;
}
.item-rarity { color: var(--scat-muted); font-size: var(--scat-text-md); margin: 0.3rem 0; }
.collection-summary { cursor: pointer; }
.collection-summary h2 { display: inline; margin: 0; font-size: var(--scat-text-lg); }
.collection-count { color: var(--scat-muted); font-size: 0.9em; }
.collection-card:not([open]) > :not(summary) { display: none; }
.collection-card[open] .collection-summary { margin-bottom: 1rem; }

.item-grid form {
  margin-top: 0.4rem;
}

.item-grid .qty {
  color: var(--scat-muted);
  font-size: var(--scat-text-sm);
}

.item-lightbox {
  width: min(46rem, calc(100vw - 2rem));
  max-width: 100%;
  border: 1px solid var(--scat-border);
  border-radius: var(--scat-radius-xl);
  padding: 0;
  background: var(--scat-overlay);
  box-shadow: var(--scat-shadow-overlay);
  color: var(--scat-text);
}

.item-lightbox::backdrop {
  background: var(--scat-backdrop);
}

.lightbox-frame {
  position: relative;
  padding: 1.1rem 1.2rem 1.25rem;
}

.lightbox-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--scat-radius-full);
  background: var(--scat-hover);
  color: inherit;
  font-size: var(--scat-text-xl);
  line-height: 1;
}

.lightbox-nav {
  position: absolute;
  top: 42%;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: var(--scat-radius-full);
  background: var(--scat-sunken);
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
}

.lightbox-nav.prev {
  left: 0.5rem;
}

.lightbox-nav.next {
  right: 0.5rem;
}

.lightbox-media {
  position: relative;
  margin: 0.4rem auto 0.85rem;
  max-width: 28rem;
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--scat-radius-lg);
  overflow: hidden;
}

.lightbox-media img {
  width: 100%;
  max-height: min(62vh, 28rem);
  object-fit: contain;
  display: block;
}

.lightbox-media.locked { background: #000; }
.lightbox-media.locked .item-ph { color: var(--scat-danger); font-weight: 700; }

.lightbox-meta h3 {
  margin: 0 0 0.25rem;
}

.lightbox-meta .qty {
  margin: 0 0 0.75rem;
}

.lightbox-meta .error {
  margin: 0 0 0.65rem;
}

.search-form {
  margin: 0 0 0.9rem;
}

@media (max-width: 720px) {
  .shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--scat-border);
  }

  .main {
    max-height: none;
  }
}

.audit-json{white-space:pre-wrap;overflow-wrap:anywhere;}

/* Download page */
:root .shell .dl { gap: 24px; }
:root .shell .card.dl-hero { display: flex; align-items: center; gap: 32px; padding: 32px; background: linear-gradient(135deg, var(--scat-special-soft), var(--scat-info-soft) 55%, var(--scat-panel)); border-color: var(--scat-info-line); }
.dl-logo { width: 160px; height: 160px; flex-shrink: 0; }
.dl-hero-text { min-width: 0; }
.dl-eyebrow { margin: 0 0 8px; color: var(--scat-special); font-size: var(--scat-text-sm); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
:root .shell .dl-title { margin: 0 0 12px; font-size: 2rem; }
.dl-lead { margin: 0 0 20px; max-width: 62ch; color: var(--scat-text-secondary); font-size: var(--scat-text-base); }
:root .shell .dl-main { min-height: var(--scat-touch-target); padding: 10px 20px; font-size: var(--scat-text-base); }
.dl-meta { margin: 12px 0 0; color: var(--scat-muted); font-size: var(--scat-text-sm); }
:root .shell .dl-section h2 { margin: 0 0 14px; }
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl-nowrap { white-space: nowrap; }
@media (max-width: 1100px) { .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root .shell .dl-feature { display: flex; flex-direction: column; }
:root .shell .dl-feature h3 { margin: 16px 0 6px; }
:root .shell .dl-feature .hint { margin: 0; }
.dl-mock { height: 168px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px; overflow: hidden; background: var(--scat-sunken); border: 1px solid var(--scat-border-subtle); border-radius: var(--scat-radius-md); }
.dl-mock p { margin: 0; }
.dl-mock-chat { justify-content: flex-end; }
.dl-bubble { width: fit-content; max-width: 100%; padding: 4px 10px; background: var(--scat-raised); border-left: 3px solid var(--scat-accent); border-radius: var(--scat-radius-md); font-size: var(--scat-text-sm); line-height: var(--scat-leading-tight); }
.dl-bubble b { display: block; font-size: var(--scat-text-xs); }
.dl-bubble.streamer { border-color: var(--scat-danger); }
.dl-bubble.streamer b { color: var(--scat-danger); }
.dl-bubble.mod { border-color: var(--scat-success); }
.dl-bubble.mod b { color: var(--scat-success); }
.dl-bubble.viewer b { color: var(--scat-accent); }
.dl-bubble.event { border-color: var(--scat-warning); background: var(--scat-warning-soft); }
.dl-bubble.event strong { color: var(--scat-warning); }
.dl-mock-alert, .dl-mock-goal, .dl-mock-update { align-items: center; text-align: center; }
.dl-alert-title { font-size: var(--scat-text-xl); font-weight: 800; }
.dl-alert-title span { color: var(--scat-accent); }
.dl-alert-text { color: var(--scat-text-secondary); font-size: var(--scat-text-sm); }
.dl-goal-title { font-weight: 650; }
.dl-goal-bar { width: 85%; height: 14px; margin: 6px 0; background: var(--scat-raised); border-radius: var(--scat-radius-full); overflow: hidden; }
.dl-goal-bar span { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, var(--scat-special), var(--scat-accent)); border-radius: inherit; }
.dl-goal-sum { color: var(--scat-muted); font-size: var(--scat-text-sm); }
.dl-mock-services { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; }
.dl-chip { padding: 6px 12px; background: var(--scat-raised); border: 1px solid var(--scat-border); border-radius: var(--scat-radius-full); font-size: var(--scat-text-sm); font-weight: 600; }
.dl-mock-gacha { flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.dl-card { display: grid; place-items: center; width: 64px; height: 92px; background: var(--scat-raised); border: 2px solid var(--scat-border-strong); border-radius: var(--scat-radius-md); color: var(--scat-muted); font-size: var(--scat-text-xs); }
.dl-card.rare { border-color: var(--scat-accent); color: var(--scat-accent); background: var(--scat-info-soft); transform: translateY(-8px); }
.dl-card.epic { border-color: var(--scat-special); color: var(--scat-special); background: var(--scat-special-soft); }
.dl-update { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--scat-info-soft); border: 1px solid var(--scat-info-line); border-radius: var(--scat-radius-md); font-size: var(--scat-text-sm); }
.dl-mock-tts { align-items: flex-start; }
.dl-wave { display: flex; align-items: center; gap: 4px; height: 36px; }
.dl-wave span { width: 5px; border-radius: var(--scat-radius-full); background: var(--scat-accent); }
.dl-wave span:nth-child(1), .dl-wave span:nth-child(9) { height: 10px; }
.dl-wave span:nth-child(2), .dl-wave span:nth-child(8) { height: 20px; }
.dl-wave span:nth-child(3), .dl-wave span:nth-child(7) { height: 30px; background: var(--scat-special); }
.dl-wave span:nth-child(4), .dl-wave span:nth-child(6) { height: 16px; }
.dl-wave span:nth-child(5) { height: 36px; background: var(--scat-special); }
.dl-tts-voice { color: var(--scat-muted); font-size: var(--scat-text-xs); }
.dl-mock-counter { align-items: center; gap: 12px; }
.dl-counter { display: flex; align-items: baseline; gap: 12px; padding: 8px 20px; background: var(--scat-raised); border: 1px solid var(--scat-border-strong); border-radius: var(--scat-radius-lg); }
.dl-counter span { color: var(--scat-text-secondary); font-weight: 650; }
.dl-counter strong { color: var(--scat-warning); font-size: 2rem; line-height: 1; }
.dl-mock-tour { align-items: center; gap: 10px; }
.badge.beta { background: var(--scat-info-soft); color: var(--scat-info); vertical-align: middle; }
.dl-mock-size { align-items: center; gap: 8px; }
.dl-size { display: flex; align-items: center; gap: 8px; color: var(--scat-muted); }
.dl-size span { padding: 4px 12px; background: var(--scat-raised); border: 1px solid var(--scat-border-strong); border-radius: var(--scat-radius-sm); color: var(--scat-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.dl-size-note { color: var(--scat-muted); font-size: var(--scat-text-xs); }
.dl-font { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px; background: var(--scat-raised); border: 1px solid var(--scat-border); border-radius: var(--scat-radius-md); font-size: var(--scat-text-sm); }
.dl-font b { font-family: Georgia, serif; font-size: var(--scat-text-xl); color: var(--scat-accent); }
.dl-mock-podium { align-items: center; gap: 8px; }
.dl-podium-title { color: var(--scat-muted); font-size: var(--scat-text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dl-podium { display: flex; align-items: flex-end; gap: 6px; }
.dl-podium p { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 84px; padding: 6px 4px; background: var(--scat-raised); border: 1px solid var(--scat-border-strong); border-radius: var(--scat-radius-md) var(--scat-radius-md) 0 0; font-size: var(--scat-text-xs); text-align: center; }
.dl-podium b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-podium span { color: var(--scat-warning); font-weight: 650; }
.dl-podium .first { height: 92px; border-color: var(--scat-warning); background: var(--scat-warning-soft); }
.dl-podium .second { height: 72px; }
.dl-podium .third { height: 58px; }
.dl-mock-timer { align-items: center; gap: 10px; }
.dl-timer { display: flex; flex-direction: column; align-items: center; padding: 8px 18px; background: var(--scat-raised); border: 1px solid var(--scat-border-strong); border-radius: var(--scat-radius-lg); }
.dl-timer span { color: var(--scat-danger); font-size: var(--scat-text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dl-timer strong { font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dl-rule { padding: 4px 10px; background: var(--scat-success-soft); border-radius: var(--scat-radius-full); color: var(--scat-success); font-size: var(--scat-text-xs); font-weight: 650; }
.dl-mock-credits { align-items: center; gap: 2px; text-align: center; background: linear-gradient(180deg, var(--scat-sunken), var(--scat-bg, var(--scat-sunken))); }
.dl-credits-title { margin-bottom: 4px !important; color: var(--scat-warning); font-weight: 800; }
.dl-credits-head { color: var(--scat-warning); font-size: var(--scat-text-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.dl-credits-names { color: var(--scat-text-secondary); font-size: var(--scat-text-sm); }
.dl-mock-ach { align-items: center; }
.dl-ach { display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 14px; background: var(--scat-raised); border: 1px solid var(--scat-warning); border-radius: var(--scat-radius-md); }
.dl-ach-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 2px solid var(--scat-warning); border-radius: var(--scat-radius-md); font-size: 1.4rem; }
.dl-ach p { display: flex; flex-direction: column; min-width: 0; }
.dl-ach small { color: var(--scat-muted); font-size: var(--scat-text-xs); }
.dl-ach b { font-size: var(--scat-text-lg, 1.1rem); }
.dl-ach span { color: var(--scat-warning); font-size: var(--scat-text-xs); }
.dl-muse { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--scat-text-xs); }
.dl-muse span { color: var(--scat-warning); font-weight: 650; }
.dl-muse b, .dl-muse i { padding: 3px 10px; border-radius: var(--scat-radius-sm); font-style: normal; font-weight: 600; }
.dl-muse b { background: var(--scat-accent); color: var(--scat-on-accent); }
.dl-muse i { border: 1px solid var(--scat-danger); color: var(--scat-danger); }
.dl-tour-target { padding: 6px 14px; border: 2px solid var(--scat-accent); border-radius: var(--scat-radius-md); box-shadow: 0 0 0 4px var(--scat-info-soft); font-weight: 600; font-size: var(--scat-text-sm); }
.dl-tour-tip { max-width: 240px; padding: 8px 12px; background: var(--scat-raised); border: 1px solid var(--scat-border); border-radius: var(--scat-radius-md); font-size: var(--scat-text-sm); text-align: center; }
.dl-tour-tip b { display: block; color: var(--scat-accent); font-size: var(--scat-text-xs); }
.dl-mock-obs { align-items: center; gap: 10px; }
.dl-mock-obs .dl-tour-tip { max-width: 280px; }
.dl-mock-steps { gap: 8px; }
.dl-step { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--scat-raised); border: 1px solid var(--scat-border-subtle); border-radius: var(--scat-radius-md); color: var(--scat-muted); font-size: var(--scat-text-sm); }
.dl-step span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--scat-border-strong); border-radius: var(--scat-radius-full); font-size: var(--scat-text-xs); font-weight: 700; }
.dl-step.done span { border-color: var(--scat-success); color: var(--scat-success); }
.dl-step.current { border-color: var(--scat-accent); color: var(--scat-text); font-weight: 600; }
.dl-step.current span { border-color: var(--scat-accent); background: var(--scat-accent); color: var(--scat-on-accent); }
.dl-dot { width: 8px; height: 8px; border-radius: var(--scat-radius-full); background: var(--scat-success); }
.dl-steps { margin: 0; padding-left: 1.4em; list-style: decimal; display: flex; flex-direction: column; gap: 10px; }
.dl-steps li::marker { color: var(--scat-accent); font-weight: 700; }
.dl-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.dl-list { margin: 0; padding-left: 1.2em; list-style: disc; display: flex; flex-direction: column; gap: 6px; color: var(--scat-text-secondary); }
:root .shell .dl-checksum { margin: 16px 0 0; }
:root .shell .dl-checksum > summary { color: var(--scat-muted); font-size: var(--scat-text-sm); }
.dl-checksum-body { padding: 0 14px 14px; }
.dl-hash { display: block; padding: 8px 10px; background: var(--scat-sunken); border-radius: var(--scat-radius-sm); }
@media (max-width: 767px) {
  :root .shell .card.dl-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .dl-logo { width: 96px; height: 96px; }
  :root .shell .dl-title { font-size: var(--scat-text-2xl); }
  .dl-grid { grid-template-columns: 1fr; }
  .dl-columns { grid-template-columns: 1fr; }
}

/* Guide (/guide): screenshot steps reuse the download page's hero type and chips. */
/* The contents sit in the sidebar under «Учебник»; the sidebar stays on screen and scrolls by itself. */
.guide-hero { display: flex; flex-direction: column; }
.sidebar:has(.guide-toc) { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.guide-toc-list, .guide-toc-steps { margin: 0; padding: 0; list-style: none; }
.sidebar .guide-toc { margin: 2px 0 6px; padding-left: 8px; border-left: 1px solid var(--scat-border); }
:root .shell details.guide-toc-group { margin: 0; border: 0; border-radius: 0; }
:root .shell details.guide-toc-group > summary { gap: 0; min-height: 0; padding: 0; }
:root .shell details.guide-toc-group > summary::before { width: 16px; font-size: var(--scat-text-base); text-align: center; color: var(--scat-muted); }
:root .shell details.guide-toc-group[open] > summary { margin: 0; border-bottom: 0; }
.guide-toc-group > summary .guide-toc-link { flex: 1; }
.guide-toc-link { display: block; min-width: 0; padding: 5px 8px; border-radius: var(--scat-radius-sm); color: var(--scat-text-secondary); font-size: var(--scat-text-sm); font-weight: 600; line-height: var(--scat-leading-tight); text-decoration: none; }
.guide-toc-link:hover { background: var(--scat-hover); color: var(--scat-text); text-decoration: none; }
.guide-toc-link.is-current { background: var(--scat-selected); color: var(--scat-text); }
.guide-toc-steps { margin: 2px 0 4px 8px; padding-left: 6px; border-left: 1px solid var(--scat-border-subtle); }
.guide-toc-steps .guide-toc-link { font-weight: 400; color: var(--scat-muted); }
.guide-toc-steps .guide-toc-link.is-current { color: var(--scat-text); }
.guide-toc-single { margin-left: 16px; }
.guide-mobile-toc { display: none; }
.guide-alias { display: block; scroll-margin-top: 16px; }
.guide-chapter { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
:root .shell .card.guide-step { scroll-margin-top: 16px; }
:root .shell .guide-chapter > h2 { margin: 16px 0 0; }
:root .shell .guide-chapter > .hint { margin: 0; max-width: 70ch; }
:root .shell .card.guide-step { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.guide-shot { display: block; }
.guide-shot img, .guide-pair img { display: block; width: 100%; height: auto; border: 1px solid var(--scat-border); border-radius: var(--scat-radius-md); background: var(--scat-sunken); }
.guide-text { min-width: 0; }
.guide-text p, .guide-text ul, .guide-text ol { margin: 0 0 10px; }
.guide-text ul, .guide-text ol { padding-left: 1.4em; }
.guide-text ul { list-style: disc; }
.guide-text ol { list-style: decimal; }
.guide-text li + li { margin-top: 4px; }
:root .shell .guide-text h3 { margin: 0 0 10px; font-size: var(--scat-text-lg); }
.guide-num { color: var(--scat-accent); font-family: var(--scat-font-mono); font-size: var(--scat-text-sm); }
.guide-note { padding: 8px 12px; background: var(--scat-warning-soft); border: 1px solid var(--scat-warning-line); border-radius: var(--scat-radius-md); }
.guide kbd { padding: 0 6px; border: 1px solid var(--scat-border); border-bottom-width: 2px; border-radius: var(--scat-radius-xs); font-size: .85em; }
:root .shell .card.guide-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.guide-pair figcaption { grid-column: 1 / -1; margin: 0; }
.guide-table { overflow-x: auto; }
.guide-table table { width: 100%; min-width: 520px; border-collapse: collapse; }
.guide-table th, .guide-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--scat-border-subtle); }
.guide-table th { color: var(--scat-muted); font-size: var(--scat-text-xs); text-transform: uppercase; letter-spacing: .04em; }
:root .shell details.guide-faq > summary { font-weight: 600; }
:root .shell details.guide-faq > .hint { margin: 0; padding: 0 14px 14px; }
@media (max-width: 860px) {
  :root .shell .card.guide-step, :root .shell .card.guide-pair { grid-template-columns: minmax(0, 1fr); }
}
/* Narrow screen: the sidebar is a header, so the contents become a sticky dropdown above the text. */
@media (max-width: 720px) {
  .sidebar:has(.guide-toc) { position: static; height: auto; overflow: visible; }
  /* The page scrolls here, not .main, so the dropdown can stick to the window. */
  .main:has(.guide) { overflow: visible; }
  .sidebar .guide-toc { display: none; }
  :root .shell details.guide-mobile-toc { display: block; position: sticky; top: 0; z-index: 5; margin: 0; background: var(--scat-panel); box-shadow: var(--scat-shadow-overlay); }
  :root .shell details.guide-mobile-toc > summary { font-weight: 700; }
  .guide-mobile-toc .guide-toc { max-height: 70vh; overflow-y: auto; padding: 0 8px 10px; }
  .guide-chapter, .guide-alias, :root .shell .card.guide-step { scroll-margin-top: 64px; }
}

/* Channel tabs: «Коллекция» / «Достижения». */
.channel-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0.6rem 0 0.35rem;
  border-bottom: 1px solid var(--scat-border);
}
:root .shell .channel-tab {
  padding: 0.45rem 0.85rem;
  color: var(--scat-muted);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
:root .shell .channel-tab:hover { color: var(--scat-text); text-decoration: none; }
:root .shell .channel-tab.active { color: var(--scat-text); border-bottom-color: var(--scat-accent); }

/* Achievements: Steam-like cards; tier colours match the OBS popup (achievements.DefaultLook). */
.ach-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ach-head h2 { margin: 0; }
.ach-total { color: var(--scat-muted); font-weight: 650; }
.ach-bar { height: 8px; border-radius: var(--scat-radius-full); background: var(--scat-hover); overflow: hidden; margin: 0.6rem 0 0.9rem; }
.ach-bar > span { display: block; height: 100%; background: var(--scat-accent); border-radius: inherit; }
.ach-bar.small { height: 5px; margin: 0.15rem 0 0; }
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.75rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}
.ach-card {
  --ach-tier: #66C0F4;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.8rem 0.85rem;
  min-width: 0;
  background: var(--scat-sunken);
  border: 1px solid var(--scat-border);
  border-left: 3px solid var(--scat-border-strong);
  border-radius: var(--scat-radius-lg);
}
.ach-card.tier-bronze { --ach-tier: #CD8B4F; }
.ach-card.tier-silver { --ach-tier: #C9D3DF; }
.ach-card.tier-gold { --ach-tier: #FFC94A; }
.ach-card.got { border-left-color: var(--ach-tier); }
.ach-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 28px;
  line-height: 1;
  border-radius: var(--scat-radius-md);
  background: var(--scat-raised);
  box-shadow: inset 0 0 0 2px var(--ach-tier);
  overflow: hidden;
}
.ach-icon img { width: 100%; height: 100%; object-fit: cover; }
.ach-card:not(.got) .ach-icon { filter: grayscale(1); opacity: 0.55; box-shadow: inset 0 0 0 1px var(--scat-border-strong); }
.ach-body { min-width: 0; display: flex; flex-direction: column; gap: 0.22rem; flex: 1; }
.ach-name { font-size: var(--scat-text-base); overflow-wrap: anywhere; }
.ach-card:not(.got) .ach-name { color: var(--scat-text-secondary); }
.ach-card.locked .ach-name { font-style: italic; }
.ach-desc { color: var(--scat-muted); font-size: var(--scat-text-sm); overflow-wrap: anywhere; }
.ach-meta { color: var(--scat-muted); font-size: var(--scat-text-xs); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ach-tier { color: var(--ach-tier); font-weight: 650; }
.ach-rarity { color: var(--scat-muted); font-size: var(--scat-text-xs); }
.ach-rarity.rare { color: var(--scat-special); }
.download-period, .download-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.download-period select { width: auto; }
.download-legend { gap: 24px; }
.download-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 3px;
}
.download-site::before, .download-bar-site { background: #7c8dff; fill: #7c8dff; }
.download-update::before, .download-bar-update { background: #39c9ad; fill: #39c9ad; }
.download-chart-scroll { overflow-x: auto; max-width: 100%; }
.download-chart { display: block; width: 100%; min-width: 790px; }
.download-chart text { fill: currentColor; font-size: 11px; }
.download-grid { stroke: currentColor; opacity: 0.12; }
.download-chart g:hover rect:not([fill]), .download-chart g:focus rect:not([fill]) { filter: brightness(1.25); }

/* /download: hero scene, pillars, comparison */
:root .shell .card.dl-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.dl-eyebrow .dl-logo { width: 28px; height: 28px; vertical-align: middle; margin-right: 10px; }
:root .shell .dl-title { font-size: 2.3rem; line-height: 1.15; }
.dl-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.dl-badges li { padding: 4px 12px; background: var(--scat-raised); border: 1px solid var(--scat-border); border-radius: var(--scat-radius-full); font-size: var(--scat-text-sm); font-weight: 600; }
.dl-scene { position: relative; aspect-ratio: 16 / 10; min-width: 0; border-radius: var(--scat-radius-lg); overflow: hidden; border: 1px solid var(--scat-border); background: radial-gradient(circle at 70% 30%, #2b2350 0%, #12101f 60%, #0a0912 100%); color: #fff; }
.dl-scene::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }
.dl-scene > div { position: absolute; }
.dl-scene-alert { top: 9%; left: 50%; transform: translateX(-50%); padding: 10px 18px; background: rgba(20,16,36,.9); border: 2px solid #ffb020; border-radius: 14px; text-align: center; font-size: 1.15rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.dl-scene-alert span { color: #ffb020; }
.dl-scene-alert small { display: block; font-size: .75rem; font-weight: 500; color: #cfcbe8; }
.dl-scene-ach { right: 4%; top: 42%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(20,16,36,.9); border: 1px solid #ffb020; border-radius: 12px; }
.dl-scene-ach span { font-size: 1.4rem; }
.dl-scene-ach p { margin: 0; display: flex; flex-direction: column; font-size: .8rem; }
.dl-scene-ach small { color: #aaa; font-size: .7rem; }
.dl-scene-chat { left: 4%; bottom: 6%; display: flex; flex-direction: column; gap: 6px; max-width: 48%; }
.dl-scene-chat .dl-bubble { background: rgba(20,16,36,.85); color: #fff; }
.dl-scene-goal { right: 4%; bottom: 7%; width: 42%; padding: 8px 12px; background: rgba(20,16,36,.85); border-radius: 12px; font-size: .8rem; }
.dl-scene-goal p { margin: 0; font-weight: 650; }
.dl-scene-goal .dl-goal-bar { width: 100%; background: rgba(255,255,255,.12); }
.dl-scene-goal small { color: #cfcbe8; }
.dl-section-lead { margin: -6px 0 14px; max-width: 70ch; }
.dl-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
:root .shell .dl-pillar { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; transition-property: border-color, transform; transition-duration: .15s; }
:root .shell .dl-pillar:hover { border-color: var(--scat-accent); transform: translateY(-2px); }
:root .shell .dl-pillar h3 { margin: 4px 0 0; }
:root .shell .dl-pillar .hint { margin: 0; }
.dl-pillar-icon { font-size: 2rem; line-height: 1; }
.dl-compare { display: flex; flex-direction: column; border: 1px solid var(--scat-border-subtle); border-radius: var(--scat-radius-md); overflow: hidden; }
.dl-compare-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; }
.dl-compare-row > span { padding: 10px 14px; border-top: 1px solid var(--scat-border-subtle); font-size: var(--scat-text-sm); }
.dl-compare-row > span:nth-child(1) { font-weight: 650; }
.dl-compare-row > span:nth-child(2) { color: var(--scat-muted); }
.dl-compare-row > span:nth-child(3) { color: var(--scat-success); font-weight: 600; background: var(--scat-success-soft); }
.dl-compare-head > span { border-top: 0; background: var(--scat-sunken); color: var(--scat-muted) !important; font-size: var(--scat-text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dl-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
:root .shell .dl-proof h3 { margin: 0 0 6px; }
:root .shell .dl-proof .hint { margin: 0; }
@media (max-width: 1100px) { :root .shell .card.dl-hero { grid-template-columns: 1fr; } .dl-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  :root .shell .dl-title { font-size: 1.7rem; }
  .dl-pillars, .dl-proof { grid-template-columns: 1fr; }
  .dl-compare-row { grid-template-columns: 1fr; }
  .dl-compare-head { display: none; }
  .dl-compare-row > span:nth-child(2)::before { content: "Обычно: "; }
  .dl-compare-row > span:nth-child(3)::before { content: "С SCAT: "; }
  .dl-compare-row > span:nth-child(n+2) { border-top: 0; padding-top: 2px; }
  .dl-scene { aspect-ratio: 1 / 1; font-size: .8rem; }
  .dl-scene-alert { top: 6%; font-size: .95rem; }
  .dl-scene-ach { display: none; }
  .dl-scene-goal { top: 32%; bottom: auto; right: 6%; width: 60%; }
  .dl-scene-chat { left: 6%; bottom: 6%; max-width: 78%; }
}