:root{ --dash-header-h:48px; --dash-sidebar-w:64px; --dash-bottomnav-h:58px; }
body.dash-body{ height:100%; overflow:hidden; padding-top:0; }
.dash-shell{ display:flex; flex-direction:column; height:100vh; }
.dash-header{
  height:var(--dash-header-h);
  min-height:var(--dash-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  background:var(--bg-sunken);
  border-bottom:1px solid var(--line);
  z-index:var(--z-dash-header);
}
.dash-header-left, .dash-header-right{ display:flex; align-items:center; gap:6px; }
.dash-header-right{ gap:8px; position:relative; }

.dash-header-back{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  width:36px; height:36px;
  margin-left:3px;
  border-radius:50%;
  background:transparent;
  transition:background .15s ease;
}
.dash-header-back svg{ width:28px; height:28px; display:block; }
.dash-header-back:hover, .dash-header-back:active{ background:var(--nav-active); }
.dash-header-back:focus-visible{ outline:2px solid var(--line-strong); outline-offset:1px; }

.dash-header-crumb-sep{
  flex-shrink:0;
  margin-right:6px;
  color:var(--line-strong);
  font-size:22px; line-height:1;
}
.apps-brand{
  display:flex; align-items:center; gap:6px;
}

.apps-brand > img, .apps-brand > svg{ display:block; border-radius:var(--radius-xs); width:28px; height:28px; }
.apps-brand-name{

  font-family:var(--font-display); font-size:18px; letter-spacing:0.015em; color:var(--ink);
}
.apps-brand-name-bold{ font-weight:600; color:var(--ink); }
.dash-body-row{ flex:1; display:flex; min-height:0; position:relative; }
.dash-sidebar{
  width:var(--dash-sidebar-w);
  flex-shrink:0;
  background:var(--bg-sunken);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow-y:auto;
  z-index:var(--z-dash-sidebar);
}
.dash-nav{ padding:10px 3px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.dash-nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  width:56px;
  min-height:56px;
  border-radius:10px;

  color:var(--ink);
  text-decoration:none;
  font-size:11px;
  font-weight:400;
  text-align:center;
  transition:background .15s ease;
}
.dash-nav-item:hover{ background:var(--nav-active); }
.dash-nav-item.is-active{ background:var(--nav-active); color:var(--nav-active-ink); font-weight:500; }

.dash-nav-item .dash-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px; position:relative; top:2px; }
.dash-nav-item .dash-icon svg{ width:24px; height:24px; display:block; }
.dash-main{
  flex:1; min-width:0;
  overflow-y:auto;
  background:var(--bg);
  padding:10px 16px 60px;
}
.dash-view{ display:none; max-width:720px; }
.dash-view.is-active{ display:block; }

.dash-view--wide{ max-width:calc(var(--container-max) - var(--container-gap) * 2); }

.dash-view h1{ font-size:19px; margin-bottom:5px; }

@media (max-width:820px){
  .dash-sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%;
    height:calc(var(--dash-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    border-right:none;
    border-top:1px solid var(--line);
    box-shadow:0 -4px 20px rgba(0,0,0,0.12);
    overflow:visible;
  }
  .dash-nav{
    flex-direction:row;
    align-items:stretch;
    width:100%;
    height:100%;
    padding:0 4px;
    gap:0;
  }

  .dash-nav > *{
    flex:1 1 0%;
    min-width:0;
  }
  .dash-nav-item{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2px;
    height:100%;
    padding:6px 4px;
    border-radius:0;
    font-size:10.5px;
  }
  .dash-label{ line-height:1; }
  .dash-main{
    padding:10px 16px calc(var(--dash-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 24px);
  }
}
@media (max-width:430px){
  .dash-header{ padding:0 10px; }
}