.app-header { display:flex; min-height:72px; align-items:center; gap:30px; padding:10px max(24px,calc((100vw - var(--content-max)) / 2)); border-bottom:1px solid var(--acd-border); background:var(--acd-white); }
.brand { display:inline-flex; flex:0 0 auto; align-items:center; } .brand img { display:block; width:236px; height:auto; }
.app-nav { display:flex; flex:1; align-items:center; gap:4px; } .app-nav > a { padding:9px 12px; border-radius:var(--radius-pill); color:var(--acd-ink); font-size:14px; text-decoration:none; } .app-nav > a:hover { background:var(--acd-ice); color:var(--acd-teal); }
.user-actions { display:flex; align-items:center; gap:12px; margin-left:auto; } .current-user { color:var(--acd-muted); font-size:14px; white-space:nowrap; } .user-actions form { margin:0; } .user-actions button { min-height:36px; padding:6px 13px; border-color:var(--acd-border); background:var(--acd-white); color:var(--acd-teal); font-size:13px; } .user-actions button:hover { border-color:var(--acd-teal); background:var(--acd-ice); color:var(--acd-teal-dark); }
.account-details { grid-template-columns:max-content 1fr; max-width:640px; margin:24px 0 32px; }
.mobile-nav { display:none; }
.app-nav > a { position:relative; display:inline-flex; align-items:center; gap:8px; }
.nav-icon { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; }
.nav-icon svg { width:17px; height:17px; }
.app-nav > a[aria-current="page"] { color:var(--acd-ink); background:var(--acd-ice); }
.app-nav > a[aria-current="page"]::after { position:absolute; right:12px; bottom:1px; left:12px; height:3px; border-radius:3px 3px 0 0; background:var(--acd-green); content:""; }
.mobile-nav__panel nav a { display:flex; align-items:center; gap:8px; }
.mobile-nav__panel nav a[aria-current="page"] { background:var(--acd-ice); box-shadow:inset 3px 0 0 var(--acd-green); }
@media (max-width:760px) { .app-header { position:relative; min-height:68px; align-items:center; flex-direction:row; gap:0; padding:10px 18px; } .brand img { width:210px; } .app-nav { display:none; } .mobile-nav { display:block; margin-left:auto; } .mobile-nav summary { display:flex; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; border:1px solid var(--acd-border); border-radius:50%; background:var(--acd-white); cursor:pointer; list-style:none; } .mobile-nav summary::-webkit-details-marker { display:none; } .mobile-nav summary span { display:block; width:18px; height:2px; border-radius:2px; background:var(--acd-teal); transition:transform .16s ease, opacity .16s ease; } .mobile-nav[open] summary { border-color:var(--acd-teal); background:var(--acd-ice); } .mobile-nav[open] summary span:first-child { transform:translateY(7px) rotate(45deg); } .mobile-nav[open] summary span:nth-child(2) { opacity:0; } .mobile-nav[open] summary span:last-child { transform:translateY(-7px) rotate(-45deg); } .mobile-nav__panel { position:absolute; top:calc(100% + 8px); right:18px; z-index:10; width:min(320px,calc(100vw - 36px)); padding:10px; border:1px solid var(--acd-border); border-radius:14px; background:var(--acd-white); box-shadow:0 16px 36px rgb(22 22 22 / 12%); } .mobile-nav__panel nav { display:grid; } .mobile-nav__panel nav a { padding:12px; border-radius:8px; color:var(--acd-ink); text-decoration:none; } .mobile-nav__panel nav a:hover { background:var(--acd-ice); color:var(--acd-teal); } .mobile-nav__panel .user-actions { align-items:stretch; flex-direction:column; gap:8px; margin:10px 2px 2px; padding:12px 10px 2px; border-top:1px solid var(--acd-border); } .mobile-nav__panel .current-user { white-space:normal; } .mobile-nav__panel .user-actions button { width:100%; } .account-details { grid-template-columns:1fr; } }