#app{height:100%; display:flex; flex-direction:column;}
#topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(6px);
}
#topbar .left{display:flex; gap:10px; align-items:center;}
#topbar .right{display:flex; gap:10px; align-items:center;}
#hostpill,#actpill{
  padding:5px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.15);
}
#actpill{color: var(--color-accent);}
#main{flex:1; display:grid; grid-template-columns: 1fr 380px; gap:0; min-height:0;}
#terminalPane{min-height:0; display:flex; flex-direction:column; padding: var(--pad);}
#scrollback{
  flex:1; overflow:auto;
  padding: 6px 10px 10px 6px;
  white-space:pre-wrap;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 calc(16px * var(--glow)) rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.03);
}
.line{margin: 0 0 8px 0;}
.line.sys{color: var(--color-dim);}
.line.err{color: var(--color-error);}
.line.warn{color: var(--color-warn);}
#inputRow{
  display:flex; gap:10px; align-items:center;
  margin-top:10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: rgba(0,0,0,.22);
}
#prompt{color: var(--color-accent); white-space:pre; text-shadow: 0 0 calc(14px * var(--glow)) rgba(255,255,255,.28);}
#cmdline{flex:1; background: transparent; border:none; outline:none; caret-color: var(--color-accent);}
#sidePane{
  border-left: 1px solid rgba(255,255,255,.10);
  padding: var(--pad);
  overflow:auto; min-height:0;
  background: rgba(0,0,0,.10);
}
.card{
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 calc(10px * var(--glow)) rgba(255,255,255,.07);
}
.cardTitle{font-size:12px; letter-spacing:.10em; text-transform:uppercase; color: var(--color-dim); margin-bottom:8px;}
.hint{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.12); color: var(--color-accent);}
#inventory, #nodes, #status{white-space:pre-wrap;}
@media (max-width: 980px){
  #main{grid-template-columns:1fr;}
  #sidePane{
    position:fixed; right:0; top:52px; bottom:0;
    width: min(380px, 92vw);
    background: var(--color-bg);
    transform: translateX(0);
    transition: transform .2s ease;
    z-index: 900;
  }
  #sidePane.closed{transform: translateX(110%);}
}