/* Reset, typografie, shell-layout, navigatie. */
*,*::before,*::after{box-sizing:border-box} *{margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;padding:0}
a{color:inherit} input,select,textarea{font:inherit}
h1,h2,h3{line-height:1.2}
.ic{width:1.35em;height:1.35em;flex:none;vertical-align:-.15em}
.muted{color:var(--muted)} a.muted{text-decoration:underline} .sm{font-size:var(--fs-sm)}

/* Shell: mobiel = outlet + tabbar; desktop = sidebar + outlet */
#app{min-height:100dvh;display:grid;grid-template-columns:1fr}
.side{display:none}
.outlet{max-width:var(--content-max);margin:0 auto;width:100%;padding:var(--sp-4) var(--sp-4) calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4))}
.tabbar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;align-items:center;justify-content:space-around;background:var(--surface);border-top:1px solid var(--border);z-index:40}
.tab{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);border-radius:var(--r-sm)}
.tab.active{color:var(--accent)}
.tab--fab{background:var(--accent);color:var(--on-accent);width:52px;height:52px;border-radius:var(--r-pill);box-shadow:var(--shadow)}
.tab--fab .ic{width:1.5em;height:1.5em}

@media(min-width:960px){
  #app{grid-template-columns:var(--sidebar) 1fr}
  .tabbar{display:none}
  .outlet{padding:var(--sp-7) var(--sp-6)}
  .side{display:flex;flex-direction:column;gap:2px;padding:var(--sp-5) var(--sp-3);border-right:1px solid var(--border);position:sticky;top:0;height:100dvh;background:var(--surface)}
}
.side__brand{font-size:var(--fs-md);font-weight:700;color:var(--accent);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);display:flex;gap:.4em;align-items:center}
.navitem{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--muted);font-weight:500;width:100%;text-align:left}
.navitem:hover{background:var(--surface-2);color:var(--text)}
.navitem.active{background:var(--accent-weak);color:var(--accent)}
.side__grp{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-4)}
.side__lbl{font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:.08em;color:var(--c,var(--muted));padding:var(--sp-1) var(--sp-3);font-weight:600}
.side__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-1)}
.syncst{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-tiny);color:var(--muted)}
.syncst .dot{width:8px;height:8px;border-radius:50%;background:var(--success);transition:background var(--dur)}
.syncst[data-state="offline"] .dot{background:var(--faint)} .syncst[data-state="pending"] .dot{background:var(--warning)}