:root {
  --bg:#0f1115;
  --text:#e7ebf3;
  --accent:#3ab0ff;
  --surface:#151922;
}

/* Light theme (activated by JS) */
.light {
  --bg:#f5f7fa;
  --text:#1a1d25;
  --accent:#0077cc;
  --surface:#ffffff;
}

body {
  margin:0;
  font-family:system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .3s,color .3s;
}

/* HEADER */
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  background:linear-gradient(180deg,#1a1d25,#12141a);
  border-bottom:1px solid #222837;
  position:sticky;
  top:0;
  z-index:100;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:bold;
  font-size:18px;
  color:var(--accent);
  text-decoration:none;
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-image: url('https://camcookie876.github.io/DOCS/logo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* SEARCH */
.search {
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
}

.search input {
  padding:6px 10px;
  border-radius:6px;
  border:1px solid #273044;
  background:var(--surface);
  color:var(--text);
  outline:none;
  width:180px;
  transition: all .25s ease;
}

.search input:focus {
  width:260px;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(58,176,255,.3);
  background:var(--bg);
}

.search button {
  padding:6px 10px;
  border-radius:6px;
  border:1px solid #273044;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  transition:background .2s;
}

.search button:hover {
  background:#2a8ed6;
}

/* SEARCH RESULTS */
.results {
  position:absolute;
  top:110%;
  right:0;
  left:0;
  background:var(--surface);
  border:1px solid #273044;
  border-radius:6px;
  max-height:200px;
  overflow-y:auto;
  padding:6px;
  z-index:200;
  opacity:0;
  transform:translateY(-5px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

.results.show {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.results a {
  display:block;
  padding:6px;
  color:var(--accent);
  text-decoration:none;
  border-radius:4px;
  transition:background .2s;
}

.results a:hover {
  background:rgba(58,176,255,.1);
}

/* THEME TOGGLE */
.theme-toggle {
  margin-left:20px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:6px;
  border:1px solid #273044;
  background:var(--surface);
  color:var(--text);
  transition:background .2s;
}

.theme-toggle:hover {
  background:#1f2533;
}

/* MAIN CONTENT */
main {
  padding:20px;
}

.warning {
  background: #f99900;
  padding: 3px;
  border-radius: 10px;
}
a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s;
}

a:hover {
  color: #2a8ed6;
  text-decoration: underline;
}
h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 20px 0 15px 0;
  color: var(--accent);
}

h2 {
  font-size: 24px;
  margin: 18px 0 10px 0;
  font-weight: 600;
}

h3 {
  font-size: 20px;
  margin: 16px 0 8px 0;
  font-weight: 600;
}

h4 {
  font-size: 18px;
  margin: 14px 0 6px 0;
  font-weight: 600;
}
.noscript-warning {
  background: #ff4444;
  color: white;
  padding: 12px;
  margin: 15px;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  text-align: center;
  border: 1px solid #aa0000;
}

.noscript-warning h3 {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
}

.noscript-warning p {
  margin: 0;
  font-size: 15px;
}

/* Ads */
.ad-slot {
  margin: 20px;
}