/* Penpot shell: 60px header; 64px navigation plus device safe area. */
:root{--safe-area-bottom:env(safe-area-inset-bottom,0px);--navigation-height:64px;--navigation-clearance:0px}
body.has-navigation{--navigation-clearance:calc(var(--navigation-height) + var(--safe-area-bottom))}
html{scroll-padding-bottom:calc(var(--navigation-height) + var(--safe-area-bottom) + var(--space-16))}
.app-header{min-height:calc(60px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--space-12) 0;display:flex;align-items:center;gap:var(--space-8);background:var(--brand-primary);color:var(--text-inverse)}
.identity{display:flex;align-items:center;gap:var(--space-8);min-width:0}
.identity strong{font:var(--type-screen)}
.monogram{font:var(--type-section)}
.environment{font:var(--type-label);background:var(--warning-subtle);color:var(--warning-strong);border-radius:var(--radius-full);padding:2px var(--space-8);white-space:nowrap}
#connection{font:var(--type-small);margin-left:auto;min-width:0;overflow-wrap:anywhere}
.account-container{position:relative;flex:none;margin-left:auto}
.app-header #account-trigger{width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--text-inverse);font:400 20px/1.2 var(--font-body)}
.app-header #account-trigger:focus-visible{outline-color:var(--text-inverse)}
.account-menu{position:absolute;right:0;top:calc(100% + var(--space-4));z-index:10;width:220px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 80px - var(--navigation-clearance));overflow-y:auto;padding:var(--space-4);background:var(--background-elevated);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-medium);box-shadow:0 4px 16px #20231f26}
.account-menu button,.sheet-destinations button{display:flex;justify-content:flex-start;min-height:48px;width:100%;padding:var(--space-8) var(--space-12);font:var(--type-body);color:var(--text-primary);border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
.account-menu button:hover,.sheet-destinations button:hover{background:var(--brand-primary-subtle)}
.layout{min-height:calc(100dvh - 60px);padding-bottom:calc(var(--navigation-clearance) + var(--space-16))}
.bottom-navigation{position:fixed;inset:auto 0 0;z-index:6;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(var(--navigation-height) + var(--safe-area-bottom));padding:0 0 var(--safe-area-bottom);background:var(--background-elevated);border-top:1px solid var(--border-default)}
.bottom-navigation button{min-width:0;width:100%;min-height:0;height:63px;margin:0;padding:var(--space-4);border:0;border-radius:0;font:var(--type-label);color:var(--text-muted);background:transparent;display:flex;flex-direction:column;gap:var(--space-4);justify-content:center;overflow-wrap:anywhere}
.bottom-navigation button.active{color:var(--brand-primary)}
.bottom-navigation button.active::before{content:'';display:block;width:24px;height:3px;flex:none;border-radius:var(--radius-full);background:var(--brand-primary)}
.bottom-navigation button:hover{background:var(--background-surface)}
.bottom-navigation button:focus-visible{outline-offset:-3px}
#toasts{bottom:calc(var(--navigation-clearance) + var(--space-16))}
dialog.more-sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:620px;max-height:calc(100dvh - 16px);border:0;border-radius:var(--radius-large) var(--radius-large) 0 0;padding:var(--space-8) var(--space-16) calc(var(--space-16) + var(--safe-area-bottom));background:var(--background-elevated)}
.sheet-handle{width:32px;height:4px;background:var(--border-strong);border-radius:var(--radius-full);margin:0 auto var(--space-4)}
.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-4)}
.more-sheet .sheet-heading h2{margin:0;font:var(--type-section)}
.sheet-heading button{min-height:44px;width:44px;padding:0;border:0;color:var(--text-secondary);font-size:24px}
.sheet-destinations [aria-current=page]{color:var(--brand-primary);background:var(--brand-primary-subtle)}
@media(max-width:359px){.app-header{column-gap:var(--space-4)}#connection{font-size:12px}.identity{gap:var(--space-4)}}