html, body { margin: 0; height: 100%; font-family: 'Segoe UI', Roboto, Arial, sans-serif; background: #f8fafc; }

.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar */
.sidebar {
    width: 220px; flex-shrink: 0; background: #0f172a; color: #cbd5e1;
    display: flex; flex-direction: column; height: 100%;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .5rem; padding: 1rem 1.1rem;
    font-weight: 700; font-size: 1.05rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-nav { flex: 1; padding: .75rem .5rem; }
.sidebar-link {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem;
    border-radius: 6px; color: #cbd5e1; text-decoration: none; font-size: .88rem;
    margin-bottom: .15rem; transition: background .12s, color .12s;
}
.sidebar-link i { width: 18px; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link.active { background: #2563eb; color: #fff; }

.sidebar-profile { border-top: 1px solid rgba(255,255,255,.08); padding: .75rem .9rem; }
.sidebar-profile-row { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.sidebar-profile-row i { font-size: 1.4rem; color: #64748b; }
.sidebar-profile-name { font-size: .82rem; font-weight: 600; color: #fff; }
.sidebar-profile-role { font-size: .68rem; color: #94a3b8; }
.sidebar-logout { margin-bottom: 0; }

/* Main */
.app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem 1.25rem; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.topbar-conn { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; }
.conn-up .conn-dot   { background: #22c55e; }
.conn-up             { color: #15803d; }
.conn-down .conn-dot { background: #ef4444; }
.conn-down           { color: #b91c1c; }

.topbar-utc {
    display: flex; align-items: center; gap: .3rem;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: .25rem .6rem; font-size: .72rem;
}
.topbar-utc-label { color: #64748b; font-weight: 600; letter-spacing: .04em; }
.topbar-utc-value { color: #0f172a; font-size: .78rem; letter-spacing: .03em; }

.page-content { flex: 1; overflow: auto; padding: 1.5rem; }

@media (max-width: 720px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: row; align-items: center; height: auto; }
    .sidebar-brand { border-bottom: none; padding: .6rem .9rem; }
    .sidebar-nav { display: flex; flex: 1; padding: 0; }
    .sidebar-profile { display: none; }
}