.gc{
  --gc-radius:10px;
  --gc-pill:999px;
  --gc-line:rgba(255,255,255,.12);
  --gc-line-soft:rgba(255,255,255,.07);
  --gc-fill:rgba(0,0,0,.22);
  --gc-fill-soft:rgba(0,0,0,.15);
  --gc-chip:rgba(255,255,255,.07);
  --gc-chip-line:rgba(255,255,255,.16);
  --gc-hover:rgba(255,255,255,.045);
  --gc-accent:#c9a15a;
  --gc-heading:inherit;
  color:inherit;
  background:var(--gc-fill);
  border:1px solid var(--gc-line);
  border-radius:var(--gc-radius);
  padding:22px 24px;
  margin:0 0 24px;
  width:100%;
  box-sizing:border-box;
  font-size:14px;
  line-height:1.55;
}
.gc-pulse{--gc-radius:0;--gc-pill:0}
.gc *{box-sizing:border-box}

.gc-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.gc h2{color:var(--gc-heading);font-size:24px;margin:3px 0 4px;font-weight:700}
.gc-heading p{opacity:.7;margin:0}
.gc-eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gc-accent)}
.gc-status{white-space:nowrap;font-size:12px;display:inline-flex;align-items:center;gap:7px;color:var(--gc-accent)}
.gc-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#41d18a;box-shadow:0 0 8px #41d18a}

.gc-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.gc-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;opacity:.85;margin:0}
.gc select,.gc input{max-width:100%;height:38px!important;margin:0!important;border:1px solid var(--gc-line);border-radius:var(--gc-radius);background:var(--gc-fill-soft);color:inherit;padding:7px 10px;font:inherit;box-shadow:none}
.gc button{height:38px;padding:0 16px;border:1px solid var(--gc-line);border-radius:var(--gc-radius);background:var(--gc-chip);color:inherit;cursor:pointer;font:inherit}
.gc button:hover{border-color:var(--gc-chip-line)}
.gc button:disabled{opacity:.45;cursor:default}

.gc-stream{max-height:600px;overflow:auto;overflow-wrap:anywhere;border:1px solid var(--gc-line);border-radius:var(--gc-radius);background:var(--gc-fill-soft)}
.gc-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:9px 14px;border-bottom:1px solid var(--gc-line-soft)}
.gc-row:last-child{border-bottom:0}
.gc-row:hover{background:var(--gc-hover)}
.gc-channel,.gc-cmd{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gc-accent);background:var(--gc-chip);border:1px solid var(--gc-chip-line);border-radius:var(--gc-pill);padding:2px 9px;line-height:1.6}
.gc-channel{order:1}
.gc-character{order:2;flex:0 0 auto;font-weight:700}
.gc-cmd{order:3}
.gc-message{order:4;flex:1 1 55%;min-width:120px;white-space:pre-wrap;word-break:break-word}
.gc-message::before{content:"\203A";color:var(--gc-accent);opacity:.7;margin-right:7px;font-weight:700}
.gc-time{order:5;flex:0 0 auto;margin-left:auto;font-size:11px;opacity:.55;white-space:nowrap}
.gc-account{display:block;font-size:11px;font-weight:400;opacity:.6}

.gc-empty,.gc-notice{padding:28px;text-align:center;opacity:.7}
.gc-notice{border:1px dashed var(--gc-line);border-radius:var(--gc-radius)}

.gc-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:12px;opacity:.7}

@media(max-width:640px){
  .gc{padding:14px}
  .gc-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .gc h2{font-size:20px}
  .gc-filters label{flex:1 1 40%;min-width:0}
  .gc-filters button{flex:1}
  .gc-time{flex-basis:100%;margin-left:0}
  .gc-message{flex-basis:100%}
  .gc-footer{flex-direction:column;align-items:flex-start}
}