.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; width: 246px; flex-direction: column; padding: 1.45rem 1rem 1rem; background: #0e141d; border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: .75rem; padding: .2rem .55rem 1.9rem; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--blue), #2563eb); box-shadow: 0 5px 20px #3b82f633; font-weight: 850; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .88rem; }
.brand small { margin-top: .15rem; color: var(--muted); font-size: .6rem; letter-spacing: .16em; }
.nav-label { padding: 0 .65rem; color: #6f7c90; font-size: .65rem; font-weight: 750; letter-spacing: .14em; }
.nav-list { display: grid; gap: .3rem; }
.nav-item { display: flex; align-items: center; gap: .8rem; min-height: 43px; padding: .7rem .8rem; border: 1px solid transparent; border-radius: 11px; color: var(--muted); background: transparent; text-align: left; cursor: pointer; transition: color .18s, background .18s, border-color .18s, transform .18s; }
.nav-item span { width: 20px; color: #8492a8; font-size: 1.05rem; text-align: center; }
.nav-item:hover { color: var(--text); background: #182231; }
.nav-item:active { transform: scale(.985); }
.nav-item.active { color: #fff; background: #1b2b45; border-color: #2c4c78; box-shadow: inset 3px 0 var(--blue); }
.nav-item.active span { color: #60a5fa; }
.sidebar-footer { display: flex; align-items: center; gap: .55rem; margin-top: auto; padding: 1rem .55rem .3rem; color: #8390a3; font-size: .7rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px #fbbf2433; }
.main-content { max-width: 1700px; margin-left: 246px; padding: 1.7rem clamp(1.2rem, 3vw, 2.7rem) 1rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid #222c3a; }
.top-actions { display: flex; align-items: center; gap: .75rem; }
.welcome-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.7rem 0 1.45rem; }
.page-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 .5rem; color: #718096; font-size: .7rem; }

.refresh-button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 38px; }
.refresh-button.is-refreshing { opacity: .75; }
.refresh-button.is-refreshing::first-letter { display: inline-block; animation: pcc-refresh-spin .8s linear infinite; }
@keyframes pcc-refresh-spin { to { transform: rotate(360deg); } }