:root{
  --shsp-accent:#57f3ff;
  --shsp-ink:#d7f9ff;
  --shsp-bg:#05060a;
  --shsp-card:rgba(10,13,20,.65);
  --shsp-border:rgba(87,243,255,.18);
  --shsp-shadow:0 18px 50px rgba(0,0,0,.55);
}

.shsp-homehud{
  color: var(--shsp-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Rows */
.shsp-hud-row{ display:grid; gap:12px; }
.shsp-hud-row--top{ grid-template-columns:1fr; }
.shsp-hud-row--main{ grid-template-columns: 1.15fr 1fr 1fr; margin-top:12px; }
.shsp-hud-row--bottom{ grid-template-columns: 1.2fr 1fr 1fr; margin-top:12px; }

/* Panels */
.shsp-hud-panel{
  border: 1px solid var(--shsp-border);
  background: rgba(0,0,0,.30);
  border-radius: 14px;
  box-shadow: var(--shsp-shadow);
  padding: 12px 12px;
  position: relative;
  overflow: hidden;
}
.shsp-hud-panel:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(87,243,255,.10), transparent 40%);
  opacity:.35;
  pointer-events:none;
}

.shsp-hud-kicker{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color: var(--shsp-accent);
  margin-bottom:8px;
}
.shsp-hud-line{ font-size:12px; opacity:.88; }
.shsp-hud-small{ font-size:12px; opacity:.85; margin-top:8px; }
.shsp-hud-small b{ color: var(--shsp-accent); }

/* Now Playing strip look */
.shsp-hud-nowplaying{
  padding: 12px 14px;
}

/* Globe */
.shsp-hud-globe-art{
  height: 220px;
  border-radius: 12px;
  border: 1px solid rgba(87,243,255,.14);
  background:
    radial-gradient(circle at 50% 45%, rgba(87,243,255,.18), transparent 55%),
    radial-gradient(circle at 50% 45%, rgba(87,243,255,.08), transparent 70%),
    repeating-radial-gradient(circle at 50% 45%, rgba(87,243,255,.10) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  box-shadow: inset 0 0 80px rgba(0,0,0,.55);
}

/* Files list */
.shsp-hud-item{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(87,243,255,.14);
  background: rgba(0,0,0,.26);
  color: var(--shsp-ink);
  text-decoration:none;
  margin-bottom:8px;
  font-size:12px;
}
.shsp-hud-item:hover{ border-color: rgba(87,243,255,.30); }

.shsp-hud-divider{
  height:1px;
  background: rgba(87,243,255,.14);
  margin: 10px 0;
}

.shsp-hud-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.shsp-hud-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 12px;
  border-radius: 10px;
  border:1px solid rgba(87,243,255,.16);
  background: rgba(0,0,0,.35);
  color: var(--shsp-ink);
  text-decoration:none;
  font-size:12px;
}
.shsp-hud-btn--primary{
  border-color: rgba(87,243,255,.45);
  background: linear-gradient(135deg, rgba(87,243,255,.22), rgba(0,0,0,.25));
}
.shsp-hud-btn:hover{ border-color: rgba(87,243,255,.30); }

/* Blank console panel */
.shsp-hud-blankbox{
  height: 260px;
  border-radius: 12px;
  border: 1px solid rgba(87,243,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px;
  opacity:.85;
}

/* Logs */
.shsp-hud-mono{
  font-size:12px;
  line-height:1.65;
  opacity:.92;
}

/* Waveform */
.shsp-hud-wave-art{
  height: 180px;
  border-radius: 12px;
  border: 1px solid rgba(87,243,255,.12);
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, rgba(87,243,255,.10) 0 2px, transparent 2px 10px);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}

/* Radar */
.shsp-hud-radar-art{
  height: 180px;
  border-radius: 12px;
  border: 1px solid rgba(87,243,255,.12);
  background:
    radial-gradient(circle at 50% 50%, rgba(87,243,255,.14), transparent 55%),
    conic-gradient(from 0deg, rgba(87,243,255,.14), transparent 60%, rgba(87,243,255,.10));
  box-shadow: inset 0 0 70px rgba(0,0,0,.55);
}

@media (max-width: 980px){
  .shsp-hud-row--main{ grid-template-columns:1fr; }
  .shsp-hud-row--bottom{ grid-template-columns:1fr; }
  .shsp-hud-blankbox{ height: 200px; }
  .shsp-hud-globe-art{ height: 200px; }
}