:root{
  --bg:#0f1113; --card:#181a1c; --text:#e6e6e6; --muted:#9aa0a6;
  --accent:#3b82f6; --accentHover:#2563eb; --shadow: rgba(0,0,0,0.5);
}
body.light-mode{ --bg:#f7f7f8; --card:#fff; --text:#111; --muted:#666; --accent:#007bff; --accentHover:#0056b3; --shadow: rgba(0,0,0,0.08); }
*{box-sizing:border-box}
body{margin:0;font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;background:var(--bg);color:var(--text);line-height:1.4}
.site-header{background:var(--card);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 18px}
.brand h1{margin:0;font-size:1.05rem}
.brand .muted{display:block;font-size:12px;color:var(--muted)}
.nav{display:flex;gap:8px;margin-left:12px}
.nav-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer}
.nav-btn:hover{background:rgba(255,255,255,0.02)}
.nav-btn.active {background: var(--accent);color: #fff;border-color: var(--accent);}
.nav-btn.active:hover {background: var(--accentHover);}
.controls{margin-left:auto;display:flex;align-items:center;gap:8px}
.search{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);min-width:180px}
.theme-btn{background:var(--accent);border:none;color:#fff;padding:8px;border-radius:8px;cursor:pointer}

.content{max-width:1200px;margin:20px auto;padding:0 18px;min-height:60vh}
.center{text-align:center;padding:40px 0}
.loading{color:var(--muted)}
.error{color:#ff6b6b}

/* footer */
.site-footer{max-width:1200px;margin:30px auto 60px;padding:0 18px;text-align:center;color:var(--muted)}

/* responsive */
@media (max-width:720px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .nav{order:3;width:100%;justify-content:space-between}
  .controls{width:100%;justify-content:space-between}
  .search{min-width:0;flex:1}
}

/* Admin lock button */
.lock-btn {
  font-size: 18px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}
.lock-btn:hover {
  transform: scale(1.2);
}
.lock-btn.locked {
  color: var(--muted);
}
.lock-btn.unlocked {
  color: #00ff7f; /* nice green glow */
}
img.emoji {
  width: 1.1em;       /* scales relative to text size */
  height: 1.1em;      /* keeps them square */
  vertical-align: -0.15em;  /* nudges them down to line up nicely */
}