:root {
  --metal-top: #1e2a38;
  --metal-bottom: #141e2a;
  --panel-top: #192430;
  --panel-bottom: #141e2a;
  --glass-top: #3a4f63;
  --glass-bottom: #15202c;
  --accent-a: #1a5276;
  --accent-b: #2471a3;
}

.topbar,
.sidebar-section header,
.panel-toggle,
#songTable th,
.statusbar,
.modal-card > header {
  background: linear-gradient(180deg, var(--metal-top), var(--metal-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.search-capsule,
.login-card,
.modal-card,
.browser-col,
.sidebar,
.smart-col {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
}

.lcd-display {
  background: linear-gradient(180deg, #2a3545 0%, #222c3a 50%, #1b2430 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #c8d4e0;
}

/* RoWeb-style buttons (used in topbar and elsewhere) */
.roweb-btn,
#loginForm button,
#wikiHistoryBtn,
button[data-close-modal] {
  border-radius: 6px;
  border: 1px solid #3a7bd5;
  background: #1a3a5c;
  color: #e6edf3;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}

.roweb-btn:hover,
#loginForm button:hover,
#wikiHistoryBtn:hover,
button[data-close-modal]:hover {
  background: #244a6e;
}

.roweb-btn.active {
  background: #3a7bd5;
  color: #fff;
  border-color: #58a6ff;
}

/* Transport buttons */
.transport-btn {
  background: linear-gradient(180deg, #253548 0%, #1c2a3c 48%, #182436 49%, #131e2c 100%);
  border: 1px solid #0d1520;
  color: #c8d4e0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.3);
}

.transport-btn:hover {
  background: linear-gradient(180deg, #2e4058 0%, #243548 48%, #1e2f42 49%, #182436 100%);
}

.transport-btn.active,
.transport-btn:active {
  background: linear-gradient(180deg, #182436 0%, #1e2f42 55%, #2e4058 100%);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.6);
}

.transport-btn.play-btn {
  background: linear-gradient(180deg, #2a4a6a 0%, #1e3a58 48%, #183050 49%, #122840 100%);
  border-color: #3a7bd5;
}

.transport-btn.play-btn:hover {
  background: linear-gradient(180deg, #345a7a 0%, #285068 100%);
}

.transport-btn.play-btn.active {
  background: linear-gradient(180deg, #183050 0%, #1e3a58 55%, #2a4a6a 100%);
  color: #58a6ff;
}

#songTable tbody tr.selected,
.tree-item.selected,
.browser-col li.selected {
  background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
}

.song-playing {
  box-shadow: inset 2px 0 0 #58a6ff;
}

#songTable tbody tr:nth-child(odd) {
  background: #131e2a;
}

#songTable tbody tr:nth-child(even) {
  background: #192430;
}

.three-browser,
.songlist-wrap,
.sidebar-section,
.browser-wrap {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.browser-resizer {
  background: linear-gradient(180deg, #141e2a, #1e2a38, #141e2a);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.browser-resizer:hover {
  background: linear-gradient(180deg, #1a2636, #283848, #1a2636);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #192430, #141e2a);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #283848, #1e2a38);
  border: 1px solid #0d1520;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #324858, #283848);
}