/* ROK forum skin. The existing style.css remains the complete classic skin. */
html[data-theme="forum"] {
  --bg: #151719;
  --panel: #202427;
  --panel2: #292d30;
  --line: #3d4347;
  --text: #eeeeee;
  --muted: #a2a8ac;
  --accent: #318ed8;
  --accent2: #1769b2;
  --danger: #ef7184;
}

html[data-theme="forum"] body {
  background: #151719;
  background-image: linear-gradient(180deg, #121416 0, #191c1e 260px, #151719 100%);
  color: var(--text);
}

html[data-theme="forum"] button {
  border-color: #4a5054;
  border-radius: 2px;
  background: #1769b2;
  box-shadow: none;
}

html[data-theme="forum"] button:hover {
  filter: none;
  border-color: #65a8df;
  background: #2379c1;
  transform: none;
}

html[data-theme="forum"] button:active { transform: translateY(1px); }

html[data-theme="forum"] input,
html[data-theme="forum"] select,
html[data-theme="forum"] textarea {
  border-color: #454b4f;
  border-radius: 2px;
  background: #151719;
}

html[data-theme="forum"] input:focus,
html[data-theme="forum"] select:focus,
html[data-theme="forum"] textarea:focus {
  border-color: #318ed8;
  box-shadow: 0 0 0 2px #318ed833;
}

html[data-theme="forum"] .card,
html[data-theme="forum"] dialog {
  border-color: #3d4347;
  border-radius: 2px;
  background: #202427;
  box-shadow: 0 1px 0 #ffffff08, 0 8px 22px #00000024;
}

html[data-theme="forum"] .login-wrap,
html[data-theme="forum"] .player-body {
  background: linear-gradient(135deg, #111315, #202427 48%, #151719);
}

html[data-theme="forum"] .login-card {
  border-top: 4px solid #1769b2;
}

html[data-theme="forum"] .brand,
html[data-theme="forum"] .logo span,
html[data-theme="forum"] .player-art span {
  border-radius: 1px;
  background: #1769b2;
  box-shadow: none;
  transform: none;
}

html[data-theme="forum"] #app > aside {
  border-right-color: #3d4347;
  background: #1c1f21;
  box-shadow: 8px 0 24px #0000001f;
}

html[data-theme="forum"] #app > aside::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: #1769b2;
}

html[data-theme="forum"] .logo {
  padding-bottom: 20px;
  border-bottom: 1px solid #3d4347;
}

html[data-theme="forum"] .nav,
html[data-theme="forum"] .ghost {
  border-color: transparent;
  color: #c4c8ca;
  background: transparent;
}

html[data-theme="forum"] .nav {
  position: relative;
  border-radius: 1px;
  padding: 10px 12px 10px 15px;
}

html[data-theme="forum"] .nav:hover {
  border-color: #3d4347;
  background: #292d30;
}

html[data-theme="forum"] .nav.active {
  border-color: #2d7bbb;
  color: #fff;
  background: #1769b2;
}

html[data-theme="forum"] .nav.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #8dc9f8;
}

html[data-theme="forum"] .profile {
  border-top: 1px solid #3d4347;
  background: #191c1e;
}

html[data-theme="forum"] .profile span,
html[data-theme="forum"] .eyebrow,
html[data-theme="forum"] .update-version strong { color: #67b6f3; }

html[data-theme="forum"] .content > header {
  margin: -35px calc(clamp(20px, 5vw, 70px) * -1) 26px;
  padding: 23px clamp(20px, 5vw, 70px) 18px;
  border-bottom: 1px solid #3d4347;
  background: #202427;
}

html[data-theme="forum"] .content > header h2 {
  font-size: 25px;
  letter-spacing: -.4px;
}

html[data-theme="forum"] .playlist-card,
html[data-theme="forum"] .song-item,
html[data-theme="forum"] .user-item,
html[data-theme="forum"] .group-list-item,
html[data-theme="forum"] .update-entry,
html[data-theme="forum"] .feature-row,
html[data-theme="forum"] .pick,
html[data-theme="forum"] .queue-editor-item,
html[data-theme="forum"] .event-node,
html[data-theme="forum"] .event-point-head,
html[data-theme="forum"] .event-sound-item,
html[data-theme="forum"] .team-user,
html[data-theme="forum"] .library-song,
html[data-theme="forum"] .radio-panel,
html[data-theme="forum"] .audio-visual-editor,
html[data-theme="forum"] .curve-panel p {
  border-color: #3d4347;
  border-radius: 1px;
  background: #25292c;
  box-shadow: none;
}

html[data-theme="forum"] .playlist-card:hover,
html[data-theme="forum"] .song-item:hover,
html[data-theme="forum"] .library-song:hover,
html[data-theme="forum"] .queue-editor-item:hover,
html[data-theme="forum"] .event-sound-item:hover {
  border-color: #596168;
  background: #2a2f32;
  transform: none;
}

html[data-theme="forum"] .update-entry.latest,
html[data-theme="forum"] .maintenance-card {
  border-left: 4px solid #1769b2;
  border-color: #3d4347 #3d4347 #3d4347 #1769b2;
  background: #25292c;
}

html[data-theme="forum"] .current-version,
html[data-theme="forum"] .badge,
html[data-theme="forum"] .service-pill,
html[data-theme="forum"] .generation-warning {
  border-radius: 2px;
}

html[data-theme="forum"] .current-version {
  border-color: #2d7bbb;
  color: #a8d7fb;
  background: #172d3f;
}

html[data-theme="forum"] .picker-source-tabs,
html[data-theme="forum"] .song-menu-popover,
html[data-theme="forum"] .picker-footer,
html[data-theme="forum"] .close {
  border-color: #3d4347;
  border-radius: 2px;
  background: #292d30;
}

html[data-theme="forum"] .picker-source.active,
html[data-theme="forum"] .song-menu summary:hover,
html[data-theme="forum"] .song-menu[open] summary {
  border-color: #2d7bbb;
  background: #1769b2;
  color: #fff;
}

html[data-theme="forum"] .metric-track,
html[data-theme="forum"] .storage-track { border-radius: 1px; }

html[data-theme="forum"] .metric-track i,
html[data-theme="forum"] .storage-track i { background: #318ed8; }

html[data-theme="forum"] .site-hub-back {
  border-color: #4a5054;
  border-radius: 1px;
  color: #d7dadd;
  background: #202427;
}

html[data-theme="forum"] .feedback-button {
  border-radius: 2px;
  background: #1769b2;
}

html[data-theme="forum"] .player-art {
  border-radius: 2px;
  background: #202427;
  box-shadow: 0 18px 45px #0008;
  transform: none;
}

html[data-theme="forum"] .queue-item { border-radius: 1px; }
html[data-theme="forum"] .queue-item.active { background: #252f36; border-left-color: #318ed8; }

.settings-card { max-width: 920px; }
.settings-card .section-heading { margin-bottom: 24px; }
.settings-card .section-heading h3 { margin-bottom: 6px; }
.theme-options { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.theme-options legend { margin-bottom: 10px; color: var(--text); font-weight: 850; }
.theme-option { grid-template-columns: auto 118px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); cursor: pointer; }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.theme-option input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); }
.theme-option > span:last-child { display: grid; gap: 3px; }
.theme-option strong { color: var(--text); font-size: 14px; }
.theme-option strong small { margin-left: 5px; padding: 2px 5px; border-radius: 3px; color: #fff; background: var(--accent2); font-size: 9px; text-transform: uppercase; }
.theme-option em { color: var(--muted); font-size: 12px; font-style: normal; }
.theme-preview { height: 66px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: 14px 1fr 1fr; gap: 4px; padding: 7px; border: 1px solid #51575b; overflow: hidden; }
.theme-preview i { display: block; }
.theme-preview i:first-child { grid-column: 1 / -1; }
.theme-preview i:nth-child(2) { grid-row: 2 / 4; }
.theme-preview-forum { border-radius: 1px; background: #151719; }
.theme-preview-forum i:first-child { background: #1769b2; }
.theme-preview-forum i:nth-child(2) { background: #202427; }
.theme-preview-forum i:nth-child(3), .theme-preview-forum i:nth-child(4) { background: #292d30; border: 1px solid #3d4347; }
.theme-preview-classic { border-radius: 9px; background: #0b0e12; }
.theme-preview-classic i:first-child { border-radius: 4px; background: linear-gradient(135deg, #75a99f, #587f78); }
.theme-preview-classic i:nth-child(2) { border-radius: 4px; background: #11161d; }
.theme-preview-classic i:nth-child(3), .theme-preview-classic i:nth-child(4) { border-radius: 5px; background: #18202a; }
.theme-status { min-height: 21px; margin: 14px 0 0; color: var(--accent); font-size: 12px; font-weight: 750; }

html[data-theme="forum"] .theme-option { border-radius: 1px; background: #25292c; }

@media (max-width: 750px) {
  html[data-theme="forum"] #app > aside { box-shadow: 0 8px 22px #00000024; }
  html[data-theme="forum"] .content > header {
    margin: -24px -16px 22px;
    padding: 18px 16px 15px;
  }
  .theme-option { grid-template-columns: auto minmax(0, 1fr); }
  .theme-preview { display: none; }
}

@media (max-width: 430px) {
  .theme-option { align-items: start; gap: 10px; padding: 12px; }
}