@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  --hub-bg: #060606;
  --hub-surface: #0a0a0a;
  --hub-surface-2: #0d0d0d;
  --hub-border: #1a1a1a;
  --hub-text: #bcbcbc;
  --hub-bright: #e3e3e3;
  --hub-tech: #00ff88;
  --hub-games: #4488ff;
  --hub-mono: 'JetBrains Mono', Consolas, monospace;
  --hub-display: 'Space Grotesk', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--hub-bg); color-scheme: dark; }
body.hub {
  background-color: var(--hub-bg);
  background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--hub-text);
  font: 18px/1.6 var(--hub-mono);
  min-height: 100vh;
}
body.hub::after {
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,136,.008) 2px 4px);
  content: '';
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 5;
}
a { color: inherit; }
#hub-network { inset: 0; pointer-events: none; position: fixed; z-index: 0; }
.hub-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1600px;
  min-height: 100vh;
  padding: 0 48px 42px;
  position: relative;
  width: 88vw;
  z-index: 1;
}
.hub-wrapper > main { flex: 1; }
.hub-status-bar {
  align-items: center;
  background: rgba(8,8,8,.96);
  border-bottom: 1px solid #111;
  display: flex;
  justify-content: space-between;
  margin: 0 -48px 36px;
  padding: 16px 48px;
}
.hub-prompt { color: var(--hub-tech); font-size: 15px; font-weight: 700; }
.hub-cursor {
  background: var(--hub-tech);
  display: inline-block;
  height: 17px;
  margin-left: 4px;
  vertical-align: -2px;
  width: 9px;
}
.hub-uptime { color: #303030; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.hub-kicker { color: #383838; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; }
.hub-identity {
  align-items: center;
  background: linear-gradient(110deg, rgba(0,255,136,.04), var(--hub-surface-2) 46%);
  border: 1px solid var(--hub-border);
  border-top: 2px solid #292929;
  border-radius: 4px;
  display: flex;
  gap: 26px;
  margin-bottom: 14px;
  padding: 30px;
}
.hub-avatar {
  border: 2px solid rgba(0,255,136,.22);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 82px;
  object-fit: cover;
  width: 82px;
}
.hub-identity-info { flex: 1; min-width: 0; }
.hub-name { color: var(--hub-bright); font: 700 34px/1.1 var(--hub-display); letter-spacing: -.5px; }
.hub-tagline { color: #555; font-size: 14px; margin-top: 8px; }
.hub-links { display: flex; gap: 22px; margin-top: 14px; }
.hub-links a { color: #555; font-size: 12px; text-decoration: none; }
.hub-links a:hover, .hub-links .hub-link-accent { color: rgba(0,255,136,.65); }
.hub-sys { color: #383838; display: grid; font-size: 12px; gap: 6px; text-align: right; }
.hub-grid { display: grid; gap: 14px; grid-template-columns: 1.15fr .85fr; margin-bottom: 14px; }
.hub-panel {
  border: 1px solid;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 32px;
  position: relative;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.hub-panel-tech {
  background: linear-gradient(145deg, #0c170d, var(--hub-surface-2) 60%);
  border-color: rgba(0,255,136,.15);
  border-top-color: rgba(0,255,136,.42);
}
.hub-panel-tech:hover { border-color: rgba(0,255,136,.3); box-shadow: 0 0 28px rgba(0,255,136,.06); transform: translateY(-1px); }
.hub-panel-games {
  background: linear-gradient(145deg, #0b0c18, var(--hub-surface-2) 60%);
  border-color: rgba(68,136,255,.13);
  border-top-color: rgba(68,136,255,.35);
}
.hub-panel-heading { align-items: center; display: flex; justify-content: space-between; }
.hub-panel-label { color: #555; font-size: 12px; letter-spacing: 1px; }
.hub-panel-tech .hub-panel-label { color: rgba(0,255,136,.5); }
.hub-panel-games .hub-panel-label { color: rgba(68,136,255,.5); }
.hub-panel-status { color: #424242; font-size: 11px; letter-spacing: 1px; }
.hub-panel-status-on { color: rgba(0,255,136,.55); }
.hub-panel-status i, .hub-assets i {
  background: var(--hub-tech);
  border-radius: 50%;
  display: inline-block;
  height: 5px;
  width: 5px;
}
.hub-panel h2 { color: var(--hub-bright); font: 600 28px/1.2 var(--hub-display); margin-top: 36px; }
.hub-panel-copy { color: #626262; font-size: 15px; margin: 13px 0 30px; max-width: 48ch; }
.hub-panel-posts { border-top: 1px solid #151515; }
.hub-post-row { border-bottom: 1px solid #141414; display: flex; gap: 15px; justify-content: space-between; padding: 12px 0; }
.hub-post-title { color: #666; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-post-row time { color: #3d3d3d; flex: 0 0 auto; font-size: 11px; }
.hub-panel-cta { color: rgba(0,255,136,.65); font-size: 13px; margin-top: auto; padding-top: 26px; }
.hub-panel-cta-dim { color: rgba(68,136,255,.3); }
.hub-terminal-lines { color: rgba(68,136,255,.34); display: grid; font-size: 13px; gap: 9px; margin-top: 30px; }
.hub-placeholder {
  align-items: center;
  border: 1px dashed #1b1b1b;
  border-radius: 4px;
  color: #282828;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  letter-spacing: 1px;
  padding: 19px 25px;
  text-transform: uppercase;
}
.hub-footer { border-top: 1px solid #111; color: #383838; display: flex; font-size: 12px; justify-content: space-between; margin-top: 40px; padding: 22px 0 2px; }
.hub-nav { border-bottom: 1px solid #151515; display: flex; gap: 28px; margin-bottom: 30px; padding-bottom: 19px; }
.hub-nav a, .hub-nav span { color: #454545; font-size: 13px; text-decoration: none; }
.hub-nav a:hover, .hub-nav .hub-nav-active { color: rgba(0,255,136,.62); }
.hub-nav span { cursor: not-allowed; }