/* Gemeinsame App-Kopfleiste für auswertung.html und portal.html.
   Links Marke, Mitte Hauptnavigation (Segment-Stil), rechts Aktionen. Ruhig, hell, durchscheinend, eine Höhe überall. */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;height:60px;padding:0 max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:saturate(1.8) blur(16px);-webkit-backdrop-filter:saturate(1.8) blur(16px);border-bottom:1px solid var(--line)}
.appbar .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 0;text-decoration:none;color:var(--ink)}
.appbar .logo{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#14b8a6,#2563eb);box-shadow:0 2px 6px -2px rgba(37,99,235,.5)}
.appbar .logo svg{width:18px;height:18px}
.appbar .bt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.appbar .bt b{font:700 15px var(--display);letter-spacing:-.01em}
.appbar .bt small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.appnav{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--surface2);flex:none}
.appnav a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;font:600 13.5px var(--body);color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.appnav a:hover{color:var(--ink)}
.appnav a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(17,24,39,.08),0 1px 6px -2px rgba(17,24,39,.12)}
.appnav a:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.appnav a[hidden]{display:none}
.appnav .nb{min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font:700 10px/16px var(--body);text-align:center;padding:0 4px}
.appbar .acts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex:1 1 0;min-width:0}
.appbar .who{font:600 13px var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.appbar .tag{font:700 11px var(--body);padding:3px 8px;border-radius:999px;background:var(--surface2);color:var(--muted)}
.appbar .tag.master{background:color-mix(in srgb,#2563eb 12%,var(--surface));color:#2563eb}
.ibtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 13px var(--body);padding:7px 12px;border-radius:999px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;white-space:nowrap}
.ibtn:hover{background:var(--surface2)}
.ibtn svg{width:16px;height:16px;flex:none}
.ibtn.solid{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.ibtn.solid:hover{opacity:.9;background:var(--ink)}
.ibtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:1020px){.appbar .bt small,.appbar .who{display:none}}
@media (max-width:820px){
  .appbar{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;row-gap:8px}
  .appnav{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .appnav::-webkit-scrollbar{display:none}
  .appnav a{flex:1;justify-content:center}
  .ibtn .t{display:none}.ibtn{padding:8px}
}
@media print{.appbar{display:none}}
