*{box-sizing:border-box}
:root{
  --bg:#0b0f17;--panel:#101827;--border:#1f2a44;--muted:#b7c2dd;--text:#e8eefc;--hint:#a9b7da;
  --btn:#13203a;--btn2:#0f1727;

  /* Reserve space for fixed footer (height + breathing room) */
  --footer-reserve: 25px;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
body{overflow:hidden}
.topbar{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border);background:rgba(16,24,39,.75);backdrop-filter: blur(8px)
}
.brand .title{font-weight:800;letter-spacing:.2px}
.brand .subtitle{font-size:12px;color:var(--muted)}
.top-controls{display:flex;gap:8px}
button{
  border:1px solid #2a3961;background:var(--btn);color:var(--text);
  padding:8px 12px;border-radius:12px;cursor:pointer;font-weight:700
}
button.ghost{background:var(--btn2)}
button:disabled{opacity:.45;cursor:not-allowed}
select,input{
  border:1px solid #2a3961;background:var(--btn2);color:var(--text);
  padding:8px 10px;border-radius:12px;min-width:0
}
.small{font-size:12px;color:var(--muted)}
.hint{margin-top:6px;font-size:12px;color:var(--hint)}
.layout{
  /* leave room for footer so content never overlaps */
  height:calc(100vh - 56px - var(--footer-reserve));
  display:grid;gap:10px;
  padding:10px;
  padding-bottom:calc(10px + var(--footer-reserve));
  grid-template-columns:1fr;
}
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:10px;min-height:0;display:flex;flex-direction:column;gap:10px
}
@media(min-width:980px){
  .layout{grid-template-columns:0.95fr 1.25fr}
}
.group{
  border:1px solid var(--border);border-radius:14px;padding:10px;min-height:0
}
.group.grow{flex:1}
.group-title{font-size:12px;color:#cfe0ff;font-weight:800;margin-bottom:8px;letter-spacing:.4px;text-transform:uppercase}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.toggle{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.status{padding:8px 10px;border-radius:12px;background:var(--btn2);border:1px solid #2a3961;color:#cfe0ff}
.digit{font-size:44px;font-weight:900;min-width:92px;text-align:center;padding:8px 10px;border-radius:12px;background:var(--btn2);border:1px solid #2a3961}
.meta{display:flex;flex-direction:column;gap:4px}
.buffer{margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:20px;padding:8px 10px;border-radius:12px;background:var(--btn2);border:1px solid #2a3961}
.result{margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--btn2);border:1px dashed #3b59a3;min-height:40px}
.plots{flex:1;min-height:0;display:grid;gap:10px;grid-template-rows:1fr 1fr}
.plot{border:1px solid var(--border);border-radius:14px;padding:8px;min-height:0;display:flex;flex-direction:column}
.plot-title{font-size:12px;color:#cfe0ff;font-weight:800;margin-bottom:6px}
canvas{flex:1;min-height:0;width:100%;border-radius:12px;background:var(--btn2);border:1px solid #2a3961}
.db{flex:1;display:flex;flex-direction:column}
.dbwrap{flex:1;min-height:0;overflow:hidden;border-radius:12px;border:1px solid var(--border)}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th,.tbl td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left}
.tbl tr:hover{background:#162446;cursor:pointer}

.detail{margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--btn2);border:1px solid #2a3961;font-size:12px;color:var(--muted);min-height:34px}
.tbl tr.hl{background:#1b2f5a}
.tbl tr.hl:hover{background:#1b2f5a}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 48px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(16, 24, 39, 0.75);
  backdrop-filter: blur(8px);

  border-top: 1px solid var(--border);

  font-size: 12px;
  color: var(--muted);
  z-index: 20;
}

.footer-left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer .gitlink {
  color: #9fb4ff;
  text-decoration: none;
}

.footer .gitlink:hover {
  text-decoration: underline;
}

.footer .badge {
  height: 14px;
  opacity: 0.6;
}

.footer .counter {
  height: 14px;
  opacity: 0.55;
}

.footer .source {
  opacity: 0.75;
  white-space: nowrap;
}

.footer .source a {
  color: #9fb4ff;
  text-decoration: none;
}

.footer .source a:hover {
  text-decoration: underline;
}