*{
 box-sizing:border-box}
body{
 margin:0;
 font-family:var(--font-sans);
 color:var(--text);
 background:var(--brand-background);
 line-height:1.5}
a{
 color:var(--brand-primary)}
.skip-link{
 position:fixed;
 top:-80px;
 left:16px;
 padding:12px;
 background:var(--surface);
 z-index:10}
.skip-link:focus{
 top:12px}
:focus-visible{
 outline:3px solid var(--brand-primary);
 outline-offset:4px}
.app-shell{
 display:grid;
 grid-template-columns:220px minmax(0,1fr);
 min-height:100dvh}
.sidebar{
 padding:var(--space-6);
 background:var(--sidebar-bg);
 color:var(--sidebar-text)}
.brand{
 display:flex;
 align-items:center;
 gap:12px;
 font-size:20px;
 overflow-wrap:anywhere}
.brand img{
 width:36px;
 height:36px;
 object-fit:contain}
.shell-marker{
 margin-top:32px;
 border-radius:var(--radius-sm);
 padding:12px;
 background:rgb(255 255 255 / 9%)}
.sidebar-caption{
 font-size:13px;
 color:#b8c9d8;
 margin-top:24px}
.main-shell{
 min-width:0}
.topbar{
 min-height:72px;
 padding:16px 32px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 background:var(--surface);
 border-bottom:1px solid var(--border);
 flex-wrap:wrap}
#connection-status{
 font-size:13px;
 color:var(--muted)}
#connection-status[data-state=offline]{
 color:#8b4216}
.mobile-brand,.mobile-nav{
 display:none}
main{
 padding:32px}
.foundation-panel{
 max-width:780px;
 padding:32px;
 border:1px solid var(--border);
 border-radius:var(--radius-lg);
 box-shadow:var(--shadow-soft);
 background:var(--surface)}
h1{
 font-size:clamp(24px,4vw,32px);
 line-height:1.2;
 margin:8px 0 20px}
.eyebrow{
 color:var(--brand-primary);
 font-weight:700;
 margin:0}
.foundation-panel p{
 max-width:60ch}
.foundation-panel #pwa-status{
 color:var(--muted);
 font-size:14px}
@media(max-width:767px){
 .app-shell{
 grid-template-columns:1fr}
.sidebar{
 display:none}
.topbar{
 padding:16px;
 gap:8px}
.topbar>span:first-of-type{
 display:none}
.mobile-brand{
 display:block;
 overflow-wrap:anywhere}
main{
 padding:20px 16px 90px}
.foundation-panel{
 padding:24px 20px}
.mobile-nav{
 display:flex;
 position:fixed;
 inset:auto 0 0;
 background:var(--sidebar-bg);
 color:var(--sidebar-text);
 justify-content:center;
 padding:16px 16px calc(16px + env(safe-area-inset-bottom));
 font-size:14px}
}
@media(min-width:1600px){
 main{
 padding:48px}
.foundation-panel{
 max-width:1000px}
}