#header{position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max-width);z-index:100;background-color:var(--clr-background);border-bottom:var(--border)}.header-nav{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;position:relative}#drawer-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;min-height:2.5rem;min-width:2.5rem}.header-auth{display:none}#drawer-overlay{display:none;position:fixed;inset:0;background-color:#0006;z-index:200;opacity:0;transition:opacity .3s ease}.header-logo{flex-shrink:0}.header-logo img{border:2px solid var(--clr-primary);border-radius:50%;height:2.5rem;width:2.5rem}.header-brand{color:var(--clr-primary);font-size:.95rem;font-weight:700;left:50%;line-height:1;position:absolute;transform:translate(-50%)}.header-links{display:none}@media(max-width:360px){.header-nav{gap:.5rem;padding-inline:1rem}}@media(min-width:580px){.header-brand{display:none}.header-links{display:flex;align-items:center;gap:.125rem;margin-left:auto}.header-auth{display:flex;align-items:center;flex-shrink:0}#drawer-toggle{display:none}}.header-auth-btn{padding:.4rem .875rem;border-radius:2rem;border:1.5px solid var(--clr-primary);color:var(--clr-primary);font-size:.825rem;font-weight:600;transition:background-color .15s ease,color .15s ease;white-space:nowrap}.header-auth-btn:hover{background-color:var(--clr-primary);color:#fff}.header-links a{padding:.35rem .55rem;border-radius:.5rem;font-size:.8rem;font-weight:500;color:var(--clr-text-primary);transition:background-color .15s ease,color .15s ease;white-space:nowrap}.header-links a:hover{background-color:#0000000d}.header-links a.active{color:var(--clr-primary);font-weight:600;background-color:#0000000a}.header-account{display:flex;align-items:center;gap:.4rem}.header-account .ui-avatar{width:1.5rem;height:1.5rem;font-size:.65rem}.header-account .ui-avatar-img{width:1.5rem;height:1.5rem}#drawer-overlay.active{display:block;opacity:1}#drawer{position:fixed;top:0;bottom:0;left:0;width:80vw;max-width:320px;background-color:var(--clr-background);z-index:300;display:flex;flex-direction:column;transform:translate(-100%);transition:transform .3s ease;box-shadow:var(--box-shadow);padding:1.5rem 1.25rem}body.drawer-open{overflow:hidden;position:fixed;width:100%}#drawer.active{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between}.drawer-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}.drawer-brand img{height:2.25rem;width:2.25rem;flex-shrink:0;border:2px solid var(--clr-primary);border-radius:50%}.drawer-brand span{font-size:.875rem;font-weight:700;color:var(--clr-primary);letter-spacing:.03em}#drawer-close{width:2rem;height:2rem;display:grid;place-items:center;border:none;border-radius:50%;background:#f5f5f5;color:var(--clr-text-medium);cursor:pointer;flex-shrink:0}#drawer-close:hover{background:#ebebeb;color:var(--clr-text-dark)}#drawer-close svg{width:1rem;height:1rem}.drawer-nav{flex:1;display:flex;flex-direction:column;gap:.25rem;margin-top:2rem}.drawer-nav a{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:.5rem;color:var(--clr-text-dark);font-size:.9rem;font-weight:500;transition:background-color .15s ease,color .15s ease}.drawer-nav a svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--clr-text-light);transition:color .15s ease}.drawer-nav a:hover{background-color:#0000000a;color:var(--clr-text-dark)}.drawer-nav a.active{background-color:color-mix(in srgb,var(--clr-primary) 8%,transparent);color:var(--clr-primary);font-weight:600}.drawer-nav a.active svg{color:var(--clr-primary)}.drawer-nav a .ui-avatar{width:1.25rem;height:1.25rem;font-size:.55rem}.drawer-nav a .ui-avatar-img{width:1.25rem;height:1.25rem}.drawer-footer{display:flex;flex-direction:column;gap:.5rem;padding-bottom:env(safe-area-inset-bottom,1rem)}.drawer-footer form,.drawer-footer button{width:100%}.drawer-auth-action{display:block;text-align:center;padding:.75rem;border-radius:.5rem;border:1px solid var(--clr-primary);color:var(--clr-primary);font-weight:600;transition:background-color .2s ease,color .2s ease}.drawer-auth-action:hover{background-color:var(--clr-primary);color:#fff}
