:root{--bg:#f4f6fa;--ink:#21344c;--muted:#78899c;--navy:#17364d;--accent:#147f7b}.app-header{background:#18394e;box-shadow:0 3px 14px #17364d0a}.header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}.header-top .brand{gap:12px;font-size:17px;letter-spacing:.4px}.brand-mark{display:grid;place-items:center;width:37px;height:37px;background:#3cb1a529;color:#8dd8cd;border:1px solid #5ac2b443;border-radius:11px;font-size:26px;font-weight:500}.header-top .brand small{color:#94b7c8;letter-spacing:1px;font-size:10px;margin-top:4px}.header-top .account{gap:19px}.profile-link{color:#ddeaf1;font-size:12px}.nav-border{border-top:1px solid #ffffff10;background:#15354a}.main-nav{gap:25px;min-height:49px;align-items:stretch;position:relative;flex-wrap:wrap}.main-nav>a,.nav-menu>summary{font-size:12px;display:flex;align-items:center;min-height:47px;position:relative;color:#acc7d7;cursor:pointer;text-decoration:none}.main-nav>a:hover,.nav-menu>summary:hover{color:#fff}.main-nav .nav-current{color:#e5f8f6}.main-nav .nav-current:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#57c1b3;border-radius:3px 3px 0 0}.nav-menu{position:relative}.nav-menu>summary{list-style:none;gap:8px}.nav-menu>summary::-webkit-details-marker{display:none}.nav-menu-items{position:absolute;top:calc(100% + 4px);left:-15px;min-width:170px;padding:8px;background:#fff;border:1px solid #dfe9f0;border-radius:11px;box-shadow:0 15px 35px #17364d22;z-index:150}.nav-menu-items a{display:block;padding:10px 12px;font-size:12px;color:#37586e;border-radius:6px}.nav-menu-items a:hover{background:#edf6f5;text-decoration:none}.nav-admin{margin-left:auto;color:#83b9bc!important}.env-tag{border-color:#78929c65;border-radius:20px;font-size:10px;padding:3px 9px;background:#d7a75814;color:#e9d4a4}.env-production{background:#4acda219;color:#9dd5b9;border-color:#55b68c40}.env-staging{background:#bba6f020;color:#dfd4fc}.env-development{background:#4bb3e521;color:#b5ddeb}.page{padding-top:28px}.footer{display:flex;justify-content:space-between;gap:15px;padding-top:20px;font-size:11px;color:#95a2b0}.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #62b7ad;outline-offset:3px}.main-nav a,.profile-link{transition:color .15s}@media(max-width:1120px){.main-nav{gap:20px}.main-nav .nav-admin{margin-left:0}}@media(max-width:680px){.header-top{padding-top:15px;padding-bottom:14px;align-items:flex-start;flex-wrap:wrap;gap:14px;min-height:0}.header-top .brand{font-size:15px}.header-top .brand small{font-size:9px}.header-top .account{width:100%;justify-content:flex-start;gap:17px;font-size:11px}.main-nav{gap:0 19px;padding-bottom:4px}.main-nav>a,.nav-menu>summary{min-height:37px;font-size:11px}.footer{flex-wrap:wrap}.page{padding-top:20px}}
/* V0.16.4: long employee names and admin links must fit narrow screens. */
.header-top .account{min-width:0;flex-wrap:wrap;row-gap:10px}
.header-top .profile-link{max-width:100%;overflow-wrap:anywhere;white-space:normal}
@media(max-width:680px){.header-top .account{gap:10px 14px}.header-top .brand{max-width:100%;white-space:normal}.header-top .brand-mark{flex-shrink:0}}