* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0c10; --surface: #10131a; --surface2: #181c26;
  --border: rgba(255,255,255,0.08); --text: rgba(255,255,255,0.92); --text2: rgba(255,255,255,0.55);
  --accent: #0161E0; --accent2: #0BCDFF; --green: #4ecdc4;
  --orange: #ff9f43; --red: #ff6b6b; --code-bg: #0d0f14;
  --glass: rgba(14,18,28,0.55); --glass-border: rgba(255,255,255,0.10);
}
body {
  display: flex; height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--text); overflow: hidden;
}
#sidebar {
  width: 260px; min-width: 260px;
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column; padding: 24px 0; overflow-y: auto;
}
.logo {
  font-size: 15px; font-weight: 700; padding: 0 20px;
  color: var(--text); display: flex; align-items: center; gap: 10px;
}
.logo svg { width: 24px; height: 28px; flex-shrink: 0; }
.nav-subtitle {
  font-size: 11px; color: var(--text2); padding: 4px 20px 20px;
  text-transform: uppercase; letter-spacing: 1px;
}
#nav-links { list-style: none; flex: 1; }
#nav-links li {
  padding: 10px 20px; cursor: pointer; font-size: 13px;
  color: var(--text2); border-left: 3px solid transparent; transition: all 0.2s;
}
#nav-links li:hover { color: var(--text); background: var(--surface2); }
#nav-links li.active { color: var(--accent2); border-left-color: var(--accent); background: var(--surface2); }
#nav-links .nav-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text2); padding: 16px 20px 6px; cursor: default; opacity: 0.6;
}
#nav-links .nav-group:hover { background: transparent; color: var(--text2); }
.nav-footer { padding: 16px 20px; border-top: 1px solid var(--glass-border); }
.agreement-badge {
  font-size: 11px;
  background: linear-gradient(135deg, #0161E0, #0BCDFF);
  color: #fff; padding: 4px 10px; border-radius: 4px; display: inline-block; font-weight: 600;
}
.agreement-date { font-size: 11px; color: var(--text2); margin-top: 6px; }
main {
  flex: 1; overflow-y: auto; padding: 40px 60px;
  max-width: 900px; scroll-behavior: smooth;
}

main {
  flex: 1; overflow-y: auto; padding: 40px 60px;
  max-width: 900px; scroll-behavior: smooth;
}