.app{display:grid;grid-template-columns:var(--side-width) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .24s var(--ease)}
.app.collapsed{grid-template-columns:var(--side-collapsed) minmax(0,1fr)}

.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:14px;padding:16px 12px;
  background:var(--surface-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--line);overflow:hidden;z-index:5;
}
.brand{display:flex;align-items:center;gap:11px;padding:4px 6px 10px;min-width:0}
.logo{width:36px;height:36px;flex:none;border-radius:10px;background:url('/logo.png') center/cover no-repeat;box-shadow:0 6px 16px rgba(37,99,235,.18)}
.brand-text{display:grid;min-width:0;line-height:1.2}
.brand-text strong{font-size:16px;font-weight:700;white-space:nowrap}
.brand-text span{font-size:12px;color:var(--muted);white-space:nowrap}

.nav{display:grid;gap:2px;align-content:start;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px}
.nav-group{margin:12px 10px 4px;font-size:12px;color:var(--muted);white-space:nowrap}
.nav-group:first-child{margin-top:0}
.nav-item{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;
  border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-2);text-align:left;font-weight:500;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.nav-item .icon{color:var(--muted);transition:color .16s ease}
.nav-item .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{background:var(--blue-soft);color:var(--text)}
.nav-item:hover .icon{color:var(--blue-deep)}
.nav-item.active{background:var(--surface);border-color:var(--line);color:var(--blue-deep);font-weight:650;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.nav-item.active .icon{color:var(--blue)}
.badge{min-width:24px;padding:1px 7px;border-radius:var(--radius-pill);background:var(--slate-soft);color:var(--text-2);font-size:11.5px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.nav-item.active .badge{background:var(--blue-soft);color:var(--blue-deep)}
.badge.red{background:var(--red-soft);color:var(--red-deep)}

.side-status{margin-top:auto;display:grid;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.side-status:empty{display:none}
.side-stat{display:flex;align-items:center;gap:10px;padding:9px 12px;min-width:0}
.side-stat+.side-stat{border-top:1px solid var(--line)}
.side-stat .icon{color:var(--muted)}
.side-stat div{display:grid;min-width:0;line-height:1.3}
.side-stat span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.side-stat strong{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.status-dot{width:8px;height:8px;flex:none;margin:0 5px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px rgba(148,163,184,.2)}
.status-dot.ok{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.status-dot.warn{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.status-dot.bad{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}

.app.collapsed .brand{justify-content:center;padding-inline:0}
.app.collapsed .brand-text,.app.collapsed .nav-item .label,.app.collapsed .nav-item .badge,.app.collapsed .side-status{display:none}
.app.collapsed .nav-group{height:1px;margin:10px 8px;background:var(--line);font-size:0;overflow:hidden}
.app.collapsed .nav-group:first-child{display:none}
.app.collapsed .nav-item{justify-content:center;padding-inline:0}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:4;height:var(--topbar-h);display:flex;align-items:center;gap:14px;padding:0 24px 0 16px;
  background:rgba(246,250,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--muted);white-space:nowrap}
.crumbs strong{color:var(--text);font-weight:650;font-size:15px}
.crumbs .sep{color:var(--faint)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{
  width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--text-2);text-decoration:none;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.icon-btn:hover{background:var(--surface);border-color:var(--line);color:var(--blue-deep)}
.icon-btn.spinning .icon{animation:spin .8s linear infinite}
.icon-btn[hidden]{display:none}
.global-refresh-slot{display:flex;min-width:0}
.global-refresh-slot:empty{display:none}

.view{flex:1;padding:22px 24px 32px;display:grid;gap:var(--gap);align-content:start;min-width:0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view>*{animation:rise .32s var(--ease) both}

@media(max-width:980px){
  .app,.app.collapsed{grid-template-columns:1fr}
  .side{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-group{display:none}
  .side-status{display:none}
  .topbar{position:relative}
  .view{padding:16px}
}