@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #15211d; --muted: #718078; --paper: #f4f6f1; --panel: #fff; --line: #dfe6de; --green: #1f7a5c; --lime: #c9ec89; --orange: #df7e40; --red: #c65b4d; --shadow: 0 18px 50px rgba(33, 57, 44, .07); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, sans-serif; }
button, select { font: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 238px; flex: 0 0 238px; background: #17382c; color: #f3f7eb; padding: 30px 20px 22px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; padding: 0 10px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--lime); color: #17382c; font-weight: 800; border-radius: 9px; }
.brand strong, .brand small { display: block; } .brand strong { font-size: 15px; letter-spacing: .02em; } .brand small { color: #a9c0b3; font-size: 10px; margin-top: 2px; }
.nav-list { margin-top: 74px; display: grid; gap: 7px; }
.nav-item { color: #a9c0b3; text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 12px 11px; font-size: 12px; font-weight: 700; border-radius: 8px; }
.nav-item:hover, .nav-item.is-active { color: #fff; background: rgba(255,255,255,.09); } .nav-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; opacity: .65; }
.sidebar-note { margin-top: auto; display: flex; gap: 10px; border-top: 1px solid rgba(255,255,255,.13); padding: 18px 10px 0; } .sidebar-note strong, .sidebar-note small { display: block; } .sidebar-note strong { font-size: 11px; } .sidebar-note small { color: #a9c0b3; font-size: 10px; margin-top: 3px; }
.pulse-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(201,236,137,.12); }
.main-content { width: min(100%, 1420px); padding: 36px clamp(22px, 5vw, 74px) 28px; margin: 0 auto; }
.topbar, .section-heading, .panel-heading, .hero-strip, .toolbar, .status-line { display: flex; align-items: center; justify-content: space-between; }
.topbar { align-items: flex-start; margin-bottom: 28px; } h1, h2, p { margin: 0; } h1 { font-size: clamp(28px, 4vw, 43px); letter-spacing: -.055em; line-height: 1; } h2 { font-size: 19px; letter-spacing: -.035em; } .eyebrow { color: var(--green); font: 500 10px/1.4 'DM Mono', monospace; letter-spacing: .12em; margin-bottom: 9px; }
.toolbar { gap: 10px; } .device-select-wrap { color: var(--muted); font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; } .device-select-wrap span { display: block; margin-bottom: 6px; } select { min-width: 150px; padding: 9px 31px 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; }
.icon-button { width: 38px; height: 38px; margin-top: 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--green); font-size: 22px; cursor: pointer; } .icon-button:hover { background: var(--green); color: white; }
.status-banner { padding: 11px 15px; border-left: 3px solid var(--orange); margin-bottom: 18px; background: #fff8ee; color: #77512f; font-size: 12px; } .status-banner[hidden] { display: none; }
.hero-strip { background: var(--green); color: #f7fbf3; border-radius: 11px; padding: 28px 32px; min-height: 154px; box-shadow: var(--shadow); } .status-line { justify-content: flex-start; gap: 8px; color: var(--lime); font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); } .status-dot.offline { background: #eea087; } .hero-strip h2 { margin-top: 14px; font-size: 27px; letter-spacing: -.05em; } .hero-strip p { color: #bad0c3; font-size: 12px; margin-top: 7px; } .hero-reading { text-align: right; } .hero-reading span, .hero-reading small { display: block; color: #bad0c3; font: 500 10px 'DM Mono', monospace; } .hero-reading strong { display: block; margin: 7px 0; font: 500 28px 'DM Mono', monospace; color: var(--lime); }
.section-block { margin-top: 43px; } .section-count { color: var(--muted); font: 500 10px 'DM Mono', monospace; } .metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .metric-card, .loading-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 17px; min-height: 126px; } .metric-card { position: relative; } .metric-card:before { content: ''; position: absolute; left: 0; top: 17px; bottom: 17px; width: 3px; border-radius: 4px; background: var(--lime); } .metric-label { color: var(--muted); font-size: 11px; font-weight: 700; padding-left: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metric-value { margin: 19px 0 6px; font: 500 27px 'DM Mono', monospace; letter-spacing: -.07em; } .metric-unit { color: var(--muted); font: 400 10px 'DM Mono', monospace; } .metric-time { float: right; color: #a2afa7; font-size: 10px; margin-top: 2px; } .loading-card { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 42px; } .panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 23px; min-width: 0; } .sensor-list, .activity-list { margin-top: 18px; } .sensor-row, .activity-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); } .sensor-row:first-child, .activity-row:first-child { border-top: 0; } .sensor-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; background: #eef7df; color: var(--green); font: 500 12px 'DM Mono', monospace; } .sensor-copy { flex: 1; min-width: 0; } .sensor-copy strong, .sensor-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sensor-copy strong { font-size: 12px; } .sensor-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; } .health { color: var(--green); font: 500 10px 'DM Mono', monospace; } .health.offline { color: var(--red); } .activity-row { align-items: flex-start; } .activity-bar { width: 3px; min-height: 32px; border-radius: 3px; background: var(--lime); } .activity-bar.error { background: var(--red); } .activity-copy { flex: 1; min-width: 0; } .activity-copy strong { display: block; font-size: 11px; } .activity-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .activity-time { color: var(--muted); font: 400 10px 'DM Mono', monospace; white-space: nowrap; } .text-link { color: var(--green); font-size: 10px; font-weight: 800; text-decoration: none; } .loading-row { color: var(--muted); font-size: 11px; padding: 15px 0; }
.feature-grid { display: grid; grid-template-columns: 1.05fr 1.35fr .9fr; gap: 18px; margin-top: 18px; } .feature-grid .panel { min-height: 276px; } .gauges-row { display: flex; justify-content: space-around; gap: 20px; margin-top: 25px; } .gauge-wrap { text-align: center; flex: 1; } .gauge { --gauge-value: 68%; width: 128px; height: 128px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#278cef var(--gauge-value), #e2eaf2 0); position: relative; } .gauge:after { content: ''; position: absolute; inset: 11px; background: #fff; border-radius: 50%; } .gauge-teal { background: conic-gradient(#20b0a4 var(--gauge-value), #e2eaf2 0); } .gauge-inner { position: relative; z-index: 1; } .gauge-inner strong, .gauge-inner small { display: block; } .gauge-inner strong { font: 500 24px 'DM Mono', monospace; letter-spacing: -.08em; } .gauge-inner small { color: var(--muted); font: 500 10px 'DM Mono', monospace; margin-top: 3px; } .gauge-wrap b { display: block; font-size: 11px; } .gauge-wrap > span { display: block; color: var(--muted); font-size: 9px; margin-top: 5px; }
.system-visual { height: 145px; margin-top: 19px; border-radius: 8px; background: linear-gradient(180deg, #edf8f3 0 62%, #d8e8d8 62% 100%); position: relative; overflow: hidden; } .system-machine { position: absolute; left: 22%; top: 40px; width: 105px; height: 67px; border: 2px solid #879f93; border-radius: 5px; background: #f7fbf5; display: grid; place-content: center; text-align: center; box-shadow: 5px 7px 0 rgba(82, 119, 99, .15); } .system-machine span { color: var(--green); font: 800 12px Manrope, sans-serif; } .system-machine small { color: var(--muted); font: 500 7px 'DM Mono', monospace; margin-top: 5px; } .system-tank { position: absolute; right: 15%; bottom: 16px; width: 74px; height: 82px; border: 2px solid #3d9b9b; border-radius: 9px 9px 15px 15px; background: linear-gradient(#8ed9ea 0 68%, #e7f8f8 68%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; } .system-tank span { font: 500 7px 'DM Mono', monospace; color: #196f76; background: rgba(255,255,255,.65); padding: 3px; } .system-pipe { position: absolute; left: 38%; right: 24%; bottom: 38px; border-bottom: 4px solid #2994cf; } .air-flow { position: absolute; left: 7%; top: 67px; color: #2994cf; font: 500 8px 'DM Mono', monospace; } .air-flow:after { content: '→ →'; display: block; margin-top: 8px; font-size: 15px; letter-spacing: 4px; } .system-caption { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 15px; } .system-caption strong { color: var(--green); }
.device-outline { position: absolute; inset: 8px 10px auto; width: calc(100% - 20px); height: 125px; object-fit: contain; opacity: .16; pointer-events: none; }
.hero-strip { position: relative; overflow: hidden; }
.overview-device-background { position: absolute; z-index: 0; right: 20px; top: 5px; width: 390px; height: 145px; object-fit: contain; opacity: .13; pointer-events: none; }
.hero-strip > div { position: relative; z-index: 1; }
.component-list { margin-top: 15px; } .component-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); } .component-row:first-child { border-top: 0; } .component-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #eef2fb; color: #4580c4; font: 700 11px 'DM Mono', monospace; } .component-copy { flex: 1; } .component-copy strong, .component-copy small { display: block; } .component-copy strong { font-size: 11px; } .component-copy small { color: var(--muted); font-size: 9px; margin-top: 3px; } .component-status { color: var(--green); font: 500 9px 'DM Mono', monospace; }
.trend-panel { margin-top: 18px; } .trend-chart { height: 155px; margin-top: 20px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, #edf1ed 38px); position: relative; overflow: hidden; } .trend-line { position: absolute; left: 0; right: 0; bottom: 28px; height: 78px; } .trend-line svg { width: 100%; height: 100%; overflow: visible; } .trend-axis { position: absolute; bottom: 7px; left: 0; right: 0; display: flex; justify-content: space-between; color: #a5b0aa; font: 9px 'DM Mono', monospace; }
.page-footer { display: flex; justify-content: space-between; margin-top: 50px; color: #9aa79f; font: 500 9px 'DM Mono', monospace; letter-spacing: .1em; }
@media (max-width: 900px) { .sidebar { width: 70px; flex-basis: 70px; padding: 24px 10px; } .brand { padding: 0; justify-content: center; } .brand > span:last-child, .nav-item:not(.is-active), .nav-item { font-size: 0; justify-content: center; } .nav-item { padding: 14px 0; } .nav-item.is-active { font-size: 0; } .sidebar-note { padding-left: 0; padding-right: 0; justify-content: center; } .sidebar-note > div { display: none; } .main-content { padding-left: 25px; padding-right: 25px; } }
@media (max-width: 1100px) { .feature-grid { grid-template-columns: 1fr 1fr; } .controls-panel { grid-column: 1 / -1; } }
@media (max-width: 680px) { .topbar { gap: 20px; flex-direction: column; } .toolbar { width: 100%; } .device-select-wrap { flex: 1; } select { width: 100%; } .hero-strip { align-items: flex-start; gap: 26px; flex-direction: column; padding: 24px; } .hero-reading { text-align: left; } .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-grid, .feature-grid { grid-template-columns: 1fr; } .controls-panel { grid-column: auto; } .gauges-row { gap: 5px; } .gauge { width: 112px; height: 112px; } .page-footer { gap: 10px; flex-direction: column; } }

/* ANEMONE / Carsoneers light violet identity */
:root { --ink: #261b45; --muted: #817997; --paper: #fbfaff; --panel: #ffffff; --line: #e8e0f2; --green: #7048b8; --lime: #dbcaff; --orange: #d8894e; --red: #c85b78; --shadow: 0 18px 50px rgba(83, 54, 131, .09); }
body { background: radial-gradient(circle at 85% 2%, #f1eaff 0, transparent 28%), var(--paper); }
.sidebar { background: #332052; color: #fbf9ff; }
.brand-mark { background: #dbcaff; color: #332052; }
.brand small, .sidebar-note small { color: #c4b8dd; }
.nav-item { color: #c4b8dd; }
.nav-item:hover, .nav-item.is-active { color: #fff; background: rgba(219, 202, 255, .16); }
.pulse-dot { background: #dbcaff; box-shadow: 0 0 0 5px rgba(219, 202, 255, .14); }
.topbar h1, h2 { color: var(--ink); }
.eyebrow, .text-link, .system-caption strong, .component-status, .health { color: var(--green); }
select, .icon-button { border-color: var(--line); box-shadow: 0 5px 16px rgba(83, 54, 131, .04); }
.icon-button { color: var(--green); }
.icon-button:hover { background: var(--green); }
.hero-strip { background: linear-gradient(120deg, #493078, #7048b8); }
.status-line, .hero-reading strong { color: #e4d8ff; }
.hero-strip p, .hero-reading span, .hero-reading small { color: #d7cbea; }
.metric-card, .loading-card, .panel { border-color: var(--line); box-shadow: 0 8px 25px rgba(83, 54, 131, .035); }
.metric-card:before { background: #b493ef; }
.sensor-icon { background: #f0eaff; color: var(--green); }
.activity-bar { background: #b493ef; }
.gauge { background: conic-gradient(#8256cf var(--gauge-value), #ece6f5 0); }
.gauge-teal { background: conic-gradient(#a27add var(--gauge-value), #ece6f5 0); }
.system-visual { background: linear-gradient(180deg, #f4efff 0 62%, #e9e0f5 62% 100%); }
.system-machine { border-color: #b9a4da; background: #fff; box-shadow: 5px 7px 0 rgba(112, 72, 184, .12); }
.system-machine span { color: var(--green); }
.system-pipe { border-color: #8e68cf; }
.air-flow { color: #8e68cf; }
.system-tank { border-color: #9c78d4; background: linear-gradient(#c7b2ee 0 68%, #f0eafd 68%); }
.system-tank span { color: #5f3b9c; }
.component-icon { background: #f0eaff; color: #7951bd; }
.trend-chart { background: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, #eee8f5 38px); }
.page-footer { color: #9d91b3; }

/* Compact product UI: higher information density with a restrained violet accent */
body { background: #fcfcfd; }
.sidebar { width: 210px; flex-basis: 210px; background: #ffffff; color: #332052; border-right: 1px solid #e8e5ee; padding: 24px 15px 18px; }
.brand { padding: 0 8px; } .brand-mark { width: 32px; height: 32px; } .brand strong { color: #332052; } .brand small { color: #8d7ba8; }
.nav-list { margin-top: 48px; gap: 4px; } .nav-item { color: #786790; padding: 10px 11px; } .nav-item:hover, .nav-item.is-active { color: #50318b; background: #f0eafb; }
.sidebar-note { border-top-color: #e8e5ee; padding-top: 14px; } .sidebar-note strong { color: #50318b; } .sidebar-note small { color: #8d7ba8; } .pulse-dot { background: #8058bd; box-shadow: 0 0 0 5px rgba(128, 88, 189, .12); }
.main-content { padding: 27px clamp(18px, 3vw, 42px) 22px; }
.topbar { margin-bottom: 19px; } h1 { font-size: clamp(27px, 3.2vw, 38px); } h2 { font-size: 17px; } .eyebrow { margin-bottom: 6px; }
.hero-strip { min-height: 116px; padding: 21px 25px; border-radius: 9px; background: linear-gradient(110deg, #ffffff 0%, #fbf9fe 70%, #f3edfc 100%); color: var(--ink); border: 1px solid #e8e0f2; border-left: 4px solid #8058bd; box-shadow: 0 14px 32px rgba(83, 54, 131, .07); } .hero-strip h2 { margin-top: 9px; font-size: 23px; color: var(--ink); } .hero-strip p { margin-top: 4px; color: var(--muted); } .hero-reading strong { margin: 4px 0; font-size: 24px; color: #7048b8; } .hero-reading span, .hero-reading small { color: var(--muted); } .hero-strip .status-line { color: #7048b8; } .hero-strip .status-dot { background: #8058bd; }
.hero-strip .status-dot.stale { background: #d39543; }
.hero-strip .status-dot.pending { visibility: hidden; }
.section-block { margin-top: 28px; } .metrics-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 11px; } .metric-card, .loading-card { min-height: 108px; padding: 14px; border-radius: 7px; } .metric-card:before { top: 13px; bottom: 13px; } .metric-label { font-size: 10px; } .metric-value { margin: 14px 0 4px; font-size: 23px; } .metric-unit, .metric-time { font-size: 9px; }
.feature-grid { gap: 13px; margin-top: 15px; } .feature-grid .panel { min-height: 238px; } .content-grid { gap: 13px; margin-top: 25px; } .panel { padding: 17px; border-radius: 7px; }
.gauges-row { margin-top: 18px; } .gauge { width: 108px; height: 108px; margin-bottom: 8px; } .gauge:after { inset: 9px; } .gauge-inner strong { font-size: 21px; }
.system-visual { height: 116px; margin-top: 13px; } .system-machine { top: 29px; height: 55px; } .system-tank { height: 66px; } .system-pipe { bottom: 30px; }
.sensor-list, .activity-list, .component-list { margin-top: 11px; } .sensor-row, .activity-row, .component-row { padding: 9px 0; } .sensor-icon, .component-icon { width: 27px; height: 27px; } .trend-panel { margin-top: 13px; } .trend-chart { margin-top: 13px; height: 128px; }
.page-footer { margin-top: 28px; }
@media (max-width: 1180px) { .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sidebar { width: 68px; flex-basis: 68px; } .main-content { padding-left: 20px; padding-right: 20px; } .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .main-content { padding: 20px 14px; } .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-strip { padding: 19px; } }

/* iPhone layout: turn the rail into a compact top navigation and avoid horizontal density. */
@media (max-width: 680px) {
	html, body { min-width: 0; overflow-x: hidden; }
	.app-shell { display: block; }
	.sidebar { width: 100%; height: auto; min-height: 0; padding: 12px 14px 9px; display: block; border-right: 0; border-bottom: 1px solid #e8e5ee; }
	.brand { justify-content: flex-start; padding: 0 3px; }
	.brand-mark { width: 29px; height: 29px; }
	.brand-mark img { width: 22px; height: 22px; }
	.brand strong { font-size: 14px; }
	.brand small { font-size: 9px; }
	.nav-list { display: flex; margin: 11px 0 0; gap: 5px; overflow-x: auto; padding-bottom: 1px; }
	.nav-list .nav-item, .nav-list .nav-item.is-active, .nav-list .nav-item:not(.is-active) { flex: 0 0 auto; justify-content: center; padding: 7px 10px; font-size: 11px; }
	.nav-item .nav-dot { width: 5px; height: 5px; }
	.sidebar-note { display: none; }
	.main-content { width: 100%; padding: 18px 12px 24px; }
	.topbar { align-items: stretch; gap: 14px; margin-bottom: 16px; }
	.topbar-heading { flex: 1; }
	.overview-device-background { right: 8px; top: 14px; width: 220px; height: 130px; opacity: .11; }
	h1 { font-size: 29px; }
	.toolbar { gap: 8px; }
	.device-select-wrap { flex: 1; }
	select { min-width: 0; width: 100%; min-height: 40px; }
	.icon-button { width: 40px; height: 40px; margin-top: 15px; }
	.hero-strip { min-height: 0; gap: 18px; padding: 18px; }
	.hero-strip h2 { font-size: 21px; }
	.hero-reading { text-align: left; }
	.quick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
	.quick-stat { padding: 9px; gap: 7px; }
	.quick-stat em { display: none; }
	.section-block { margin-top: 23px; }
	.section-heading { align-items: flex-end; }
	.metrics-grid { grid-template-columns: 1fr; gap: 8px; }
	.metric-card { min-height: 121px; }
	.feature-grid, .content-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
	.feature-grid .panel { min-height: 0; }
	.controls-panel { grid-column: auto; }
	.water-panel, .system-panel, .controls-panel, .panel { padding: 15px; }
	.gauges-row { margin-top: 14px; }
	.gauge { width: 100px; height: 100px; }
	.system-visual { height: 130px; }
	.trend-panel { margin-top: 12px; }
	.page-footer { margin-top: 24px; }
}

/* Readable monitoring scale without sacrificing the compact layout. */
.nav-item { font-size: 13px; }
.brand strong { font-size: 16px; } .brand small { font-size: 11px; }
.eyebrow { font-size: 11px; } h2 { font-size: 19px; }
.metric-label { font-size: 11px; } .metric-value { font-size: 26px; } .metric-unit, .metric-time { font-size: 10px; }
.metric-state { font-size: 10px; } .quick-stat small { font-size: 10px; } .quick-stat strong { font-size: 12px; } .quick-stat em { font-size: 9px; }
.sensor-copy strong, .component-copy strong, .activity-copy strong { font-size: 13px; } .sensor-copy small, .component-copy small, .activity-copy small { font-size: 10px; }
.health, .component-status, .activity-time { font-size: 10px; }
.section-count, .device-select-wrap, .device-location { font-size: 11px; }

/* Environmental accents: purple signature, water blue, aqua systems, leaf health */
:root { --water: #2d9ac7; --aqua: #20aaa1; --leaf: #4b9a70; --sun: #d39543; }
.gauge { background: conic-gradient(var(--water) var(--gauge-value), #e3edf4 0); }
.gauge-teal { background: conic-gradient(var(--aqua) var(--gauge-value), #e3f1f0 0); }
.system-visual { background: linear-gradient(180deg, #f4f0fc 0 62%, #e2efe9 62% 100%); }
.system-pipe { border-color: var(--water); }
.air-flow { color: var(--water); }
.system-tank { border-color: var(--aqua); background: linear-gradient(#8ed9e3 0 68%, #e7f7f5 68%); }
.system-tank span { color: #197b7d; }
.component-status, .health { color: var(--leaf); }
.component-icon { background: #eaf5f7; color: var(--water); }
.metric-card:nth-child(2):before { background: var(--aqua); }
.activity-bar { background: #a98ad9; }

/* Environmental dashboard palette. Purple is reserved for the brand mark. */
:root { --green: #197b78; --lime: #8acb9b; --ink: #18334a; --muted: #70818c; --line: #dce8ea; --orange: #d08a3d; --red: #c85c5c; }
body { background-color: #f8fbfb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cpath d='M-30 90 C25 20 105 12 175 55 S285 120 330 48' fill='none' stroke='%235eaabd' stroke-opacity='.10' stroke-width='2'/%3E%3Cpath d='M-55 125 C35 50 110 50 190 85 S290 155 355 75' fill='none' stroke='%2377bd9b' stroke-opacity='.08' stroke-width='2'/%3E%3Cpath d='M45 160 C110 90 180 105 245 125' fill='none' stroke='%239b83d8' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E"); }
.brand-mark { background: #eee5ff; }
.brand-mark img { width: 25px; height: 25px; display: block; }
.brand strong { color: #56329a; }
.brand small { color: #788891; }
.nav-item { color: #70818c; }
.nav-item:hover, .nav-item.is-active { color: #197b78; background: #e5f4f2; }
.sidebar-note strong { color: #197b78; }
.pulse-dot { background: #4ca67b; box-shadow: 0 0 0 5px rgba(76, 166, 123, .12); }
.eyebrow, .text-link, .component-status, .health { color: #197b78; }
.icon-button { color: #197b78; }
.icon-button:hover { background: #197b78; }
.hero-strip { background: linear-gradient(110deg, #ffffff 0%, #f2faf9 65%, #e5f4f3 100%); border-color: #dce8ea; border-left-color: #2d9ac7; box-shadow: 0 14px 32px rgba(35, 113, 119, .08); }
.hero-strip .status-line { color: #197b78; }
.hero-strip .status-dot { background: #4ca67b; }
.hero-reading strong { color: #197b78; }
.metric-card:before { background: #45a9b3; }
.metric-card:nth-child(2):before { background: #76bf90; }
.sensor-icon { background: #e6f5f3; color: #197b78; }
.activity-bar { background: #45a9b3; }
.system-machine span { color: #197b78; }
.system-machine { border-color: #a6d0c7; box-shadow: 5px 7px 0 rgba(36, 126, 125, .1); }
.component-icon { background: #e8f4f6; color: #2d9ac7; }
.trend-chart { background: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, #e2eded 38px); }
.page-footer { color: #83939b; }

/* Manrope is the primary product typeface; mono remains for telemetry metadata. */
body, button, select, .brand, .nav-item, h1, h2, .metric-label, .metric-value, .metric-state, .sensor-copy, .component-copy, .activity-copy, .quick-stat, .device-select-wrap, .status-banner { font-family: 'Manrope', sans-serif; }
.metric-value, .hero-reading strong, .section-count, .eyebrow, .metric-unit, .metric-time, .activity-time, .health, .component-status, .page-footer { font-family: 'DM Mono', monospace; }
.quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.quick-stat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border: 1px solid #dce8ea; border-radius: 7px; background: #fff; box-shadow: 0 5px 16px rgba(35, 113, 119, .035); }
.quick-icon { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; font: 700 15px 'DM Mono', monospace; }
.quick-icon-water { background: #e4f3f8; color: #2d9ac7; } .quick-icon-leaf { background: #e6f5eb; color: #4b9a70; } .quick-icon-purple { background: #eee5ff; color: #7048b8; } .quick-icon-sun { background: #fff2dc; color: #d08a3d; }
.quick-stat div { min-width: 0; flex: 1; } .quick-stat small, .quick-stat strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quick-stat small { color: #7b8b93; font-size: 9px; } .quick-stat strong { color: #18334a; font-size: 11px; margin-top: 3px; } .quick-stat em { color: #197b78; font: 500 8px 'DM Mono', monospace; font-style: normal; } .quick-stat em.is-good { color: #4b9a70; }
.component-empty { display: grid; place-items: center; align-content: center; height: 165px; color: #7b8b93; text-align: center; } .component-empty span { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 9px; border-radius: 50%; background: #e8f4f6; color: #2d9ac7; font-size: 20px; } .component-empty strong { color: #18334a; font-size: 11px; } .component-empty small { margin-top: 4px; font-size: 9px; }
.component-running .component-icon { background: #e6f5eb; color: #4b9a70; } .component-stopped .component-icon { background: #fff1df; color: #c27a2e; } .component-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .03em; } .component-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-running { color: #287f58; background: #e3f5e9; box-shadow: 0 0 0 3px rgba(75, 154, 112, .08); } .status-running i { animation: status-pulse 1.8s infinite; } .status-stopped { color: #ae6b24; background: #fff0dc; } .status-empty { color: #8a989d; background: #f0f3f3; } .component-running .component-copy small { color: #287f58; } .component-stopped .component-copy small { color: #ae6b24; }
@keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.metric-footer { display: flex; align-items: center; justify-content: space-between; min-height: 14px; padding-right: 48px; }
.metric-state { color: #4b9a70; font-size: 9px; font-weight: 700; }
.metric-spark { height: 23px; margin: 8px 0 0 9px; opacity: .95; }
.metric-spark svg { width: 100%; height: 100%; overflow: visible; }
.metric-spark polyline { fill: none; stroke: #45a9b3; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark-empty { color: #a7b3b7; font-size: 8px; }
.metric-card.tone-low:before, .metric-card.tone-alert:before { background: #d08a3d; } .metric-card.tone-warm:before { background: #dc785d; } .metric-card.tone-cold:before { background: #4b94c3; } .metric-card.tone-humid:before { background: #629fca; }
.metric-card.tone-low .metric-state, .metric-card.tone-alert .metric-state { color: #c1782f; } .metric-card.tone-warm .metric-state { color: #c6634b; } .metric-card.tone-cold .metric-state { color: #397fae; } .metric-card.tone-humid .metric-state { color: #397fae; }
.metric-card.tone-low .metric-spark polyline, .metric-card.tone-alert .metric-spark polyline { stroke: #d08a3d; } .metric-card.tone-warm .metric-spark polyline { stroke: #dc785d; } .metric-card.tone-cold .metric-spark polyline, .metric-card.tone-humid .metric-spark polyline { stroke: #4b94c3; }
.trend-legend { display: flex; gap: 18px; margin-bottom: 8px; color: #70818c; font-size: 10px; } .trend-legend span { display: inline-flex; align-items: center; gap: 5px; } .trend-legend i { width: 8px; height: 8px; border-radius: 50%; }
@media (max-width: 900px) { .quick-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .quick-stats { grid-template-columns: 1fr; } }
.device-location { display: inline-block; margin-top: 8px; color: #197b78; font: 500 10px 'DM Mono', monospace; text-decoration: none; }
.device-location:hover { color: #2d9ac7; text-decoration: underline; }

/* One consistent type family across every visible dashboard label and value. */
body, body *, body *::before, body *::after { font-family: 'Manrope', sans-serif !important; }