.site-header { position: relative; z-index: 50; height: 82px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 4px 20px rgba(19, 59, 159, .05); }
.header-inner { display: flex; align-items: center; width: min(calc(100% - 40px), var(--content)); height: 100%; margin-inline: auto; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--primary-800); font-size: 24px; font-weight: 900; white-space: nowrap; }
.brand img { width: 48px; height: 48px; }
.main-nav { display: flex; align-items: stretch; align-self: stretch; justify-content: center; gap: 12px; margin-inline: auto; }
.main-nav a { position: relative; display: grid; place-items: center; padding: 0 14px; color: var(--ink); font-size: 15px; font-weight: 700; }
.main-nav a::after { position: absolute; right: 16%; bottom: 0; left: 16%; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary-600); content: ""; opacity: 0; transform: scaleX(.35); transition: .2s var(--ease); }
.main-nav a:hover, .main-nav a.is-active { color: var(--primary-600); }
.main-nav a:hover::after, .main-nav a.is-active::after { opacity: 1; transform: scaleX(1); }
.header-user { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.notification-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--line); border-radius: 50%; color: var(--primary-700); background: var(--surface); font-size: 23px; }
.notification-button img { width: 100%; height: 100%; object-fit: contain; }
.notification-button b { position: absolute; top: -5px; right: -3px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 20px; color: #fff; background: var(--primary-600); font-size: 11px; }
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.user-chip img { width: 48px; height: 48px; border: 3px solid var(--primary-100); border-radius: 50%; object-fit: cover; }
.user-chip span { display: grid; line-height: 1.4; }
.user-chip strong { font-size: 14px; }
.user-chip small { color: var(--ink-soft); font-size: 12px; }
.user-chip i { color: var(--ink-soft); font-style: normal; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--ink); }
.site-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 42px max(24px, calc((100vw - var(--content)) / 2)); border-top: 1px solid var(--line); background: #fff; }
.site-footer p { margin: 5px 0 0; color: var(--ink-soft); }
.footer-brand { color: var(--primary-700); font-size: 22px; font-weight: 900; }
.site-footer nav { display: flex; gap: 20px; color: var(--ink-soft); font-weight: 700; }
.site-footer small { grid-column: 1 / -1; color: var(--ink-soft); }
.link-button { padding: 0; border: 0; color: var(--primary-600); background: none; cursor: pointer; font-weight: 800; }