:root{
  --bg:#000;
  --fg:#c8c8c8;
  --muted:#8a8a8a;
  --bar1:#00ff88;
  --bar2:#00d1ff;
  --bar3:#ff2ebd;
  --frame:#444;
  --cols:74ch;
}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:.3px;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.10;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
}

.wrap{max-width:var(--cols);margin:24px auto 80px;padding:0 3ch}
header{margin-bottom:2ch;text-align:center}
.logo{display:inline-block; overflow:auto;}
.logo b{color:#00ff88}
.hr{height:1px;background:var(--frame);opacity:.6;margin:1ch 0 2ch}

.panel{border:1px solid var(--frame);padding:2ch;margin-bottom:2ch}
.barline{display:flex;justify-content:space-between;margin-bottom:1ch;color:var(--muted)}
.grid{display:grid;gap:2ch}
.row{display:grid;grid-template-columns:15ch 1fr 8ch;gap:1ch;align-items:center}
.label{color:var(--muted)}

.bar{
  font-family:inherit;
  white-space:pre;
  border:1px solid var(--frame);
  padding:0 .5ch;
  overflow:hidden;
  min-width:calc(30ch + 1ch);
}
.bar[data-kind="cpu"]{color:var(--bar1)}
.bar[data-kind="temp"]{color:var(--bar2)}
.bar[data-kind="ram"]{color:var(--bar3)}
.bar[data-kind="disk"]{color:var(--bar2)}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:1ch;margin-top:1ch}
.kv p{margin:0;color:var(--muted)}
.kv b{color:var(--fg)}

.sparkwrap{display:grid;grid-template-columns:10ch 1fr;gap:1ch;align-items:center;margin:1ch 0}
.sparklabel{color:var(--muted)}
.spark{border:1px solid var(--frame);padding:.5ch;height:3ch;white-space:pre;overflow:hidden;color:var(--bar1)}

a{color:var(--bar1);text-decoration:none}
a:hover{text-decoration:underline}

@media (max-width:560px){
  body{font-size:15px}
  .wrap{padding:0 1.5ch}
  .row{grid-template-columns:13ch 1fr 7ch}
}

.logo pre{
  margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:14px;
  line-height:1.0;
  letter-spacing:0;
  white-space:pre;
  tab-size:8;
}

#content {line-height:21px;font-size:15px;margin-bottom:60px;padding-left:15px;padding-right:15px;}

/* Scrollable text panel (no visible scrollbars) */
.scrollbox{
  border:1px solid var(--frame);
  padding:1ch;
  height:22ch;            /* fixed viewport for content */
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.1;
  font: inherit;
}
/* hide scrollbars across browsers */
.scrollbox::-webkit-scrollbar{ width:0; height:0 }
.scrollbox{ scrollbar-width:none; -ms-overflow-style:none }

/* Floppy feed panel screen area */
.scrollbox {
  background-color: #262626;
}

.scrollbox pre[data-txt] {
  color: #bfe6bf;
}