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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 60%, var(--accent-bg) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 15%, var(--accent-bg) 0%, transparent 50%);
  color: var(--text);
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 10;
}

header h1 { font-size: 1.1rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }

nav { display: flex; gap: 4px; margin-left: auto; }
nav a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 8px;
  transition: color 0.12s, background 0.12s;
}
nav a:hover { color: var(--text); background: var(--glass-hover); }
nav a.active { color: var(--accent); background: var(--glass-bg); }

.logout-btn {
  margin-left: 8px; font-size: 0.78rem; font-weight: 600;
  padding: 5px 13px; border-radius: 8px;
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--muted);
  cursor: pointer; transition: all 0.15s; letter-spacing: 0.03em; white-space: nowrap;
}
.logout-btn:hover { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-hover); border-radius: 4px; }

@media (max-width: 640px) {
  header { padding: 8px 12px; gap: 6px; }
  header h1 { font-size: 0.95rem; white-space: nowrap; }
  nav { gap: 1px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-shrink: 1; min-width: 0; }
  nav a { padding: 5px 9px; font-size: 0.74rem; white-space: nowrap; }
  .logout-btn { padding: 5px 9px; font-size: 0.72rem; margin-left: 4px; white-space: nowrap; }
}