* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: #050508 !important;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body), Arial, sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

#header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

#logo-bar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--panel-border2);
}

#logo {
  font-family: var(--font-head), Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--logo-color);
  letter-spacing: 3px;
  text-decoration: none;
}

#logo span { opacity: 0.5; }

.theme-badge {
  font-family: var(--font-ui), monospace;
  font-size: 10px;
  background: var(--bg3);
  border: 1px solid var(--panel-border);
  color: var(--accent2);
  padding: 2px 8px;
  letter-spacing: 1px;
}

#theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui), monospace;
  font-size: 11px;
  color: var(--accent4);
}

#theme-select {
  background: var(--bg3);
  border: 1px solid var(--panel-border);
  color: var(--accent2);
  padding: 3px 8px;
  font-family: var(--font-ui), monospace;
  font-size: 11px;
  cursor: pointer;
  outline: none;
}

#search-bar input {
  background: var(--bg3);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 3px 8px;
  font-family: var(--font-ui), monospace;
  font-size: 11px;
  width: 140px;
  outline: none;
}

#search-bar button {
  background: var(--bg3);
  border: 1px solid var(--panel-border);
  color: var(--accent2);
  padding: 3px 10px;
  font-family: var(--font-ui), monospace;
  font-size: 11px;
  cursor: pointer;
}

.nav-util {
  color: var(--accent4);
  font-family: var(--font-ui), monospace;
  font-size: 11px;
  text-decoration: none;
  margin-left: 8px;
}

.nav-util:hover { color: var(--accent); }

#nav-bar {
  display: flex;
  padding: 0 16px;
}

#nav-bar a {
  color: var(--nav-link);
  text-decoration: none;
  font-family: var(--font-ui), monospace;
  font-size: 12px;
  padding: 6px 12px;
  border-right: 1px solid var(--panel-border2);
  transition: all 0.2s;
}

#nav-bar a:hover {
  background: var(--panel-border2);
  color: var(--accent);
}

#page-wrap {
  max-width: 960px;
  margin: 16px auto;
  padding: 0 12px;
}

.flash {
  padding: 8px 16px;
  font-family: var(--font-ui), monospace;
  font-size: 12px;
  transition: opacity 1s;
}

.flash-success { background: #003300; color: #00cc44; }
.flash-error   { background: #330000; color: #ff4444; }

#footer {
  text-align: center;
  padding: 20px;
  font-family: var(--font-ui), monospace;
  font-size: 10px;
  color: var(--accent4);
  border-top: 1px solid var(--panel-border);
  margin-top: 20px;
}

#footer a { color: var(--accent3); text-decoration: none; }
.footer-disclaimer { color: var(--accent5); }