.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: #13251b; color: #edf6f0; padding: 18px 14px; display: flex; flex-direction: column; z-index: 40; transition: width var(--transition), transform var(--transition); }
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar__brand { display: grid; grid-template-columns: 42px 1fr 34px; align-items: center; gap: 10px; padding: 6px 2px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg,#397d53,#1e5134); }
.brand-mark svg { width: 22px; }
.brand-copy { min-width: 0; }
.brand-copy strong, .brand-copy span { display: block; white-space: nowrap; overflow: hidden; transition: opacity var(--transition); }
.brand-copy strong { font-size: 15px; }
.brand-copy span { font-size: 11px; color: #a8b9ae; margin-top: 2px; }
.sidebar.collapsed .sidebar__brand { grid-template-columns: 1fr; justify-items: center; }
.sidebar.collapsed .brand-mark, .sidebar.collapsed .brand-copy { display: none; }
.sidebar.collapsed .sidebar__collapse { opacity: 1; pointer-events: auto; width: 38px; }
.sidebar__nav { display: grid; gap: 7px; padding-top: 18px; }
.nav-item { border: 0; background: transparent; color: #aebdb4; height: 46px; padding: 0 13px; border-radius: 12px; display: flex; gap: 12px; align-items: center; text-align: left; transition: var(--transition); }
.nav-item svg { width: 19px; min-width: 19px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { color: #fff; background: rgba(105,188,132,.16); }
.nav-item span { white-space: nowrap; transition: opacity var(--transition); }
.sidebar.collapsed .nav-item span { opacity: 0; width: 0; overflow: hidden; }
.sidebar__footer { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.device-pill { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.device-pill strong, .device-pill span { display: block; white-space: nowrap; overflow: hidden; }
.device-pill strong { font-size: 12px; }
.device-pill span { color: #94a69a; font-size: 10px; margin-top: 2px; }
.sidebar.collapsed .device-pill > div { display:none; }
.main { margin-left: var(--sidebar); min-height: 100vh; transition: margin-left var(--transition); }
body.sidebar-collapsed .main { margin-left: var(--sidebar-collapsed); }
.topbar { height: 82px; padding: 0 28px; background: rgba(244,247,245,.94); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 25; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid rgba(227,235,230,.85); }
.topbar__left, .topbar__right { display:flex; align-items:center; gap:14px; }
.topbar h1 { margin: 1px 0 0; font-size: 23px; letter-spacing: -.02em; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 800; color: var(--muted); }
.live-badge { display:flex; align-items:center; gap:9px; background: var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 12px; font-size:12px; font-weight:700; color:#526158; }
.page { display:none; padding: 24px 28px 34px; }
.page.active { display:block; }
.kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
.content-grid { display:grid; gap:18px; }
.overview-grid { grid-template-columns: minmax(0,1.7fr) minmax(320px,.85fr); margin-top:18px; }
.pump-page-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.control-info-grid { grid-template-columns: 1.1fr .9fr; margin-top:18px; }
.settings-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.settings-grid > article:last-child { grid-column: 1 / -1; }
.sidebar-backdrop { display:none; }
.mobile-menu { display:none !important; }