/* Shared application header: every route uses the same DOM and layout tokens.
   Page CSS must not style this component. Contract and acceptance: design.md. */
:root{
 --app-header-height:74px;--app-header-padding:30px;--app-header-actions-gap:10px;
 --app-header-brand-gap:11px;--app-header-brand-size:16px;--app-header-tag-size:8px;
 --app-header-mark-size:43px;--app-header-mark-font:29px;--app-header-tag-tracking:.1em;
 --app-header-touch:44px;--app-header-safe-top:env(safe-area-inset-top,0px);
}
#app>.topbar{
 position:sticky;top:0;z-index:20;display:flex;align-items:center;
 justify-content:space-between;gap:8px;box-sizing:border-box;
 height:calc(var(--app-header-height) + var(--app-header-safe-top));
 min-height:calc(var(--app-header-height) + var(--app-header-safe-top));
 padding:var(--app-header-safe-top) var(--app-header-padding) 0;
 background:linear-gradient(110deg,#1b141c,#12141a 55%);
 border-bottom:1px solid var(--crimson-edge,#59303d);
}
#app>.topbar .brandmark{display:inline-flex;align-items:center;gap:var(--app-header-brand-gap);min-height:44px;flex:0 0 auto;line-height:1.25}
#app>.topbar .brandmark>b{width:var(--app-header-mark-size);height:var(--app-header-mark-size);font-size:var(--app-header-mark-font)!important;flex:0 0 auto}
#app>.topbar .brandmark>span{font-size:var(--app-header-brand-size);font-weight:700;letter-spacing:2px;line-height:1.25}
#app>.topbar .brandmark small{display:block;margin-top:5px;font-size:var(--app-header-tag-size);line-height:1.25;letter-spacing:var(--app-header-tag-tracking);font-weight:500;white-space:nowrap}
#app>.topbar .header-right{display:flex;align-items:center;gap:var(--app-header-actions-gap);flex:0 0 auto}
#app>.topbar #syncStatus{display:block;width:180px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted);text-align:right}
#app>.topbar .icon-button,#app>.topbar .avatar{
 width:var(--app-header-touch);height:var(--app-header-touch);
 min-width:var(--app-header-touch);min-height:var(--app-header-touch);
 padding:0;flex:0 0 var(--app-header-touch);display:inline-grid;place-items:center;
}
#app>.topbar .avatar{border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;transition:background-color 160ms,border-color 160ms,transform 120ms}
@media(max-width:850px){
 :root{--app-header-height:66px;--app-header-padding:18px;--app-header-brand-size:14px;--app-header-tag-size:7px;--app-header-mark-size:37px;--app-header-mark-font:25px}
 #app>.topbar #syncStatus{width:140px;max-width:140px;font-size:10px}
}
@media(max-width:580px){
 :root{--app-header-height:62px;--app-header-padding:14px;--app-header-actions-gap:6px;--app-header-brand-gap:9px;--app-header-tag-tracking:.03em}
 #app>.topbar #syncStatus{display:none}
}
@media(max-width:380px){
 :root{--app-header-padding:10px;--app-header-actions-gap:3px;--app-header-brand-size:12px}
 #app>.topbar .brandmark small{display:none}
}
@media(forced-colors:active){#app>.topbar{background:Canvas;color:CanvasText;border-color:CanvasText}}