:root{
  --xmas-red:#b91c1c;
  --xmas-green:#065f46;
  --xmas-pine:#064e3b;
  --xmas-snow:#f8fafc;
}

/* Base */
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#111;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Header / Nav */
.site-header{background:#fafafa;border-bottom:1px solid #eee;position:sticky;top:0;z-index:50}
.site-nav{position:relative;max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand-link{text-decoration:none;color:var(--xmas-red);font-weight:700}

.nav-toggle{display:inline-block;line-height:1;font-size:22px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#111;cursor:pointer}
.nav-toggle:focus{outline:2px solid #fecaca;outline-offset:2px}

/* Mobile menu (default) */
.nav-links{display:none;position:absolute;right:16px;top:100%;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:8px;min-width:220px;flex-direction:column;z-index:60}
.nav-links.open{display:flex}

.nav-link{display:block;padding:10px 12px;text-decoration:none;color:var(--xmas-pine);border-radius:8px}
.nav-link:hover{background:#f3f4f6;color:var(--xmas-red)}
.nav-link.logout{color:var(--xmas-red)}
.nav-link.admin{color:var(--xmas-green)}

/* Desktop */
@media (min-width:768px){
  .nav-toggle{display:none}
  .nav-links{display:flex !important;position:static;border:none;box-shadow:none;background:transparent;padding:0;min-width:0;flex-direction:row;gap:12px;align-items:center}
  .nav-link{padding:0;background:transparent}
  .nav-link:hover{background:transparent;text-decoration:underline;color:var(--xmas-red)}
}