:root{
  --bg:#000;
  --fg:#00ff66;
  --fg2:#0fd45a;
  --line:#00aa44;
  --warn:#d96b6b;
  --panel: rgba(0,255,102,.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.shell{
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  padding:16px;
  background:
    linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)),
    repeating-linear-gradient(to bottom, rgba(0,255,102,.02) 0, rgba(0,255,102,.02) 2px, transparent 2px, transparent 4px);
}
.panel{
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(0,170,68,.2) inset;
  background:var(--panel);
}
.banner{padding:14px 16px}
.kicker{font-size:12px; letter-spacing:.18em; color:#7dffac}
.headline{font-size:26px; font-weight:700; margin-top:4px}
.subhead{margin-top:6px; color:#8dffb5}
.meta{margin-top:10px; color:#54c97c; font-size:12px}
.grid{
  display:grid;
  grid-template-columns:minmax(0,2.7fr) minmax(340px,1fr);
  gap:12px;
  min-height:0;
}
.table,.side{min-height:0}
.table{display:flex; flex-direction:column; overflow:hidden}
.panel-title{font-size:12px; letter-spacing:.12em; color:#7dffac; margin-bottom:10px}
.table-head,.row{
  display:grid;
  grid-template-columns:48px 2.2fr 1fr 72px 54px 84px;
  gap:10px;
  align-items:center;
}
.table-head{padding:10px 12px; border-bottom:1px solid rgba(0,170,68,.7); color:#b7ffd0; font-size:12px; text-transform:uppercase}
.rows{overflow:auto}
.row{padding:8px 12px; border-bottom:1px solid rgba(0,170,68,.14); font-size:13px; cursor:pointer; transition:background .12s ease, transform .12s ease}
.row:hover{background:rgba(0,255,102,.06)}
.row.selected{background:rgba(0,255,102,.1)}
.side{display:grid; grid-template-rows:1.25fr .8fr .8fr; gap:12px}
.detail,.status,.health{padding:12px; overflow:auto}
.footer{display:flex; justify-content:space-between; padding:10px 16px; color:#78f5a2; font-size:12px}
.detail b{color:#cfffdf}
.row .headline-cell{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.row.selected .headline-cell{white-space:nowrap}
@media (max-width: 1080px){
  .grid{grid-template-columns:1fr}
  .side{grid-template-rows:auto auto auto}
  .table-head{display:none}
  .row{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "rank headline"
      "rank meta";
    align-items:start;
    padding:12px;
    row-gap:6px;
  }
  .row > div:nth-child(1){grid-area:rank}
  .row > div:nth-child(2){grid-area:headline}
  .row > div:nth-child(3){display:none}
  .row > div:nth-child(4), .row > div:nth-child(5), .row > div:nth-child(6){
    display:none;
  }
  .row .headline-cell{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
    max-width:100%;
    font-size:15px;
    line-height:1.3;
  }
  .row > div:nth-child(1){
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    padding-top:1px;
  }
}
@media (max-width: 600px){
  .shell{padding:10px; gap:10px}
  .headline{font-size:20px}
  .meta{line-height:1.4}
  .row{
    grid-template-columns:44px 1fr;
    padding:13px 8px;
  }
  .row .headline-cell{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:14px;
    line-height:1.35;
    max-width:100%;
  }
  .row > div:nth-child(3), .row > div:nth-child(4), .row > div:nth-child(5), .row > div:nth-child(6){
    display:none;
  }
  .table, .detail, .status, .health{font-size:14px}
}

.footer span{white-space:nowrap}