/* HGC Control Panel v0.1.1
   Bootstrap-first. Keep CSS minimal. */

:root {
  --hgc-bg: #0b0f14;
  --hgc-panel: rgba(18,25,38,.72);
  --hgc-line: rgba(232,238,246,.12);
  --hgc-focus: #ffe07a;
}

body {
  background: radial-gradient(1200px 700px at 20% 10%, rgba(74,163,255,.13), transparent 60%),
              radial-gradient(900px 600px at 90% 30%, rgba(57,217,138,.10), transparent 55%),
              var(--hgc-bg);
  min-height: 100vh;
}

.hgc-card {
  background: var(--hgc-panel);
  border: 1px solid var(--hgc-line);
  border-radius: 1rem;
}

.hgc-topbar {
  background: var(--hgc-panel);
  border: 1px solid var(--hgc-line);
  border-radius: 1rem;
}

.btn {
  min-height: 50px;
  min-width: 50px;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--hgc-focus) !important;
  outline-offset: 2px;
}