:root {
  --bg: #04070d;
  --bg-2: #07101a;
  --panel: #0a1420;
  --panel-2: #08111b;
  --line: rgba(126, 174, 224, .13);
  --line-strong: rgba(126, 190, 240, .24);
  --text: #e7f2ff;
  --text-2: #c7d8ea;
  --muted: #7e93a8;
  --muted-2: #566b80;
  --cyan: #52e6cf;
  --cyan-2: #34c9ff;
  --blue: #5aa9ff;
  --violet: #b58cff;
  --amber: #ffb45c;
  --red: #ff6072;
  --green: #62e6a8;
  --mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
  --sans: "Inter", "SF Pro Display", "Segoe UI", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  overflow: hidden;
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button { font: inherit; color: inherit; }

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 18% -10%, rgba(46, 160, 155, .09), transparent 62%),
    radial-gradient(900px 700px at 100% 110%, rgba(51, 103, 196, .12), transparent 64%),
    #03060b;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -512px;
  margin-top: -384px;
  width: 1024px;
  height: 768px;
  padding: 20px 22px;
  display: grid;
  grid-template-rows: 86px 30px 512px 42px 18px;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(110, 170, 225, .16);
  border-radius: 6px;
  background:
    radial-gradient(680px 420px at 12% 0%, rgba(31, 138, 136, .13), transparent 62%),
    radial-gradient(800px 500px at 100% 100%, rgba(38, 87, 170, .14), transparent 66%),
    linear-gradient(155deg, #07101a 0%, #050a12 48%, #060c15 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .015);
  transform-origin: center center;
}

.stage-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(112, 165, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 165, 220, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 35%, black, transparent 82%);
}

.stage-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: .18;
}
.glow-a { top: -190px; left: -100px; background: #1fb8a4; }
.glow-b { right: -150px; bottom: -230px; background: #2e63c7; opacity: .22; }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.panel {
  background:
    linear-gradient(180deg, rgba(18, 32, 49, .86), rgba(8, 17, 28, .92));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 8px 26px rgba(0, 0, 0, .2);
}

.topbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 150px;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
}

.identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(69, 224, 203, .09), rgba(59, 124, 231, .06));
  border: 1px solid rgba(81, 221, 204, .19);
  box-shadow: 0 0 24px rgba(42, 212, 190, .08), inset 0 0 14px rgba(51, 199, 183, .04);
}
.brand-mark svg { width: 40px; height: 40px; display: block; }

.identity-copy { min-width: 0; }

.hostline {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

h1 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: -.015em;
  color: #f1f8ff;
  text-shadow: 0 0 30px rgba(102, 208, 255, .12);
}

.live-pill, .demo-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(103, 151, 196, .22);
  color: var(--muted);
  background: rgba(86, 120, 155, .07);
}
.live-pill i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}
.live-pill[data-state="live"] {
  color: var(--green);
  border-color: rgba(88, 226, 159, .27);
  background: rgba(60, 190, 130, .07);
}
.live-pill[data-state="connecting"] {
  color: var(--amber);
  border-color: rgba(255, 178, 90, .25);
  background: rgba(220, 153, 75, .06);
}
.live-pill[data-state="offline"] {
  color: var(--red);
  border-color: rgba(255, 96, 114, .3);
  background: rgba(255, 96, 114, .06);
}
.live-pill[data-state="live"] i { animation: breathe 2.4s ease-in-out infinite; }
.demo-pill {
  color: var(--amber);
  border-color: rgba(255, 180, 92, .26);
  background: rgba(255, 180, 92, .07);
}

.host-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .025em;
  color: var(--muted);
}
.host-meta > span { overflow: hidden; text-overflow: ellipsis; }
.host-meta #os-name { max-width: 210px; color: var(--text-2); }
.host-meta #kernel { max-width: 160px; }
.host-meta #arch { flex: none; }
.sep {
  display: inline-block;
  width: 1px;
  height: 8px;
  flex: none;
  background: rgba(130, 172, 214, .2);
}
.host-ip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: var(--cyan);
}
.ip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}
.host-ip b { font-weight: 500; }

.clock-block { text-align: right; }
.clock {
  font-family: var(--mono);
  font-size: 42px;
  line-height: .96;
  font-weight: 500;
  letter-spacing: -.045em;
  color: #f4faff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(96, 197, 255, .13);
}
.clock-meta {
  margin-top: 7px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--muted);
}
#timezone { color: var(--cyan); }

.uptime-block {
  border-left: 1px solid rgba(128, 173, 216, .16);
  padding-left: 18px;
  min-width: 0;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--muted-2);
}
.uptime {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: -.01em;
  color: #e9f5ff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.boot {
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted-2);
}

/* ------------------------------------------------------------------ */
/* Nav                                                                 */
/* ------------------------------------------------------------------ */
.nav {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 4px;
}
.nav-current { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-index {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--cyan);
  padding-right: 10px;
  border-right: 1px solid rgba(119, 169, 215, .2);
}
.nav-titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nav-titles strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #e6f1fd;
  white-space: nowrap;
}
.nav-titles span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .15em;
  color: var(--muted-2);
  white-space: nowrap;
}

.dots { display: flex; align-items: center; gap: 7px; justify-self: center; }
.dot {
  position: relative;
  width: 26px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .05em;
  transition: color .25s;
}
.dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .22;
  transform: translateX(-50%);
  transition: width .25s, background .25s, opacity .25s;
}
.dot:hover { color: var(--text-2); }
.dot.is-active { color: var(--cyan); }
.dot.is-active::after {
  width: 20px;
  opacity: 1;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(82, 230, 207, .6);
}

.nav-state {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}
.state-led {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(98, 230, 168, .8);
}
.nav.is-paused .state-led { background: var(--amber); box-shadow: 0 0 6px rgba(255, 180, 92, .7); }
.key-hint {
  margin-left: 3px;
  padding: 2px 5px;
  border: 1px solid rgba(119, 163, 204, .2);
  border-radius: 3px;
  color: var(--muted-2);
  font-size: 7px;
  letter-spacing: .08em;
}
.progress {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 1px;
  overflow: hidden;
  background: rgba(110, 155, 200, .1);
}
.progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(82, 230, 207, .9), rgba(90, 169, 255, .75));
  box-shadow: 0 0 8px rgba(82, 230, 207, .55);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ------------------------------------------------------------------ */
/* Pages & cards                                                       */
/* ------------------------------------------------------------------ */
.pages { position: relative; min-height: 0; }

.page {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(30px) scale(.996);
  transition: opacity .42s ease, transform .52s cubic-bezier(.22, .68, .24, 1), visibility .52s;
}
.page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  z-index: 2;
}
.page.is-prev {
  opacity: 0;
  visibility: visible;
  transform: translateX(-30px) scale(.996);
  z-index: 1;
}

.card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(155deg, rgba(17, 31, 48, .84) 0%, rgba(8, 17, 28, .9) 56%, rgba(7, 15, 25, .92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .028),
    0 7px 22px rgba(0, 0, 0, .16);
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128, 205, 255, .2), transparent);
  opacity: .65;
  pointer-events: none;
}
.card-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
  margin-bottom: 8px;
}
.card-title { display: flex; align-items: baseline; min-width: 0; }
.card-title .cn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #dceafa;
  white-space: nowrap;
}
.card-title .en {
  margin-left: 7px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .15em;
  color: var(--muted-2);
  white-space: nowrap;
}
.card-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  padding: 0 6px;
  border: 1px solid rgba(111, 161, 207, .16);
  border-radius: 3px;
  background: rgba(72, 116, 158, .055);
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: .075em;
  color: var(--muted);
  white-space: nowrap;
}
.live-badge { color: var(--green); border-color: rgba(98, 230, 168, .2); }
.live-badge i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor; }

/* ------------------------------------------------------------------ */
/* Rings                                                               */
/* ------------------------------------------------------------------ */
.ring {
  --pct: 0;
  position: relative;
  flex: none;
  width: 104px;
  height: 104px;
  color: var(--cyan);
}
.ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ring-track {
  fill: none;
  stroke: rgba(112, 158, 203, .13);
  stroke-width: 6.5;
}
.ring-value {
  fill: none;
  stroke: currentColor;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--pct));
  transition: stroke-dashoffset .7s cubic-bezier(.3, .8, .3, 1), stroke .3s ease;
  filter: drop-shadow(0 0 4px currentColor);
}
.ring[data-tone="warn"] { color: var(--amber); }
.ring[data-tone="crit"] { color: var(--red); }
.ring[data-tone="ok"] { color: var(--cyan); }
.ring-mem[data-tone="ok"] { color: var(--blue); }
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.ring-center b {
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.055em;
  color: #f2faff;
  font-variant-numeric: tabular-nums;
}
.ring-center b span { font-size: 11px; margin-left: 1px; color: var(--muted); letter-spacing: 0; }
.ring-center small {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .18em;
  color: var(--muted-2);
}
.ring-hero { width: 166px; height: 166px; }
.ring-hero .ring-value, .ring-hero .ring-track { stroke-width: 4.6; }
.ring-hero .ring-center b { font-size: 38px; }
.ring-hero .ring-center b span { font-size: 14px; }
.ring-hero .ring-center small { font-size: 8px; margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Sparklines                                                          */
/* ------------------------------------------------------------------ */
.spark-wrap {
  position: relative;
  margin-top: auto;
  min-height: 0;
}
.spark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  color: var(--muted-2);
}
.spark-peak { color: var(--muted); }
.spark { display: block; width: 100%; height: 54px; overflow: visible; }
.spark-wrap-load .spark { height: 58px; }
.spark-wrap-net .spark { height: 68px; }
.spark-wrap-hero .spark { height: 66px; }
.spark-wrap-mem .spark { height: 62px; }

/* ------------------------------------------------------------------ */
/* Overview                                                            */
/* ------------------------------------------------------------------ */
.page-overview {
  grid-template-columns: 1.28fr 1fr .78fr;
  grid-template-rows: 246px 256px;
}
.card-cpu { grid-column: 1; grid-row: 1; }
.card-mem { grid-column: 2; grid-row: 1; }
.card-sys { grid-column: 3; grid-row: 1; }
.card-load { grid-column: 1; grid-row: 2; }
.card-disk { grid-column: 2; grid-row: 2; }
.card-net { grid-column: 3; grid-row: 2; }

.cpu-main {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 106px;
}
.cpu-facts { flex: 1; min-width: 0; }
.cpu-model {
  margin: 0 0 8px;
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 24px;
}
.fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  height: 18px;
  border-top: 1px solid rgba(112, 159, 204, .075);
  font-size: 8.5px;
  color: var(--muted);
}
.fact-row b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.card-cpu .spark-wrap { margin-top: auto; }

.mem-main {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 98px;
}
.ring-mem { width: 94px; height: 94px; }
.ring-mem .ring-center b { font-size: 23px; }
.mem-facts { flex: 1; min-width: 0; }
.mem-total {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 5px;
  white-space: nowrap;
}
.mem-total b {
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.04em;
  color: #f1f9ff;
}
.mem-total span { font-family: var(--mono); font-size: 9px; color: var(--muted); }
.mem-total em { font-style: normal; color: var(--text-2); }
.kv-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  height: 18px;
  border-top: 1px solid rgba(112, 159, 204, .075);
  font-size: 8px;
  color: var(--muted);
  white-space: nowrap;
}
.kv-line > span { overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.kv-line b {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-2);
}

.composition {
  flex: none;
  display: flex;
  width: 100%;
  height: 6px;
  margin-top: auto;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(100, 145, 190, .1);
}
.composition .seg { display: block; height: 100%; transition: width .6s ease; }
.seg-apps { background: linear-gradient(90deg, #3f8cff, #5aa9ff); }
.seg-cache { background: linear-gradient(90deg, #2b6fb5, #3e8ecf); opacity: .8; }
.seg-buffers { background: #305a7a; opacity: .75; }
.seg-free { background: rgba(116, 158, 198, .15); }
.composition-legend {
  flex: none;
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 7.5px;
  color: var(--muted-2);
  letter-spacing: .03em;
}
.composition-legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend-dot { width: 4px; height: 4px; border-radius: 1px; display: inline-block; }
.legend-dot.apps { background: var(--blue); }
.legend-dot.cache { background: #3e8ecf; }
.legend-dot.free { background: #456176; }
.swap-line {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--muted-2);
}
.swap-label { letter-spacing: .12em; }
.swap-line .mini-bar { flex: 1; }
.swap-line b { font-weight: 500; color: var(--text-2); font-size: 8px; }

.mini-bar {
  position: relative;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(106, 151, 196, .12);
}
.mini-bar > i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--bar-color, var(--blue));
  box-shadow: 0 0 6px var(--bar-glow, rgba(90, 169, 255, .35));
  transition: width .55s cubic-bezier(.3, .8, .3, 1), background .3s;
}

.sys-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sys-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 25px;
  border-top: 1px solid rgba(112, 159, 204, .08);
  font-size: 8.5px;
  color: var(--muted);
}
.sys-row:first-child { border-top: 0; }
.sys-row span { flex: none; letter-spacing: .03em; }
.sys-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-2);
  text-align: right;
}

.load-stats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 2px 0 8px;
}
.load-stat > span {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  color: var(--muted-2);
}
.load-stat b {
  display: block;
  margin: 3px 0 6px;
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.055em;
  color: #edf7ff;
  font-variant-numeric: tabular-nums;
}
.load-stat .mini-bar { --bar-color: var(--amber); --bar-glow: rgba(255, 180, 92, .4); }
.load-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 7px;
  border-top: 1px solid rgba(112, 159, 204, .085);
  font-size: 8px;
  color: var(--muted-2);
}
.load-foot b { font-family: var(--mono); font-weight: 500; color: var(--text-2); }
.spark-wrap-load { margin-top: auto; }

.disk-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; }
.disk-row { min-width: 0; }
.disk-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.disk-mount {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
}
.disk-mount span { font-family: var(--sans); font-size: 8px; color: var(--muted-2); margin-left: 5px; }
.disk-pct {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
}
.disk-bar { height: 4px; border-radius: 3px; background: rgba(106, 151, 196, .12); overflow: hidden; }
.disk-bar i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: inherit;
  background: var(--bar-color, var(--violet));
  box-shadow: 0 0 7px var(--bar-glow, rgba(181, 140, 255, .32));
  transition: width .55s ease;
}
.disk-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 7px;
  color: var(--muted-2);
}

.net-rates {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 3px;
}
.net-rate { min-width: 0; }
.net-rate > span {
  display: block;
  margin-bottom: 4px;
  font-size: 7.5px;
  letter-spacing: .06em;
  color: var(--muted-2);
  white-space: nowrap;
}
.net-rate b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.045em;
  color: #eef8ff;
  font-variant-numeric: tabular-nums;
}
.net-rate.rx b { color: #78f0d9; }
.net-rate.tx b { color: #83baff; }
.net-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--muted-2);
}
.net-foot b { color: var(--text-2); font-weight: 500; }
.spark-wrap-net { margin-top: auto; }

/* ------------------------------------------------------------------ */
/* CPU page                                                            */
/* ------------------------------------------------------------------ */
.page-cpu {
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: 246px 256px;
}
.cpu-hero { grid-column: 1; grid-row: 1 / 3; }
.core-card { grid-column: 2; grid-row: 1; }
.proc-card { grid-column: 2; grid-row: 2; }

.hero-ring { display: flex; justify-content: center; padding: 3px 0 7px; }
.hero-model {
  margin: 0;
  min-height: 25px;
  text-align: center;
  font-size: 8.5px;
  line-height: 1.4;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(112, 159, 204, .09);
  border-bottom: 1px solid rgba(112, 159, 204, .09);
}
.hero-facts span {
  display: block;
  margin-bottom: 2px;
  font-size: 7.5px;
  color: var(--muted-2);
}
.hero-facts b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
}
.breakdown { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.breakdown-row {
  display: grid;
  grid-template-columns: 45px 1fr 32px;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 7px;
  color: var(--muted-2);
}
.breakdown-row > b { text-align: right; font-size: 8px; font-weight: 500; color: var(--text-2); }
.breakdown-row .mini-bar { --bar-color: var(--cyan); --bar-glow: rgba(82, 230, 207, .3); }
.breakdown-row:nth-child(2) .mini-bar { --bar-color: var(--blue); --bar-glow: rgba(90, 169, 255, .3); }
.breakdown-row:nth-child(3) .mini-bar { --bar-color: var(--amber); --bar-glow: rgba(255, 180, 92, .3); }
.breakdown-row:nth-child(4) .mini-bar { --bar-color: var(--violet); --bar-glow: rgba(181, 140, 255, .3); }
.spark-wrap-hero { margin-top: auto; }

.core-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 7px;
}
.core {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 7px 7px;
  border: 1px solid rgba(111, 159, 204, .1);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(23, 42, 61, .45), rgba(9, 19, 30, .48));
}
.core-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3px;
  font-family: var(--mono);
  font-size: 7px;
  color: var(--muted-2);
}
.core-head b { font-size: 8px; font-weight: 500; color: var(--text-2); }
.core-track {
  position: relative;
  flex: 1;
  min-height: 24px;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(104, 149, 194, .04), rgba(104, 149, 194, .1));
}
.core-track i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--v, 0%);
  min-height: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(49, 174, 187, .5));
  box-shadow: 0 0 9px rgba(82, 230, 207, .25);
  transition: height .55s cubic-bezier(.3, .8, .3, 1), background .3s;
}
.core[data-tone="warn"] .core-track i { background: linear-gradient(180deg, var(--amber), rgba(179, 118, 46, .55)); box-shadow: 0 0 9px rgba(255, 180, 92, .2); }
.core[data-tone="crit"] .core-track i { background: linear-gradient(180deg, var(--red), rgba(179, 70, 80, .55)); box-shadow: 0 0 9px rgba(255, 96, 114, .24); }

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9.5px;
}
.data-table th {
  padding: 0 6px 6px;
  border-bottom: 1px solid rgba(117, 162, 205, .14);
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .09em;
  text-align: left;
  color: var(--muted-2);
  white-space: nowrap;
}
.data-table td {
  height: 24px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(112, 159, 204, .065);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-family: var(--mono); }
.data-table th.num { text-align: right; }
.col-pid { width: 48px; }
.proc-table { flex: 1; min-height: 0; }
.proc-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.proc-name b {
  flex: none;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  color: #e4f1ff;
}
.proc-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--muted-2);
}
.proc-pid { color: var(--muted-2); font-size: 8px; }
.proc-cpu { color: var(--cyan); }
.proc-cpu.hot { color: var(--amber); }
.proc-cpu.critical { color: var(--red); }
.proc-mem { color: var(--blue); }
.proc-rss { color: var(--muted); }
.empty-row { color: var(--muted-2) !important; text-align: center !important; font-family: var(--mono); font-size: 8px !important; }

/* ------------------------------------------------------------------ */
/* Memory page                                                         */
/* ------------------------------------------------------------------ */
.page-memory {
  grid-template-columns: 380px minmax(0, 1fr);
  grid-template-rows: 246px 256px;
}
.mem-hero { grid-column: 1; grid-row: 1 / 3; }
.mem-trend { grid-column: 2; grid-row: 1; }
.mem-proc-card { grid-column: 2; grid-row: 2; }

.mem-total-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 1px;
  white-space: nowrap;
}
.mem-total-line b {
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.045em;
  color: #f0f9ff;
}
.mem-total-line span { font-size: 9px; color: var(--muted); }
.mem-total-line em { font-family: var(--mono); font-style: normal; color: var(--text-2); }
.composition-large { height: 8px; margin-top: 14px; }
.mem-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(112, 159, 204, .09);
  border-bottom: 1px solid rgba(112, 159, 204, .09);
}
.mem-stats span {
  display: block;
  margin-bottom: 3px;
  font-size: 7.5px;
  letter-spacing: .015em;
  color: var(--muted-2);
}
.mem-stats b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
}
.mem-hero .ring-hero { width: 158px; height: 158px; }
.mem-breakdown {
  flex: none;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(112, 159, 204, .09);
}
.mem-bd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 6.8px;
  letter-spacing: .07em;
  color: var(--muted-2);
}
.mem-bd-head span:last-child { letter-spacing: .11em; color: rgba(126, 147, 168, .65); }
.mem-bd-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  height: 17px;
  font-size: 7.5px;
  color: var(--muted);
}
.mem-bd-row .mini-bar { height: 3px; }
.mem-bd-row b {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  text-align: right;
  color: var(--text-2);
}
.mem-key {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  border-radius: 1px;
  vertical-align: 1px;
  background: var(--blue);
}
.mem-key.cache { background: #3e8ecf; }
.mem-key.buffers { background: #305a7a; }
.mem-key.free { background: #456176; }
.spark-wrap-mem { margin-top: auto; }

.trend-chart { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.trend-chart .spark { height: 100%; min-height: 100px; }
.trend-stats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(112, 159, 204, .08);
}
.trend-stats span { display: block; margin-bottom: 2px; font-size: 7px; color: var(--muted-2); letter-spacing: .05em; }
.trend-stats b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-2); }

/* ------------------------------------------------------------------ */
/* Storage page                                                        */
/* ------------------------------------------------------------------ */
.page-storage {
  grid-template-columns: 1fr;
  grid-template-rows: 256px 246px;
}
.fs-card { grid-row: 1; }
.io-card { grid-row: 2; }
.fs-table, .io-table { flex: none; }
.iface-table { flex: 1; min-height: 0; }
.fs-table th, .fs-table td { padding-left: 7px; padding-right: 7px; }
.fs-table th:nth-child(1) { width: 20%; }
.fs-table th:nth-child(2) { width: 21%; }
.fs-table th:nth-child(3) { width: 8%; }
.fs-table th:nth-child(4) { width: 10%; }
.fs-table th:nth-child(5) { width: 10%; }
.fs-table th:nth-child(6) { width: 10%; }
.fs-table th:nth-child(7) { width: 15%; }
.fs-table th:nth-child(8) { width: 6%; }
.fs-table td { height: 28px; }
.fs-mount { color: #e5f1ff; font-family: var(--mono); font-size: 10px; }
.fs-device { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.fs-type { color: var(--muted-2); font-family: var(--mono); font-size: 8px; }
.fs-num { color: var(--text-2); font-family: var(--mono); font-size: 8.5px; }
.fs-usage { display: flex; align-items: center; gap: 7px; }
.fs-usage .mini-bar { flex: 1; height: 4px; }
.fs-pct { font-family: var(--mono); font-size: 9px; }
.fs-ro { margin-left: 4px; color: var(--amber); font-size: 7px; }

.io-table th:nth-child(1) { width: 22%; }
.io-table th:nth-child(2) { width: 16%; }
.io-table th:nth-child(3) { width: 16%; }
.io-table th:nth-child(4) { width: 14%; }
.io-table th:nth-child(5) { width: 14%; }
.io-table th:nth-child(6) { width: 14%; }
.io-table th:nth-child(7) { width: 5%; }
.io-table td { height: 28px; }
.io-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
}
.io-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.io-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 7px;
  border-top: 1px solid rgba(112, 159, 204, .08);
  font-size: 7.5px;
  color: var(--muted-2);
  white-space: nowrap;
}
.io-footer b { font-family: var(--mono); font-weight: 500; color: var(--text-2); margin-left: 3px; }
.io-side {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-left: 1px solid rgba(112, 159, 204, .09);
}
.io-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .07em;
  color: var(--muted-2);
}
.io-side-head b {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #e9f5ff;
}
.io-side .spark { flex: 1; width: 100%; height: auto; min-height: 56px; }
.io-legend {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .07em;
  color: var(--muted-2);
}
.io-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 2px;
  margin-right: 3px;
  vertical-align: middle;
  background: currentColor;
}
.io-legend .read { color: var(--cyan); }
.io-legend .write { color: var(--violet); }

.fs-summary {
  flex: none;
  margin-top: auto;
  display: grid;
  grid-template-columns: 88px 88px 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(112, 159, 204, .085);
}
.fs-sum-item span {
  display: block;
  margin-bottom: 2px;
  font-size: 7px;
  letter-spacing: .04em;
  color: var(--muted-2);
}
.fs-sum-item b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.fs-sum-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fs-sum-bar .mini-bar { flex: 1; height: 4px; --bar-color: var(--violet); --bar-glow: rgba(181, 140, 255, .35); }
.fs-sum-bar b {
  flex: none;
  min-width: 42px;
  text-align: right;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-2);
}
.fs-sum-more {
  justify-self: end;
  font-size: 7.5px;
  color: var(--muted-2);
  white-space: nowrap;
}
.io-device { color: #e5f1ff; font-family: var(--mono); font-size: 10px; }
.io-rate { font-family: var(--mono); font-size: 9px; }
.io-rate.read { color: #78f0d9; }
.io-rate.write { color: #83baff; }
.io-busy { display: flex; align-items: center; gap: 7px; }
.io-busy .mini-bar { flex: 1; height: 4px; }
.bar-col { width: 15%; }

/* ------------------------------------------------------------------ */
/* Network page                                                        */
/* ------------------------------------------------------------------ */
.page-network {
  grid-template-columns: 1fr;
  grid-template-rows: 246px 256px;
}
.net-hero-card { grid-row: 1; }
.iface-card { grid-row: 2; }
.net-hero-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 195px minmax(0, 1fr) 195px;
  align-items: center;
  gap: 22px;
  padding: 0 4px;
}
.net-big { min-width: 0; }
.net-big.tx { text-align: right; }
.net-direction {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--muted-2);
}
.net-big b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 33px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.net-big.rx b { color: #78f0d9; text-shadow: 0 0 24px rgba(82, 230, 207, .13); }
.net-big.tx b { color: #8ec1ff; text-shadow: 0 0 24px rgba(90, 169, 255, .13); }
.net-big small {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted-2);
}
.net-big-chart { position: relative; height: 135px; min-width: 0; }
.net-big-chart .spark { height: 118px; }
.chart-legend {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .07em;
  color: var(--muted-2);
}
.chart-legend .rx { color: var(--cyan); }
.chart-legend .tx { color: var(--blue); }
.chart-legend .window { margin-left: auto; }
.chart-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 2px;
  margin-right: 3px;
  vertical-align: middle;
  background: currentColor;
}
.chart-legend .window::before { display: none; }
.net-summary {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 8px;
  border-top: 1px solid rgba(112, 159, 204, .08);
  font-size: 8px;
  color: var(--muted-2);
}
.net-summary b { font-family: var(--mono); font-weight: 500; color: var(--text-2); margin-left: 3px; }
.net-sum-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .1em;
  color: var(--green);
}
.net-sum-live i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }

.iface-table th:nth-child(1) { width: 18%; }
.iface-table th:nth-child(2) { width: 14%; }
.iface-table th:nth-child(3) { width: 13%; }
.iface-table th:nth-child(4) { width: 13%; }
.iface-table th:nth-child(5) { width: 20%; }
.iface-table th:nth-child(6) { width: 12%; }
.iface-table th:nth-child(7) { width: 10%; }
.iface-table td { height: 28px; }
.iface-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.iface-name i {
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 5px rgba(98, 230, 168, .7);
}
.iface-name i.virtual { background: var(--violet); box-shadow: 0 0 5px rgba(181, 140, 255, .5); }
.iface-name b { font-family: var(--mono); font-size: 10px; font-weight: 500; color: #e5f1ff; overflow: hidden; text-overflow: ellipsis; }
.iface-name span {
  flex: none;
  padding: 1px 4px;
  border: 1px solid rgba(98, 230, 168, .18);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: .06em;
  color: var(--green);
}
.iface-ip { color: var(--muted); font-family: var(--mono); font-size: 8.5px; }
.iface-rate { font-family: var(--mono); font-size: 9px; }
.iface-rate.rx { color: #78f0d9; }
.iface-rate.tx { color: #83baff; }
.iface-total { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.iface-errors { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.iface-errors.bad { color: var(--red); }
.iface-link { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.iface-link b { color: var(--text-2); font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Ticker & footer                                                     */
/* ------------------------------------------------------------------ */
.ticker {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 180, 92, .13);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(34, 28, 21, .4), rgba(11, 19, 28, .9) 18%, rgba(9, 17, 27, .92) 82%, rgba(24, 27, 31, .5));
  box-shadow: inset 0 1px 0 rgba(255, 205, 145, .035);
}
.ticker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 13px;
  border-right: 1px solid rgba(255, 180, 92, .16);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .16em;
  color: var(--amber);
}
.ticker-label svg { width: 13px; height: 13px; opacity: .9; }
.ticker-window {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent);
}
.ticker-track {
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-marquee 72s linear infinite;
}
.ticker-copy {
  display: inline-block;
  padding-right: 80px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .02em;
  color: #b9cce0;
}
.ticker-side {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--muted-2);
  white-space: nowrap;
}
.ticker-side .sep { height: 7px; }
@keyframes ticker-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.footline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .04em;
  color: var(--muted-2);
  white-space: nowrap;
}
.foot-left, .foot-hint, .foot-right { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.foot-left b { color: var(--muted); font-weight: 500; }
.foot-led {
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 5px rgba(98, 230, 168, .7);
}
.foot-led.offline { background: var(--red); box-shadow: 0 0 5px rgba(255, 96, 114, .7); }
.foot-led.paused { background: var(--amber); box-shadow: 0 0 5px rgba(255, 180, 92, .7); }
.foot-hint { justify-content: center; opacity: .75; }
.foot-right { justify-content: flex-end; }
.footline .sep { height: 7px; }

.hide-cursor { cursor: none; }

/* A hair of texture without hurting readability. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 12%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0, rgba(255, 255, 255, .012) 1px, transparent 1px, transparent 3px);
  opacity: .4;
  mix-blend-mode: soft-light;
}


/* Dynamic state helpers */
.tone-warn { color: var(--amber) !important; }
.tone-crit { color: var(--red) !important; }
.empty-note {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
}
.iface-name span.virtual-badge {
  border-color: rgba(181, 140, 255, .2);
  color: var(--violet);
}
.iface-name span.primary-badge {
  border-color: rgba(98, 230, 168, .22);
  color: var(--green);
}
@keyframes page-progress-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .page, .ring-value, .mini-bar > i, .core-track i, .disk-bar i, .composition .seg {
    transition: none !important;
  }
  .ticker-track { animation: none; }
  .live-pill[data-state="live"] i { animation: none; }
}