@font-face { font-family: 'Inter'; src: url('/static/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cal Sans'; src: url('/static/cal-sans.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --soft: #f8f9fa; --hover: #f0f1f3;
  --text: #111111; --body: #374151; --muted: #6b7280; --border: #e5e7eb; --border-hover: #d1d5db;
  --accent: #3b82f6; --lavender: #8b5cf6; --primary: #111111; --on-primary: #ffffff;
  --success: #047857; --success-bg: #ecfdf5; --warning: #92400e; --warning-bg: #fffbeb;
  --danger: #b91c1c; --danger-bg: #fef2f2;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[x-cloak] { display: none !important; }
.muted, .small-label, .eyebrow { color: var(--muted); }
.small-label { display: block; font-size: 10px; letter-spacing: 1px; }
.eyebrow { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
h1 { font-size: 30px; letter-spacing: -.8px; margin: 9px 0 5px; font-weight: 550; }
h2 { font-size: 15px; font-weight: 550; margin: 0; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 220px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 30px 18px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 650; letter-spacing: -.8px; padding: 0 6px; line-height: 1; }
.brand-word { white-space: nowrap; }
.brand-icon { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--text); font-size: 21px; border-radius: 8px; }
.brand-dot { color: var(--accent); }
.nav-label { color: var(--muted); font-size: 10px; letter-spacing: 2px; margin: 45px 14px 13px; }
nav { display: flex; flex-direction: column; gap: 5px; }
nav button { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: none; padding: 12px 13px; color: var(--body); position: relative; }
nav button:hover { background: var(--soft); }
nav button.active { color: var(--accent); background: var(--soft); }
nav button.active:before { content: ''; position: absolute; left: -18px; height: 20px; width: 2px; background: var(--accent); }
.nav-icon { font-size: 21px; width: 22px; line-height: 1; }
.nav-count { margin-left: auto; font: 10px ui-monospace, monospace; min-width: 22px; text-align: right; }
.host-avatar, .avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text); background: var(--soft); font-size: 12px; }
.avatar { border-radius: 50%; }
main { margin-left: 220px; }
.topbar { height: 74px; padding: 0 38px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb span { margin: 0 12px; color: var(--muted); }
.breadcrumb strong { color: var(--text); font-weight: 450; }
.header-right { display: flex; align-items: center; gap: 22px; }
.env { font: 10px ui-monospace, monospace; letter-spacing: .7px; text-transform: uppercase; color: var(--body); }
.live { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; white-space: nowrap; }
.header-right .live { min-width: 100px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.dot.offline { background: var(--warning); }
.content { position: relative; max-width: 1600px; margin: auto; padding: 34px 38px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; gap: 20px; min-height: 55px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.public-notice { margin-bottom: 22px; padding: 16px 20px; border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: 6px; background: var(--warning-bg); color: var(--warning); font-size: 12px; }
.public-notice strong { font-size: 13px; }
.public-notice p { margin: 6px 0 10px; }
.public-notice a { font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.heading-meta { text-align: right; white-space: nowrap; }
.heading-meta strong { font: 16px ui-monospace, monospace; display: block; margin-top: 6px; }
.metrics-content { min-height: calc(100vh - 260px); }
.metrics-content.pending { opacity: .3; pointer-events: none; }
.loading { position: absolute; top: 175px; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 12px; }
.pulse { height: 6px; width: 6px; background: var(--accent); border-radius: 50%; }
.section { min-width: 0; padding: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 24px; }
.section.card { padding: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.stat { padding: 22px; min-width: 0; }
.stat-grid.card { padding: 0; }


.stat-label { color: var(--body); font-size: 11px; display: flex; justify-content: space-between; align-items: center; min-height: 25px; }
.stat-label > span { font-size: 16px; color: var(--muted); }
.stat-value { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 8px; font-size: 34px; letter-spacing: -1px; font-weight: 500; min-height: 51px; white-space: nowrap; }
.stat-value > span { min-width: 3ch; }
.stat-value small { font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.mini-chart { height: 38px; margin: 0 0 12px; }
.mini-chart svg, .chart-layer svg, .network-chart svg { width: 100%; height: 100%; display: block; }
.stat-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 10px; color: var(--body); min-height: 18px; white-space: nowrap; }
.text-button { border: 0; background: transparent; padding: 0; color: var(--accent); font-size: 11px; white-space: nowrap; }
.container-meter { height: 38px; display: flex; gap: 3px; align-items: center; flex-wrap: wrap; overflow: hidden; margin-bottom: 12px; }
.container-meter span { background: #3b82f6; width: 5px; height: 16px; }
.container-meter span.stopped { background: var(--soft); }
.temperature-bar { height: 3px; background: var(--soft); margin: 25px 0 34px; overflow: hidden; }
.temperature-bar span { height: 100%; display: block; background: var(--accent); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 38px; margin-bottom: 22px; }

.panel-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 28px; }
.panel-heading p, .section-heading p { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.section-heading { margin: 28px 0 18px; }
.section-heading .muted { font-size: 11px; }
.legend { display: flex; gap: 16px; font-size: 10px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { height: 5px; width: 5px; border-radius: 50%; }
.mint { background: var(--accent); }.lavender { background: var(--lavender); }
.big-chart { height: 190px; position: relative; margin: 10px 0 0 38px; }
.chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; font: 9px ui-monospace, monospace; color: var(--muted); }
.chart-grid span { width: 100%; border-bottom: 1px dashed var(--soft); height: 1px; text-indent: -38px; line-height: 0; }
.chart-layer { position: absolute; inset: 0; }
.chart-footer { display: flex; justify-content: space-between; color: var(--muted); font: 9px ui-monospace, monospace; margin: 16px 0 0 38px; }
.tag { font: 9px ui-monospace, monospace; color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.host-chip { font-size: 15px; display: flex; gap: 10px; color: var(--accent); margin-bottom: 17px; }
dl { margin: 0; }
dl > div { display: flex; justify-content: space-between; padding: 9px 0; gap: 18px; font-size: 11px; min-height: 36px; }
dt { color: var(--muted); white-space: nowrap; }
dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 17px; }
.project-list { padding: 0; }
.project-row { background: none; border: 0; width: 100%; height: 65px; padding: 13px 0; display: flex; gap: 12px; align-items: center; text-align: left; }
.project-row:hover { background: var(--soft); }
.project-icon { width: 27px; color: var(--body); font-size: 23px; flex-shrink: 0; }
.project-name { flex: 1; min-width: 0; }
.project-name strong { font-size: 12px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 450; }
.project-name small { color: var(--muted); font-size: 10px; }
.project-cpu { font: 11px ui-monospace, monospace; margin-left: auto; width: 7ch; text-align: right; }
.network-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-bottom: 18px; }
.network-totals strong { font: 22px ui-monospace, monospace; display: block; margin-top: 8px; white-space: nowrap; }
.network-chart { height: 96px; }
.network-chart.second { height: 56px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; min-height: 42px; }
.search-wrap { position: relative; flex: 1; max-width: 440px; }
.search-wrap > span { position: absolute; left: 12px; top: 5px; color: var(--muted); font-size: 20px; }
input, select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; font-size: 12px; min-width: 0; }
.search-wrap input { width: 100%; padding-left: 35px; }
input::placeholder { color: var(--muted); }select { cursor: pointer; }
.toolbar-count { margin-left: auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.compose-list.card { padding: 0; overflow: hidden; }
.compose-group { padding: 0; margin: 0; border-bottom: 1px solid var(--border); }
.compose-group:last-child { border-bottom: 0; }
.compose-body { padding: 16px 22px 20px; }
.compose-chevron { color: var(--muted); font-size: 19px; width: 18px; text-align: center; transform: rotate(-90deg); }
.compose-chevron.expanded { transform: rotate(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.compose-heading { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; min-height: 76px; padding: 18px 22px; background: none; border: 0; text-align: left; }
.compose-header:hover { background: var(--soft); }.compose-heading:hover { background: transparent; }
.compose-count { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.group-usage { margin-left: auto; flex-shrink: 0; color: var(--muted); font: 11px ui-monospace, monospace; width: 12ch; text-align: right; }
.table-scroll { overflow: auto; scrollbar-gutter: stable; }
table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; text-align: left; white-space: nowrap; font-size: 12px; }
th { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 9px; color: var(--body); text-transform: uppercase; letter-spacing: .7px; font-weight: 450; }
td { padding: 14px 12px; border: 0; overflow: hidden; text-overflow: ellipsis; height: 55px; }
td:first-child, th:first-child { padding-left: 16px; }
td:last-child, th:last-child { padding-right: 16px; }
tr:last-child td { border-bottom: 0; }tbody tr:nth-child(even) { background: #ffffff02; }tbody tr:hover { background: var(--soft); }
.containers-table tbody tr:nth-child(odd) { background: var(--hover); }.containers-table tbody tr:nth-child(even) { background: var(--soft); }.containers-table tbody tr:hover { background: var(--soft); }
td strong { font-weight: 450; }td small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.containers-table { min-width: 960px; }
.containers-table th:nth-child(1) { width: 23%; }.containers-table th:nth-child(2) { width: 13%; }.containers-table th:nth-child(3) { width: 8%; }.containers-table th:nth-child(4) { width: 16%; }.containers-table th:nth-child(5) { width: 11%; }.containers-table th:nth-child(6) { width: 10%; }.containers-table th:nth-child(7) { width: 5%; }.containers-table th:nth-child(8) { width: 14%; }
.containers-table td { height: 86px; }
.status-badge { display: inline-block; font-size: 10px; color: var(--body); min-width: 7ch; }
.status-badge.running { color: var(--accent); }.status-badge.exited, .status-badge.restarting { color: var(--warning); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.meter { background: var(--soft); height: 3px; width: 100%; max-width: 150px; margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.meter i.warm { background: var(--warning); }
.meter.large { height: 4px; width: 100%; max-width: none; margin: 13px 0; }
.log-button { background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 6px 10px; font-size: 11px; color: var(--text); white-space: nowrap; }
.log-button:hover { background: var(--soft); }
.core-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; }
.core { padding: 13px 0; height: 84px; }
.core > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.core strong { font-family: ui-monospace, monospace; font-weight: 400; color: var(--accent); width: 7ch; text-align: right; }
.core .meter { max-width: none; margin: 12px 0 7px; }
.core small { font: 10px ui-monospace, monospace; color: var(--muted); }
.temperature-section { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; margin-bottom: 20px; }
.temperature-heading p { font-size: 11px; color: var(--muted); margin: 7px 0 0; max-width: 180px; }
.temperature-device { margin-bottom: 26px; }.temperature-device:last-child { margin-bottom: 0; }
.device-heading { display: flex; align-items: center; gap: 15px; justify-content: space-between; padding-bottom: 8px; }
.device-heading strong { font-weight: 500; font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.device-heading > span { font: 10px ui-monospace, monospace; color: var(--muted); flex-shrink: 0; }
.sensor-row { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 12px 0; }
.sensor-row:last-child { border-bottom: 0; }.sensor-row > div:first-child { flex: 1; min-width: 0; }
.sensor-row strong { font-size: 12px; font-weight: 450; }.sensor-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; overflow-wrap: anywhere; }
.sensor-meter { width: 140px; }.sensor-meter .meter { margin: 0; }
.sensor-reading { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; width: 100px; flex-shrink: 0; }
.sensor-reading strong { font: 20px ui-monospace, monospace; color: var(--accent); }.sensor-reading span { color: var(--muted); font-size: 11px; }.sensor-reading.warm strong { color: var(--warning); }
.sensor-section { margin-top: 20px; }
.sensor-section .section-heading { margin: 0 0 14px; }
.temperature-section[data-kind="cores"] .sensor-rows { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
.temperature-section[data-kind="cores"] .sensor-meter { width: 60px; }
.memory-detail { margin-top: 20px; }.memory-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }.memory-bars small { font-size: 11px; }
.filesystem-table { margin-bottom: 28px; }.filesystem-table th:first-child { width: 32%; }.filesystem-table th:nth-child(2) { width: 12%; }
.empty { padding: 32px 0; color: var(--muted); font-size: 12px; text-align: center; }
.notice { border-left: 2px solid var(--warning); background: var(--warning-bg); color: var(--warning); padding: 12px 16px; margin-bottom: 20px; font-size: 12px; }
footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; }
footer .dot { width: 5px; height: 5px; margin-right: 5px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: #060c08d9; display: flex; align-items: center; justify-content: center; padding: 28px; }
.log-modal { width: 1200px; max-width: 100%; height: 80vh; max-height: 900px; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.log-header { display: flex; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0; }
.log-header h2 { font-size: 19px; margin: 6px 0; }.log-header small { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.icon-button { background: transparent; border: 1px solid var(--border); width: 30px; height: 30px; font-size: 23px; line-height: 1; flex-shrink: 0; }
.log-toolbar { display: flex; align-items: center; gap: 12px; padding: 13px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.log-toolbar .live { width: 220px; }.log-toolbar input { margin-left: auto; max-width: 350px; flex: 1; padding: 7px 10px; }
.log-body { background: #0c140e; flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 17px 0; font: 12px/1.7 ui-monospace, Consolas, monospace; }
.log-line { display: flex; gap: 15px; padding: 1px 20px; align-items: baseline; }.log-line:hover { background: #1a2b20; }.log-line.stderr { color: #dfbe98; }
.log-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }.log-time { color: #8aa293; width: 8ch; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: help; }
.log-footer { padding: 11px 24px; display: flex; justify-content: space-between; color: var(--muted); font: 10px ui-monospace, monospace; flex-shrink: 0; }
@media (max-width: 1200px) {
  .brand { font-size: 22px; }
  .sidebar { width: 190px; padding: 25px 12px; }main { margin-left: 190px; }.content { padding: 28px 25px; }.topbar { padding: 0 25px; }
  .stat { padding: 20px 16px; }.stat-value { font-size: 29px; }.overview-grid { gap: 30px; }.stat-foot { font-size: 9px; }.temperature-section { grid-template-columns: 180px minmax(0,1fr); gap: 25px; }
  .network-totals strong { font-size: 18px; }.sensor-meter { width: 90px; }
}
@media (max-width: 950px) {
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .overview-grid { grid-template-columns: 1fr; gap: 32px; }.toolbar { flex-wrap: wrap; }.search-wrap { flex-basis: 100%; max-width: none; }.core-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .temperature-section { grid-template-columns: 1fr; gap: 22px; }.temperature-heading p { max-width: none; }.header-right { gap: 12px; }.log-toolbar .live { width: 120px; }
}
@media (max-width: 650px) {
  .sidebar { inset: auto 0 0; width: 100%; height: 67px; padding: 0; background: var(--surface); border-right: 0; border-top: 1px solid var(--border); }
  .brand, .nav-label { display: none; }nav { height: 100%; flex-direction: row; gap: 0; }nav button { flex: 1; min-width: 0; flex-direction: column; gap: 4px; padding: 8px 1px; align-items: center; justify-content: center; font-size: 9px; }
  nav button.active { background: transparent; }nav button.active:before { top: 0; left: 25%; width: 50%; height: 2px; }.nav-count { display: none !important; }.nav-icon { font-size: 20px; text-align: center; }.nav-text { font-size: 0; }.nav-text:after { content: attr(data-short); font-size: 8px; }
  main { margin-left: 0; padding-bottom: 67px; }.topbar { height: 60px; padding: 0 17px; }.breadcrumb { font-size: 10px; }.breadcrumb span { margin: 0 5px; }.header-right { gap: 10px; }.header-right .live { min-width: 0; font-size: 0; gap: 0; }.env { font-size: 8px; }.avatar { width: 25px; height: 25px; }
  .content { padding: 24px 17px; }.page-heading { align-items: flex-start; margin-bottom: 24px; min-height: 55px; }.eyebrow { font-size: 9px; }h1 { font-size: 25px; }.page-heading p { font-size: 11px; max-width: 320px; }.heading-meta { display: none; }
  .stat { padding: 18px 14px; }.stat-label { font-size: 10px; }.stat-label > span { font-size: 14px; }.stat-value { font-size: 26px; min-height: 41px; gap: 5px; }.stat-value small { font-size: 10px; }.stat-foot { font-size: 9px; flex-wrap: wrap; min-height: 31px; align-content: center; row-gap: 1px; }
  .stat-foot .text-button { font-size: 9px; }.container-meter { height: 38px; }.overview-grid { gap: 28px; }.panel-heading h2 { font-size: 14px; }.panel-heading p { font-size: 10px; }.legend { gap: 10px; font-size: 9px; }.big-chart { height: 155px; }
  .toolbar { gap: 8px; }.toolbar select { flex: 1; min-width: 0; font-size: 11px; padding: 9px 8px; }.toolbar-count { display: none; }.refresh-order { flex-basis: 100%; text-align: right; }.compose-heading { min-height: 72px; padding: 16px; gap: 9px; }.compose-body { padding: 12px 16px 14px; }.compose-heading h2 { font-size: 13px; overflow-wrap: anywhere; }.compose-header:hover { background: var(--soft); }.compose-heading:hover { background: transparent; }
.compose-heading p { font-size: 10px; }.group-usage { font-size: 10px; width: 10ch; }
  .containers-table, .containers-table tbody { display: block; min-width: 0; width: 100%; white-space: normal; }.containers-table thead { display: none; }.containers-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 12px 0; border-top: 1px solid var(--border); }
  .containers-table td { border: 0; padding: 8px 12px; min-width: 0; height: auto; overflow-wrap: anywhere; }.containers-table td:first-child, .containers-table td:nth-child(2), .containers-table td:last-child { grid-column: 1/-1; }
  .containers-table td:first-child strong { font-size: 13px; }.containers-table td:nth-child(2) { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; height: 28px; padding-top: 0; }.containers-table td:nth-child(2) small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .containers-table td:nth-child(n+3):not(:last-child):before { display: block; color: var(--muted); font: 9px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: .7px; margin-bottom: 5px; }
  .containers-table td:nth-child(3):before { content: 'CPU'; }.containers-table td:nth-child(4):before { content: 'MEMORY'; }.containers-table td:nth-child(5):before { content: 'NETWORK I/O'; }.containers-table td:nth-child(6):before { content: 'BLOCK I/O'; }.containers-table td:nth-child(7):before { content: 'PIDs'; }
  .containers-table td:last-child .log-button { padding: 9px 12px; }.containers-table .container-actions { justify-content: flex-start; }.containers-table td:nth-child(4) strong { display: block; min-height: 17px; }.containers-table .meter { max-width: none; }.core-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 22px; }
  .card, .section.card { padding: 18px; }
  .temperature-section { padding: 18px; }
  .temperature-section[data-kind="cores"] .sensor-rows { grid-template-columns: 1fr; }.sensor-row { gap: 12px; }.sensor-meter { width: 50px; }.sensor-reading { width: 80px; }.sensor-meter { display: none; }.sensor-reading strong { font-size: 18px; }.sensor-reading span { font-size: 10px; }.device-heading { gap: 10px; }.device-heading strong { font-size: 11px; }
  .memory-bars { grid-template-columns: 1fr; gap: 25px; }.memory-bars .stat-foot { min-height: 20px; }.stat-grid.two { grid-template-columns: 1fr 1fr; }.stat-grid.two .stat-value { font-size: 20px; }.stat-grid.two .stat-value small { font-size: 10px; }
  .modal-backdrop { padding: 9px; }.log-modal { height: 90dvh; }.log-header { padding: 15px; }.log-header h2 { font-size: 16px; }.log-toolbar { padding: 10px; gap: 7px; flex-wrap: wrap; }.log-toolbar > .live { flex-basis: 100%; height: 18px; }.log-toolbar input { margin-left: 0; font-size: 11px; width: 100%; }
  .log-line { font-size: 11px; padding: 1px 10px; gap: 10px; }.log-footer { padding: 10px; font-size: 9px; }.log-footer > span:last-child { display: none; }footer { font-size: 9px; }footer > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (min-width:651px) { .stat-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Keep units anchored when a reading gains a digit or changes its byte unit. */
.stat-grid:not(.two) .stat:nth-child(-n+2) .stat-value > span { min-width: 5ch; }
.stat-grid.two .stat-value > span { min-width: 9ch; }
.sensor-reading strong { width: 5ch; text-align: right; }
.project-list { min-height: 390px; }

@media(max-width:360px) { .stat-grid:not(.two) .stat:nth-child(-n+2) .stat-value > span { min-width: 4.2ch; }.stat-grid.two .stat-value { font-size: 17px; }.stat-foot { font-size: 8px; } }

button:disabled { opacity: .45; cursor: wait; }
.compose-header { display: flex; align-items: center; padding-right: 22px; gap: 14px; }.compose-heading > div { min-width: 0; }.compose-heading h2 { overflow-wrap: anywhere; }.compose-chevron { margin-left: auto; flex-shrink: 0; }.compose-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.compose-actions > span { color: var(--muted); font-size: 11px; margin-right: auto; }
.container-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }.lifecycle-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.container-actions .log-button { padding: 5px 7px; }
.action-status { overflow-wrap: anywhere; font-size: 12px; color: var(--accent); margin: 0 0 14px; }
.log-body { overflow-anchor: none; }

.action-stop { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }.action-stop:hover { background: var(--danger-bg); }
.action-restart { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }.action-restart:hover { background: var(--warning-bg); }
.log-origin { text-align: right; color: var(--lavender); width: var(--log-origin-width,8ch); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width:950px) and (min-width:651px) { .compose-header { flex-wrap: wrap; gap: 0 12px; }.compose-heading { flex-basis: 70%; }.compose-actions { margin: 0 0 16px 22px; } }
@media (max-width:650px) { .compose-header { flex-wrap: wrap; gap: 0; padding-right: 16px; }.compose-heading { flex-basis: calc(100% - 70px); padding-right: 6px; }.group-usage { width: 8ch; }.compose-actions { width: 100%; justify-content: flex-end; padding: 0 0 16px 16px; }.log-origin { width: var(--log-origin-width,8ch); font-size: 10px; }.log-line.project { flex-wrap: wrap; gap: 0 10px; }.log-line.project .log-text { flex-basis: 100%; padding-left: 0; } }

.start-slot { display: inline-flex; width: 46px; flex-shrink: 0; justify-content: center; }
.start-slot .log-button { width: 100%; }
.action-start { color: #3b82f6; border-color: #3b82f6; background: var(--success-bg); }.action-start:hover { background: var(--success-bg); }
.compose-actions > .lifecycle-actions { flex-wrap: nowrap; }

.project-action-error { margin: 0 22px 14px; }.action-error { color: var(--danger); }

.group-usage, .project-cpu { display: flex; flex-direction: column; gap: 5px; width: 15ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
.group-usage span:last-child, .project-cpu span:last-child { color: var(--muted); font-size: 10px; }
@media (max-width:650px) { .compose-heading { flex-basis: calc(100% - 112px); min-width: 0; }.group-usage { width: 112px; }.project-cpu { width: 13ch; font-size: 10px; } }

.ups-card { margin-top: 20px; }
.ups-card .panel-heading { flex-wrap: wrap; gap: 12px; }
.ups-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-bottom: 24px; }
.ups-summary strong { display: block; font-size: 26px; font-weight: 550; margin: 6px 0; }
.ups-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 24px; margin: 0 0 24px; }
.ups-details dt { color: var(--muted); font-size: 12px; }
.ups-details dd { margin: 4px 0 0; font-size: 18px; }
@media (max-width:650px) { .ups-summary { gap: 12px; }.ups-summary strong { font-size: 19px; }.ups-summary .small-label { font-size: 8px; }.ups-details { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.compose-modal{width:min(1200px,95vw);max-height:92vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden}.compose-modal-head,.compose-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px}.compose-modal-head h2{margin:0}.compose-editor-body{padding:0 20px;overflow:auto;min-height:0}.compose-project-fields{display:flex;gap:16px;margin-bottom:16px}.compose-project-fields label{display:flex;flex-direction:column;gap:6px;flex:1;color:var(--muted);font-size:12px}.compose-file-toolbar{display:flex;gap:8px;margin-bottom:14px}.compose-content{display:block;width:100%;height:min(60vh,720px);min-height:420px;resize:vertical;box-sizing:border-box;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:14px;font:13px/1.6 monospace;tab-size:2}.compose-file-toolbar .selected{border-color:var(--accent)}.compose-actions{flex-wrap:wrap}.compose-deploy-output{height:min(60vh,720px);min-height:420px;max-height:720px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);color:var(--text);padding:12px;border-radius:8px;font:12px/1.5 monospace}@media(max-width:600px){.compose-editor-body{padding:0 12px}.compose-content{height:50vh;min-height:280px}.compose-modal{max-height:95vh}.compose-project-fields{flex-direction:column}.compose-modal-head,.compose-modal-actions{padding:12px;flex-wrap:wrap}}

.compose-folder-status{font-size:11px}.compose-project-fields input{min-width:0;width:100%}.compose-modal-actions>div{margin-left:auto}.compose-delete-warning{padding:4px 0 16px}.compose-delete-warning .mono{overflow-wrap:anywhere}.compose-delete-folder{display:flex;align-items:center;gap:8px}.compose-delete-folder input{width:auto}@media(max-width:600px){.compose-deploy-output{height:50vh;min-height:280px}}

.compose-saved-list{margin-top:24px}.compose-saved-list .compose-heading{cursor:default}.compose-folder-input{position:relative}.compose-folder-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;max-height:200px;overflow:auto;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:none}.compose-folder-suggestions button{display:block;width:100%;padding:9px 10px;border:0;border-radius:4px;background:transparent;text-align:left;color:var(--text);font:12px/1.4 monospace;overflow-wrap:anywhere}.compose-folder-suggestions button:hover,.compose-folder-suggestions button.selected{background:var(--soft);color:var(--accent)}

/* Phone layouts only: preserve the desktop geometry and typography. */
@media (max-width: 650px) {
  :root { --mobile-bottom-inset: max(8px, env(safe-area-inset-bottom, 0px)); --mobile-nav-height: calc(67px + var(--mobile-bottom-inset)); }
  html { scrollbar-gutter: auto; scroll-padding-bottom: var(--mobile-nav-height); }
  .sidebar { height: var(--mobile-nav-height); padding: 0 max(4px, env(safe-area-inset-right, 0px)) var(--mobile-bottom-inset) max(4px, env(safe-area-inset-left, 0px)); }
  nav { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button { flex: 1 0 44px; }
  .nav-text:after { font-size: 9px; }
  main { padding-bottom: var(--mobile-nav-height); }
  .content { padding: max(20px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 24px max(14px, env(safe-area-inset-left, 0px)); }
  .page-heading { margin-bottom: 18px; min-height: 0; }
  h1 { font-size: 24px; margin-top: 0; }
  .stat { padding: 16px 12px; }
  .stat-label { gap: 6px; align-items: flex-start; }
  .stat-value { font-size: clamp(22px, 6.5vw, 28px); }
  .stat-grid:not(.two) .stat:nth-child(-n+2) .stat-value > span { min-width: 4ch; }
  .stat-foot { white-space: normal; gap: 4px 8px; }
  .stat-grid.two { grid-template-columns: 1fr; }
  .stat-grid.two .stat-value { font-size: 28px; }
  .stat-grid.two .stat-value > span { min-width: 0; }
  .panel-heading, .section-heading { flex-wrap: wrap; gap: 8px 12px; }
  .project-list { min-height: 0; }
  .project-row { height: auto; min-height: 72px; gap: 8px; }
  .project-name small { display: block; }
  .project-cpu { flex-shrink: 0; width: 12ch; }
  .network-totals { gap: 10px; }
  .network-totals strong { font-size: clamp(14px, 4vw, 18px); }
  .host-panel dl > div { gap: 12px; }
  .host-panel dd { white-space: normal; overflow-wrap: anywhere; }
  input, select { font-size: 16px; min-height: 44px; }
  .toolbar select, .log-toolbar input { font-size: 16px; }
  .log-button { min-height: 36px; }
  .toolbar > .log-button { min-height: 44px; }
  .compose-header { padding-right: 12px; }
  .compose-heading { padding: 14px 12px; }
  .compose-actions { padding-left: 12px; gap: 12px; }
  .containers-table td:nth-child(2) { height: auto; min-height: 28px; }
  .containers-table td:nth-child(2) small { min-width: 0; }
  .ups-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ups-summary > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .ups-summary .small-label { font-size: 9px; }
  .ups-details > div { flex-direction: column; gap: 0; }
  .ups-details dd { text-align: left; }
  /* Turn wide resource tables into labelled rows instead of sideways scrolling. */
  table:not(.containers-table), table:not(.containers-table) tbody { display: block; min-width: 0; width: 100%; white-space: normal; }
  table:not(.containers-table) thead { display: none; }
  table:not(.containers-table) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0; }
  table:not(.containers-table) td { display: block; width: auto; height: auto; min-width: 0; padding: 8px 10px; overflow-wrap: anywhere; }
  table:not(.containers-table) td:first-child { grid-column: 1 / -1; }
  table:not(.containers-table) td:before { content: attr(data-label); display: block; color: var(--muted); font: 10px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin-bottom: 4px; }
  .modal-backdrop { padding: max(9px, env(safe-area-inset-top, 0px)) max(9px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(9px, env(safe-area-inset-left, 0px)); }
  .log-modal, .compose-modal { width: 100%; max-height: calc(100dvh - max(9px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))); }
  .log-header > div, .compose-modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
  .icon-button { width: 40px; height: 40px; }
  .log-toolbar input { flex-basis: 100%; max-width: none; }
  .compose-file-toolbar { flex-wrap: wrap; }
  .compose-modal-actions { gap: 10px; }
  .compose-modal-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 650px) and (display-mode: standalone) {
  :root { --mobile-bottom-inset: max(20px, env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .stat-label > span { display: none; }
  .stat-value { flex-wrap: wrap; column-gap: 4px; }
  .stat-value > span { min-width: 0; }
  .project-icon { width: 20px; font-size: 20px; }
  .project-cpu { width: 11ch; }
}


/* Cal design system. Preserve the monitor's original layout and navigation. */
body { font-size: 14px; color: var(--body); }
h1, h2, strong { color: var(--text); }
h1 { font-family: 'Cal Sans', 'Inter', sans-serif; font-weight: 400; font-size: 32px; letter-spacing: -.8px; line-height: 1.2; margin: 0; }
h2 { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.2px; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(59,130,246,.4); outline-offset: 3px; }
.sidebar { background: var(--soft); width: 232px; padding: 30px 16px 20px; border-right: 1px solid var(--border); }
.brand { color: var(--text); font-family: 'Cal Sans', 'Inter', sans-serif; font-weight: 400; font-size: 25px; letter-spacing: -.7px; gap: 9px; padding: 0 8px; }
.brand-icon { background: var(--text); color: white; width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
.brand-icon .icon { width: 19px; height: 19px; }.brand-dot { color: var(--text); }
nav { margin-top: 36px; gap: 5px; }
nav button { border: 1px solid transparent; border-radius: 8px; padding: 11px 12px; font-size: 13px; font-weight: 500; color: var(--muted); gap: 11px; }
nav button:hover { background: var(--hover); color: var(--text); }
nav button.active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
nav button.active:before { display: none; }.nav-icon { width: 18px; height: 18px; }
.nav-count { background: var(--soft); padding: 1px 5px; border-radius: 6px; font: 11px 'Inter',sans-serif; color: var(--muted); min-width: 22px; }
.sidebar-status { margin-top: auto; border-top: 1px solid var(--border); padding: 18px 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); }
.sidebar-status .live { font-size: 11px; }.dot, .pulse { background: #10b981; }.dot.offline { background: #f59e0b; }
main { margin-left: 232px; }
.content { max-width: 1560px; padding: 36px 32px; }
.page-heading { margin-bottom: 28px; min-height: 40px; }
.heading-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }.heading-meta .small-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; }.heading-meta strong { font: 12px 'Inter',sans-serif; margin: 0; font-weight: 500; }
.small-label { font-size: 11px; letter-spacing: .3px; }.eyebrow { display: none; }
.card { border: 1px solid var(--border); border-radius: 12px; padding: 24px; background: var(--surface); }
.stat-grid.card { border: 0; background: transparent; gap: 16px; padding: 0; }
.stat { background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 500; gap: 8px; }.stat-icon { width: 17px; height: 17px; color: var(--muted); }
.stat-value { color: var(--text); font-size: 36px; font-weight: 500; letter-spacing: -1px; margin: 14px 0 12px; }
.stat-value small { font-size: 12px; }.stat-value > span { min-width: 0; }
.stat-foot { color: var(--muted); font-size: 11px; }.text-button { color: var(--text); font-weight: 500; font-size: 11px; }.text-button:hover { text-decoration: underline; }
.container-meter span { background: var(--text); }.container-meter span.stopped { background: var(--border); }
.temperature-bar { background: var(--border); height: 4px; border-radius: 4px; }.temperature-bar span { background: var(--text); }
.overview-grid.card { border: 0; padding: 0; background: transparent; gap: 20px; }
.overview-grid > article { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.panel-heading { margin-bottom: 22px; }.legend { font-size: 11px; }.legend i { width: 6px; height: 6px; }.big-chart { height: 200px; }.chart-grid, .chart-footer { color: var(--muted); font-size: 10px; }.chart-grid span { border-color: var(--border); }
.host-chip { color: var(--text); font-size: 14px; font-weight: 500; }
dl > div { font-size: 12px; border-bottom: 1px solid var(--soft); padding: 10px 0; }dl > div:last-child { border-bottom: 0; }
.project-row { border-bottom: 1px solid var(--soft); }.project-row:last-child { border-bottom: 0; }.project-row:hover { background: var(--hover); }
.project-icon { color: var(--muted); width: 23px; height: 23px; flex: 0 0 23px; }
.project-name strong { font-size: 12px; font-weight: 500; }.project-name small { font-size: 10px; }.project-cpu { font-size: 11px; }
.network-totals strong { font: 22px 'Inter',sans-serif; font-weight: 500; letter-spacing: -.6px; }
input, select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; min-height: 40px; padding: 9px 12px; }
input::placeholder { color: var(--muted); }.search-wrap .search-icon { position: absolute; left: 12px; top: 11px; width: 17px; height: 17px; color: var(--muted); }.search-wrap input { padding-left: 38px; }
.toolbar { gap: 10px; }.toolbar-count { font-size: 11px; }
.log-button { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--body); font-size: 11px; font-weight: 500; min-height: 30px; padding: 6px 10px; }
.log-button:hover { background: var(--hover); border-color: var(--border-hover); }
.primary-button, .toolbar > .log-button { background: var(--text); color: var(--surface); border-color: var(--text); border-radius: 8px; min-height: 40px; padding: 10px 14px; font-size: 12px; font-weight: 600; }
.primary-button:hover, .toolbar > .log-button:hover { background: #242424; color: white; border-color: #242424; }
.log-button:disabled { color: var(--muted); background: var(--soft); border-color: var(--border); opacity: .6; cursor: default; }
.action-start, .action-restart { color: var(--body); background: var(--surface); border-color: var(--border); }.action-start:hover, .action-restart:hover { background: var(--hover); }
.action-stop { color: var(--danger); background: var(--surface); border-color: var(--border); }.action-stop:hover { background: var(--danger-bg); }.action-error { color: var(--danger); }
.compose-list.card { border-radius: 12px; }.compose-header:hover { background: var(--hover); }.compose-heading:hover { background: transparent; }
.compose-heading { min-height: 78px; }.compose-heading h2 { font-size: 14px; font-weight: 600; }.compose-count { font-size: 11px; margin-top: 4px; }.compose-actions { gap: 10px; }.container-actions { gap: 8px; }
th { background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .3px; border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid var(--soft); font-size: 12px; }td strong { font-weight: 500; }td small { font-size: 10px; }
.containers-table tbody tr:nth-child(odd) { background: var(--surface); }.containers-table tbody tr:nth-child(even) { background: var(--surface); }.containers-table tbody tr:hover { background: var(--soft); }.containers-table td { border-bottom: 1px solid var(--soft); }
.status-badge { font-size: 10px; border-radius: 999px; padding: 3px 7px; background: var(--soft); color: var(--muted); min-width: 0; }
.status-badge.running { color: var(--success); background: var(--success-bg); }.status-badge.exited, .status-badge.restarting { color: var(--warning); background: var(--warning-bg); }
.meter { background: var(--border); border-radius: 2px; }.meter i { background: var(--text); }.meter i.warm { background: #f59e0b; }
.core strong { color: var(--text); }.sensor-reading strong { color: var(--text); }.sensor-reading.warm strong { color: var(--danger); }.sensor-row { border-bottom: 1px solid var(--soft); }.sensor-row strong { font-weight: 500; }.device-heading strong { font-weight: 500; }
.notice { background: var(--soft); color: var(--body); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px; font-size: 12px; }.notice[role='alert'], .notice[role='status'] { background: var(--danger-bg); border-left-color: #ef4444; }
.modal-backdrop { background: #11111166; }.log-modal, .compose-modal { background: var(--surface); border-color: var(--border); border-radius: 12px; }.log-header h2 { font-size: 18px; font-weight: 600; }
.icon-button { background: var(--surface); border-color: var(--border); border-radius: 8px; }.icon-button:hover { background: var(--hover); }
.log-body, .compose-content, .compose-deploy-output { background: #101010; color: white; }.compose-content, .compose-deploy-output { border-radius: 8px; border-color: #242424; }
.log-line:hover { background: #1a1a1a; }.log-time { color: #a1a1aa; }.log-origin { color: #c4b5fd; }.log-body .empty { color: #a1a1aa; }
.compose-file-toolbar .selected { color: white; background: var(--text); border-color: var(--text); }.compose-folder-suggestions { box-shadow: 0 4px 12px rgba(0,0,0,.08); background: var(--surface); border-color: var(--border); }.compose-folder-suggestions button:hover,.compose-folder-suggestions button.selected { background: var(--hover); color: var(--text); }
@media (max-width: 1200px) and (min-width: 651px) { .sidebar { width: 210px; padding: 28px 12px 18px; }main { margin-left: 210px; }.content { padding: 30px 24px; }.brand { font-size: 23px; }.stat { padding: 20px 16px; }.stat-value { font-size: 30px; } }
@media (max-width: 950px) { .overview-grid { grid-template-columns: 1fr; }.stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 650px) {
 .sidebar { inset: auto 0 0; width: 100%; background: var(--surface); border-top: 1px solid var(--border); padding: 0 max(4px,env(safe-area-inset-right,0px)) var(--mobile-bottom-inset) max(4px,env(safe-area-inset-left,0px)); }.sidebar-status { display: none; }
 nav { margin-top: 0; gap: 0; }nav button { border: 0; border-radius: 0; padding: 8px 1px; gap: 4px; font-size: 10px; }nav button.active { background: var(--soft); box-shadow: none; }nav button.active:before { display: none; }.nav-icon { width: 19px; height: 19px; }.nav-count { display: none; }
 main { margin-left: 0; }.content { padding: 24px max(14px,env(safe-area-inset-right,0px)) 28px max(14px,env(safe-area-inset-left,0px)); }h1 { font-size: 28px; }.page-heading { margin-bottom: 22px; }.heading-meta { display: none; }
 .stat-grid.card { gap: 10px; }.stat { padding: 16px 12px; }.stat-label { font-size: 10px; }.stat-value { font-size: 28px; }.stat-foot { font-size: 10px; }.stat-icon { width: 14px; height: 14px; }.overview-grid { gap: 14px; }.overview-grid > article { padding: 18px; }
 input, select { font-size: 16px; min-height: 44px; }.toolbar select { font-size: 13px; }.toolbar > .log-button { min-height: 44px; }.search-wrap .search-icon { top: 13px; }
 .compose-actions { gap: 10px; }.compose-actions .log-button, .container-actions .log-button { min-height: 36px; }.containers-table td { border-bottom: 0; }.containers-table td:nth-child(n+3):not(:last-child):before, table:not(.containers-table) td:before { font-family: 'Inter',sans-serif; }
 .network-totals strong { font-size: 18px; }.log-toolbar input { font-size: 16px; }.icon-button { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
/* Read-only project summaries remain fully readable. */
.project-row:disabled { opacity: 1; cursor: default; color: var(--body); }

/* Theme and integrated lists: the card is the table's outer surface. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101112; --surface: #18191b; --soft: #202124; --hover: #25272a;
  --text: #f4f4f5; --body: #d4d4d8; --muted: #a1a1aa; --border: #303236; --border-hover: #484b51;
  --primary: #f4f4f5; --on-primary: #18191b;
  --success: #6ee7b7; --success-bg: #16372b; --warning: #fcd34d; --warning-bg: #382e18;
  --danger: #fca5a5; --danger-bg: #3b2023;
}
.brand-icon, .primary-button, .toolbar > .log-button, .compose-file-toolbar .selected {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.primary-button:hover, .toolbar > .log-button:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); opacity: .85; }
.heading-actions { display: flex; align-items: center; gap: 18px; }
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 7px; color: var(--muted); flex-shrink: 0; }
.theme-toggle .icon { width: 18px; height: 18px; }
.card.table-scroll { padding: 0; }
.table-scroll { scrollbar-gutter: auto; }
.compose-body { padding: 0; border-top: 1px solid var(--border); }
.card > .table-scroll { margin: 0 -24px -24px; border-top: 1px solid var(--border); border-radius: 0 0 11px 11px; }
th { background: var(--soft); text-transform: none; font-size: 11px; letter-spacing: 0; padding-top: 12px; padding-bottom: 12px; }
td { border-bottom-color: var(--border); }
td:first-child, th:first-child { padding-left: 24px; }
td:last-child, th:last-child { padding-right: 24px; }
tbody tr, .containers-table tbody tr:nth-child(odd), .containers-table tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover, .containers-table tbody tr:hover { background: var(--hover); }
.containers-table td { height: 76px; border-bottom-color: var(--border); }
.project-list { margin: 0 -24px -24px; min-height: 0; }
.project-row { padding: 14px 24px; height: 72px; border-bottom-color: var(--border); }
.overview-grid > article:has(> .project-list) { overflow: hidden; }
.sensor-row { border-bottom-color: var(--border); }
@media (max-width: 650px) {
  .heading-actions { gap: 0; }
  .card > .table-scroll { margin: 0 -24px -24px; }
  .project-list { margin: 0 -18px -18px; }
  .project-row { padding: 14px 18px; }
  .compose-body { padding: 0; }
  table tbody tr { border-bottom: 1px solid var(--border); margin: 0; border-radius: 0; }
  table tbody tr:last-child { border-bottom: 0; }
}
@media (min-width: 651px) {
  .containers-table th:nth-child(1) { width: 20%; }
  .containers-table th:nth-child(2) { width: 12%; }
  .containers-table th:nth-child(8) { width: 18%; }
  .container-actions { flex-wrap: nowrap; gap: 8px; }
  .container-actions .log-button { padding: 5px 7px; font-size: 10px; }
}

/* Right-align actions and divide inspection from lifecycle controls. */
.containers-table .container-actions { justify-content: flex-end; }
.containers-table th:last-child { text-align: right; }
.container-actions > .lifecycle-actions, .compose-actions > .lifecycle-actions {
  border-left: 1px solid transparent;
  padding-left: 7px;
  margin-left: 0;
  flex-wrap: nowrap;
}
.compose-actions { margin-left: auto; justify-content: flex-end; }


.container-actions > .lifecycle-actions, .compose-actions > .lifecycle-actions.has-start { border-left-color: var(--border-hover); }
/* Remaining views use the approved compact table and project-list language. */
.overview-page .stat-grid.card { background: var(--surface); border: 1px solid var(--border); gap: 0; overflow: hidden; }
.overview-page .stat { background: transparent; border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 18px 24px; }
.overview-page .stat:last-child { border-right: 0; }
.overview-page .stat-value { font-size: 26px; min-height: 36px; margin: 8px 0; }
.overview-page .stat-value > span { min-width: 0; }
.overview-page .mini-chart { height: 28px; margin-bottom: 8px; }
.overview-page .container-meter { height: 28px; margin-bottom: 8px; }
.overview-page .temperature-bar { margin: 20px 0 32px; }
.overview-page .stat-icon { display: none; }
.overview-page .overview-grid { gap: 20px; }
.overview-page .host-panel { padding: 0; overflow: hidden; }
.overview-page .host-panel .panel-heading { padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--border); }
.overview-page .host-panel dl > div { padding: 12px 24px; border-color: var(--border); }
.overview-page .host-panel dd { white-space: normal; }
.overview-page .overview-projects { padding: 0; overflow: auto; }
.overview-projects table { min-width: 0; }
.overview-projects th:first-child { width: 40%; }
.overview-projects td { height: 64px; }
.project-link { background: none; border: 0; padding: 0; display: flex; align-items: center; gap: 10px; max-width: 100%; font-size: 12px; text-align: left; }
.project-link strong { overflow: hidden; text-overflow: ellipsis; }
.project-link:hover strong { text-decoration: underline; }
.project-link:disabled { opacity: 1; cursor: default; }
.temperatures-page .temperature-section { display: block; padding: 0; overflow: hidden; }
.temperatures-page .temperature-heading { padding: 18px 24px; border-bottom: 1px solid var(--border); }
.temperatures-page .temperature-heading h2 { font-size: 14px; }
.temperatures-page .temperature-device { margin: 0; }
.temperatures-page .device-heading { padding: 10px 24px; background: var(--soft); border-bottom: 1px solid var(--border); }
.temperatures-page .sensor-rows { display: block; }
.temperatures-page .sensor-row, .hardware-page .sensor-row { padding: 14px 24px; min-height: 58px; border-bottom: 1px solid var(--border); }
.temperatures-page .sensor-row:last-child { border-bottom: 0; }
.temperatures-page .sensor-reading strong, .hardware-page .sensor-reading strong { font-size: 13px; }
.temperatures-page .sensor-meter, .temperatures-page .temperature-section[data-kind="cores"] .sensor-meter { width: 160px; }
.hardware-page .hardware-cpu { overflow: hidden; }
.hardware-page .panel-heading h2 { font-size: 14px; }
.hardware-page .panel-heading > .muted { font-size: 11px; white-space: nowrap; }
.hardware-page .sensor-section { padding: 0; overflow: hidden; }
.hardware-page .sensor-section .section-heading { margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.hardware-page .sensor-section h2 { font-size: 14px; }
.hardware-page .sensor-row:last-child { border-bottom: 0; }
.hardware-page .hardware-cpu table { min-width: 0; }
.ups-page .ups-card, .overview-page .ups-card { padding: 0; overflow: hidden; margin-top: 0; margin-bottom: 20px; }
.ups-page .ups-card .panel-heading, .overview-page .ups-card .panel-heading { padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--border); }
.ups-card .panel-heading h2 { font-size: 14px; }
.ups-page .ups-summary, .overview-page .ups-summary { gap: 0; margin: 0; border-bottom: 1px solid var(--border); }
.ups-page .ups-summary > div, .overview-page .ups-summary > div { padding: 18px 24px; border-right: 1px solid var(--border); }
.ups-page .ups-summary > div:last-child, .overview-page .ups-summary > div:last-child { border-right: 0; }
.ups-page .ups-summary strong, .overview-page .ups-summary strong { font: 20px ui-monospace,monospace; margin: 8px 0 0; }
.ups-page .ups-card > .table-scroll { margin: 0; border: 0; border-radius: 0; }
.ups-page .ups-reading-table table { min-width: 0; }
.ups-reading-table th:last-child, .ups-reading-table td:last-child { text-align: right; }
.ups-page .ups-card > .stat-foot, .overview-page .ups-card > .stat-foot { padding: 12px 24px; border-top: 1px solid var(--border); min-height: 44px; justify-content: flex-end; }
.ups-page .ups-card > .notice, .overview-page .ups-card > .notice { margin: 16px 24px; }
.status-badge.warm { color: var(--warning); background: var(--warning-bg); }
@media (max-width: 950px) {
 .overview-page .stat-grid.card { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .overview-page .stat:nth-child(2) { border-right: 0; }
 .overview-page .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 650px) {
 .overview-page .stat { padding: 16px; }
 .overview-page .stat-value { font-size: 24px; }
 .overview-page .stat-foot { white-space: normal; }
 .overview-page .overview-projects { padding: 0; }
 .overview-page .host-panel { padding: 0; }
 .overview-page .host-panel .panel-heading, .overview-page .host-panel dl > div { padding-left: 16px; padding-right: 16px; }
 .temperatures-page .temperature-heading, .temperatures-page .device-heading { padding-left: 16px; padding-right: 16px; }
 .temperatures-page .sensor-row, .hardware-page .sensor-row { padding-left: 16px; padding-right: 16px; }
 .temperatures-page .sensor-meter { display: none; }
 .ups-page .ups-card, .overview-page .ups-card { padding: 0; }
 .ups-page .ups-summary > div, .overview-page .ups-summary > div { padding: 16px 12px; }
 .ups-page .ups-summary strong, .overview-page .ups-summary strong { font-size: 16px; }
 .ups-card .small-label { font-size: 10px; }
 .ups-page .ups-card .panel-heading, .overview-page .ups-card .panel-heading { padding: 16px; }
 .ups-reading-table td:last-child { text-align: left; }
}
.overview-page .overview-projects { margin: 0; }
.overview-page .stat-grid .stat .stat-value > span { min-width: 0; }
.overview-page .stat-foot .text-button { margin-left: auto; }
.temperatures-page .temperature-section[data-kind="cores"] .sensor-rows { display: block; }
@media (max-width: 650px) {
 .ups-page .ups-summary, .overview-page .ups-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .ups-page .ups-summary > div:nth-child(2), .overview-page .ups-summary > div:nth-child(2) { grid-column: auto; grid-row: auto; }
 .ups-page .ups-reading-table table tr { grid-template-columns: minmax(0,1fr) 110px; align-items: center; padding: 0; }
 .ups-page .ups-reading-table table td { border: 0; padding: 14px 16px; }
 .ups-page .ups-reading-table table td:first-child { grid-column: auto; }
 .ups-page .ups-reading-table table td:last-child { text-align: right; }
 .ups-page .ups-reading-table table td:before { display: none; }
 .hardware-page .hardware-cpu table tr { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .hardware-page .hardware-cpu table td:first-child { grid-column: auto; }
}
.overview-page .overview-projects { border-radius: 12px; align-self: start; }
.overview-page .stat-grid:not(.two) .stat:nth-child(-n+2) .stat-value > span { min-width: 0; }
/* Keep core readings compact, using available card width. */
.hardware-page .hardware-cpu { padding: 0; container-type: inline-size; container-name: cpu-cores; }
.hardware-page .hardware-cpu > .panel-heading { padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--border); }
.cpu-column-heads, .cpu-readings { display: grid; grid-template-columns: minmax(0,1fr); }
.cpu-column-head, .cpu-reading { display: grid; grid-template-columns: 60px minmax(0,1fr) 88px; gap: 12px; align-items: center; padding: 14px 16px; min-width: 0; }
.cpu-column-head { background: var(--soft); color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--border); padding-top: 12px; padding-bottom: 12px; }
.cpu-column-head { display: var(--cpu-visible-1,grid); box-shadow: inset -1px 0 var(--border); }
.cpu-reading { font-size: 12px; min-height: 62px; box-shadow: inset -1px 0 var(--border), inset 0 -1px var(--border); }
.cpu-reading strong { font-size: 12px; font-weight: 500; }
.cpu-reading .meter { max-width: none; margin-top: 6px; }
.cpu-frequency, .cpu-column-head span:last-child { text-align: right; }
@container cpu-cores (min-width: 560px) {
 .cpu-column-heads, .cpu-readings { grid-template-columns: repeat(var(--cpu-cols-2,1),minmax(0,1fr)); }
 .cpu-column-head { display: var(--cpu-visible-2,none); }
}
@container cpu-cores (min-width: 840px) {
 .cpu-column-heads, .cpu-readings { grid-template-columns: repeat(var(--cpu-cols-3,1),minmax(0,1fr)); }
 .cpu-column-head { display: var(--cpu-visible-3,none); }
}
@container cpu-cores (min-width: 1120px) {
 .cpu-column-heads, .cpu-readings { grid-template-columns: repeat(var(--cpu-cols-4,1),minmax(0,1fr)); }
 .cpu-column-head { display: var(--cpu-visible-4,none); }
}
.ups-header-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.ups-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ups-updated .icon { width: 14px; height: 14px; }
.overview-page .ups-summary { border-bottom: 0; }
@media (max-width:650px) {
 .hardware-page .hardware-cpu > .panel-heading { padding: 16px; }
 .ups-header-meta { gap: 10px; }
}

/* Network shares Overview's divided metric strip. */
.network-page .stat-grid.card { background: var(--surface); border: 1px solid var(--border); gap: 0; overflow: hidden; }
.network-page .stat { background: transparent; border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 18px 24px; }
.network-page .stat:last-child { border-right: 0; }
.network-page .stat-value { font-size: 26px; min-height: 36px; margin: 8px 0; }
.network-page .stat-grid.two .stat-value > span { min-width: 0; }
.network-page .mini-chart { height: 28px; margin-bottom: 0; }
/* Reserve five project rows even when fewer projects are present. */
.overview-page .overview-projects { position: relative; height: 364px; }
.overview-projects th { height: 42px; }
.overview-projects .overview-project-empty { position: absolute; inset: 42px 0 0; display: grid; place-items: center; padding: 24px; overflow-wrap: anywhere; }
@media (max-width:650px) {
 .network-page .stat { padding: 16px 12px; }
 .network-page .stat-value { font-size: 20px; }
 .overview-page .overview-projects { height: 602px; }
 .overview-projects table tr { grid-template-columns: repeat(3,minmax(0,1fr)); height: 120px; }
 .overview-projects table td { border: 0; }
 .overview-projects table td:first-child:before { display: none; }
 .overview-projects .overview-project-empty { inset: 0; }
}