/* A single header system for every Club page. Page skins do not own navigation. */
:root{--club-ui-font:var(--font-sans);--club-header-button:var(--surface-2);--club-header-text:var(--text);--club-header-depth:var(--bg);--club-header-accent:var(--accent);--club-header-accent-depth:var(--accent-shadow)}
html[data-theme=light]{--club-header-button:var(--surface-hover);--club-header-depth:var(--line-strong)}
body:has(.club-header--unified){min-width:0}
.club-header.club-header--unified{box-sizing:border-box;width:100%;max-width:1480px;height:76px;margin:0 auto;padding:0 24px;gap:14px;border-bottom:1px solid var(--line);font-family:var(--club-ui-font);font-synthesis:none;line-height:1.4}
html body .club-header--unified :is(a,button,span,nav){font-family:var(--club-ui-font);font-synthesis:none}
.club-header--unified .club-nav{display:flex;align-items:center;gap:8px;flex-shrink:0}
.club-header--unified .club-nav a,.club-header--unified .club-account-link{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;height:44px;min-height:44px;margin:0;padding:0 13px;border:1px solid transparent;border-radius:12px;background:linear-gradient(#ffffff0c,#00000003),var(--club-header-button);color:var(--club-header-text);font:600 14px/1.4 var(--club-ui-font);letter-spacing:0;text-shadow:none;text-transform:none;text-decoration:none;white-space:nowrap;transform:none;--header-depth:var(--club-header-depth);box-shadow:0 3px 0 var(--header-depth),0 5px 9px #00000008,inset 0 1px 0 #ffffff20;transition:transform 140ms cubic-bezier(.2,.7,.2,1),box-shadow 140ms cubic-bezier(.2,.7,.2,1),background-color 140ms ease-out}
.club-header--unified .club-account-link{min-width:84px}
.club-header--unified .club-nav a[aria-current=page],.club-header--unified .club-account-link[aria-current=page]{background:linear-gradient(#ffffff12,#00000004),var(--club-header-accent);color:var(--accent-ink);--header-depth:var(--club-header-accent-depth)}
.club-header--unified .club-nav a:after{display:none}
.club-header--unified .club-nav a:focus-visible,.club-header--unified .club-account-link:focus-visible{outline:3px solid var(--club-header-accent);outline-offset:5px}
.club-header--unified .club-nav a:active,.club-header--unified .club-account-link:active{transform:translateY(2px);box-shadow:0 1px 0 var(--header-depth),inset 0 1px 2px #00000010;transition-duration:90ms}
@media(hover:hover) and (pointer:fine){.club-header--unified .club-nav a:hover:not(:active),.club-header--unified .club-account-link:hover:not(:active){transform:translateY(-1px);box-shadow:0 4px 0 var(--header-depth),0 8px 13px #0000000c,inset 0 1px 0 #ffffff30}}
.club-header--unified .club-brand--light{width:var(--brand-light-width);flex:0 0 var(--brand-light-width);margin-right:0}
.club-mobile-nav,.club-mobile-nav a,.club-mobile-nav span{font-family:var(--club-ui-font);font-synthesis:none}.club-mobile-nav a{font-weight:600}
@media(max-width:900px){.club-header.club-header--unified{height:76px;padding:0 20px;gap:10px}.club-header--unified .club-nav,.club-header--unified .header-rule{display:none}.club-header--unified .club-brand--light{margin-right:auto}.club-header--unified .club-account-link{height:44px;min-height:44px;min-width:72px;padding:0 9px;font-size:12px}.club-header--unified .pull-lamp{width:100px;flex-basis:100px}}
@media(max-width:450px){.club-header.club-header--unified{padding:0 16px;gap:8px}.club-header--unified .club-brand--light{--brand-light-width:156px;width:156px;flex-basis:156px}.club-header--unified .club-account-link{min-width:68px;padding:0 8px;font-size:12px}.club-header--unified .pull-lamp{width:94px;flex-basis:94px}}
@media(max-width:350px){.club-header.club-header--unified{padding:0 14px;gap:6px}.club-header--unified .club-brand--light{--brand-light-width:120px;width:120px;flex-basis:120px}.club-header--unified .club-account-link{min-width:64px;padding:0 8px;font-size:11px}.club-header--unified .pull-lamp{width:68px;flex-basis:68px}.club-header--unified .pull-lamp-stage{transform:translate(-50%,-50%) scale(.8)}}
@media(prefers-reduced-motion:reduce){.club-header--unified .club-nav a,.club-header--unified .club-account-link{transition:none}}

html{scrollbar-gutter:stable}

.club-account{position:relative;flex:0 0 auto;line-height:1.4}
.club-account-trigger{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--accent-line);border-radius:50%;background:#ccefdc;cursor:pointer;overflow:hidden;box-shadow:0 2px 0 var(--club-header-depth),0 0 0 3px var(--accent-soft);transition:transform .15s ease-out,box-shadow .15s ease-out}
.club-account-avatar{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.club-account-trigger .club-account-avatar{width:100%;height:100%}
.club-account-trigger[aria-expanded=true]{box-shadow:0 0 0 4px var(--accent-soft)}
.club-account-panel{position:absolute;z-index:90;top:calc(100% + 14px);right:0;width:280px;padding:16px;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 18px 50px #0004;text-align:left}
.club-account-panel[hidden]{display:none}
.club-account-profile{display:flex;align-items:center;gap:12px;padding:2px 2px 16px;border-bottom:1px solid var(--line)}
.club-account-identity{min-width:0;display:grid;gap:4px}
.club-account-identity strong{font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.club-account-identity span{font-size:11px;color:var(--text-3);overflow-wrap:anywhere}
.club-account-actions{display:grid;gap:4px;padding-top:9px}
.club-account-actions :is(a,button){display:flex;align-items:center;justify-content:space-between;min-height:44px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;text-decoration:none;font-size:13px;cursor:pointer}
.club-account-actions :is(a,button):hover{background:var(--surface-2)}
.club-account-actions :is(a,button):disabled{opacity:.5;cursor:wait}
.club-account-actions span{color:var(--text-3)}
.club-account-menu-status{font-size:12px;color:var(--text-2);margin:8px 12px 0}
@media(hover:hover) and (pointer:fine){.club-account-trigger:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--club-header-depth),0 0 0 4px var(--accent-soft)}}
@media(max-width:900px){.club-account-panel{position:fixed;top:84px;right:16px;width:min(300px,calc(100vw - 32px))}}
@media(prefers-reduced-motion:reduce){.club-account-trigger{transition:none}}