.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: rgb(7 20 38 / 88%); backdrop-filter: blur(16px); }
.site-nav { display: flex; align-items: center; justify-content: space-between; width: min(100% - 2rem, var(--content-width)); min-height: 4.5rem; margin: 0 auto; }
.site-brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--text); font-size: 1.05rem; font-weight: 700; text-decoration: none; transition: color 180ms ease, transform 180ms ease; }
.site-brand:hover, .site-brand:focus-visible { color: var(--primary); transform: translateX(3px); }
.site-brand span { text-shadow: 0 0 8px rgb(76 201 240 / 20%); animation: brand-glow 5s ease-in-out infinite; }
.site-brand__logo { width: 2.65rem; height: 2.65rem; border: 1px solid var(--card-border); border-radius: 50%; object-fit: cover; box-shadow: 0 0 18px rgb(76 201 240 / 18%); }
.site-links { display: flex; align-items: center; gap: 1.5rem; font: 700 0.86rem/1 Arial, sans-serif; }
.site-links a { position: relative; text-decoration: none; }
.site-links > a::after { position: absolute; right: 0; bottom: -0.55rem; left: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform 180ms ease; content: ''; }
.site-links > a:hover::after, .site-links > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.site-links a:hover, .site-links a:focus-visible { color: var(--primary); }
.roles-menu { position: relative; }
.roles-menu summary { cursor: pointer; list-style: none; }
.roles-menu summary::-webkit-details-marker { display: none; }
.roles-menu summary::after { margin-left: 0.35rem; content: '\2193'; }
.roles-list { position: absolute; top: 1.7rem; right: 0; display: grid; min-width: 180px; padding: 0.6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.roles-list a { padding: 0.65rem; border-radius: 6px; }
.roles-list a:hover, .roles-list a:focus-visible { background: var(--surface-muted); }
.nav-toggle { display: none; border: 1px solid var(--border); border-radius: 7px; padding: 0.6rem 0.75rem; color: var(--text); background: var(--surface); font: 700 0.8rem Arial, sans-serif; }
@media (max-width: 600px) { .site-nav { position: relative; flex-wrap: wrap; padding: 1rem 0; } .nav-toggle { display: block; } .site-links { display: none; flex-basis: 100%; align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1rem 0 0.35rem; } .site-links.is-open { display: flex; } .roles-list { position: static; margin-top: 0.75rem; } }
@keyframes brand-glow { 0%, 100% { text-shadow: 0 0 7px rgb(76 201 240 / 20%); } 50% { text-shadow: 0 0 18px rgb(76 201 240 / 72%); } }