:root {
  --bg-color: #f2f2f2;
  --text-color: #333;
  --sidebar-bg: #e4ecff;
  --sidebar-text: #0062ff;
  --sidebar-title: #444;
  --main-bg: #fff;
  --table-header-bg: #d9e8ff;
  --table-border-color: #0278ff;
  --table-row-border: #ddd;
  --download-color: #2665ca;
  --logo-color: #ffffff;
}

body {
  margin: 0;
  background: var(--bg-color);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--text-color);
}

.logo {
  color: var(--logo-color);
}

.wrapper {
  display: flex;
  min-height: 122vh;
}

.sidebar {
  width: 250px;
  background: var(--sidebar-bg);
  border-right: 1px solid #303030;
  padding: 15px;
}

.sidebar-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--sidebar-title);
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px 4px;
  cursor: pointer;
  color: var(--sidebar-text);
}

.sidebar li:hover {
  text-decoration: underline;
}

.sidebar li.active {
  font-weight: bold;
  color: #0084ff;
}

.main {
  flex: 1;
  padding: 1px;
  background: var(--main-bg);
}

.romtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0 8px;
}

.romtable th {
  font-size: 15px;
  background: var(--table-header-bg);
  font-weight: normal;
  text-align: left;
  padding: 6px;
  border-bottom: 3px solid var(--table-border-color);
}

.romtable tr {
  background: #1e1e1e;
  border-radius: 10px;
}

.romtable td{
  padding: 12px;
  border-bottom: 1px solid var(--table-row-border);
  vertical-align: top;
}

.download {
  color: var(--download-color);
  text-decoration: none;
}

body.dark {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --sidebar-bg: hsl(0, 2%, 9%);
  --sidebar-text: #31a1fd;
  --sidebar-title: #cccccc;
  --main-bg: #000000;
  --table-header-bg: #2a2a2a;
  --table-border-color: #3a3a3a;
  --table-row-border: #2b2a2a;
  --download-color: #74c0fc;
  --logo-color: #ffffff;
}

.nav-links {
    display: flex;
    align-items: center;
}


.dark-toggle:hover {
    color: var(--navbar-link-hover);
}

@media (prefers-color-scheme: dark) {
  body:not(.dark) {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --sidebar-bg: #1e1e1e;
    --sidebar-text: #61b3ff;
    --sidebar-title: #cccccc;
    --main-bg: #1a1a1a;
    --table-header-bg: #242424;
    --table-border-color: #3a3a3a;
    --table-row-border: #333333;
    --download-color: #74c0fc;
    --logo-color: #ffffff;
  }
}