:root {
  --primary: #49eaff;
  --accent: #ff4081;
  --bg-white: #f8fafc;
  --bg-dark: #181c20;
  --sidebar-width: 290px;
  --monitor-radius: 20px 20px 0 0;
}
body[data-theme="dark"] {
  --primary: #49eaff;
  --accent: #00ffea;
  --bg-white: #23272e;
  --bg-dark: #070b10;
}
body { background: var(--bg-white); color: #23282f; margin: 0; font-family: 'Segoe UI', Arial, sans-serif; }
body[data-theme="dark"] { background: var(--bg-dark); color: #eaeaea; }
.nerd-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width);
  background: linear-gradient(180deg,#1e232c 0%,#23272e 100%);
  border-right: 4px solid var(--primary); z-index: 2000;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .4s cubic-bezier(.77,0,.18,1);
  box-shadow: 4px 0 30px #0004;
}
.nerd-sidebar.closed { transform: translateX(-100%); }
.nerd-sidebar .nerd-logo { margin: 2rem 0 1rem; width: 120px; }
.nerd-sidebar .nerd-logo img { width: 100%; }
.nerd-sidebar .nerd-socials { display: flex; gap: 1rem; }
.nerd-build-switch { margin: 2rem 0; cursor:pointer; color: var(--primary); font-size:1.1rem; }
.nerd-menu-list { list-style: none; padding: 0; }
.nerd-menu-list li { padding: 1rem 2rem; cursor: pointer; font-weight: 500; border-left: 4px solid transparent; transition: background .2s, border .2s; }
.nerd-menu-list li.current-menu-item, .nerd-menu-list li:hover { background: #23272e; border-left: 4px solid var(--primary);}
.nerd-widgets { flex: 1; width: 100%; }
.nerd-legal { margin-bottom: 1rem; font-size: 0.85rem; color: #777; text-align: center; }
.nerd-main { margin-left: var(--sidebar-width); min-height: 100vh; background: none; transition: margin .4s; }
.nerd-sidebar-toggle { position: fixed; left: 1rem; top: 1rem; z-index: 3001; background: var(--primary); color: #fff; border: none; border-radius: 50%; width: 48px; height: 48px; font-size: 2rem; display: none; cursor:pointer; }
@media (max-width: 900px) {
  .nerd-sidebar { width: 80vw; }
  .nerd-main { margin-left: 0; }
  .nerd-sidebar-toggle { display: block; }
}
.nerd-monitor {
  background: #191d22;
  border: 8px solid #23272e;
  border-radius: var(--monitor-radius);
  box-shadow: 0 8px 40px 0 #0008;
  min-height: 100vh; position: relative; overflow: visible;
  margin: 2rem 2vw 2rem calc(var(--sidebar-width) + 2vw);
}
body[data-theme="dark"] .nerd-monitor { background: #23272e; border-color: #49eaff; }
.nerd-monitor-content { padding: 3rem 2rem; background: #fff; border-radius: 12px; min-height: 60vh; box-shadow: 0 2px 12px #0002; }
body[data-theme="dark"] .nerd-monitor-content { background: #1a1d22; color: #eaeaea; }
.nerd-monitor:after {
  content: '';
  display: block; width: 100%; height: 40px; position: absolute; left: 0; bottom: -40px;
  background: linear-gradient(0deg,rgba(30,30,40,0.8) 0%,rgba(30,30,40,0) 90%); pointer-events: none;
}