:root {
  --hgp-bg: #03111f;
  --hgp-bg-deep: #020812;
  --hgp-panel: rgba(4, 22, 36, 0.9);
  --hgp-panel-strong: rgba(5, 28, 45, 0.96);
  --hgp-line: rgba(0, 224, 255, 0.58);
  --hgp-line-soft: rgba(0, 224, 255, 0.28);
  --hgp-glow: rgba(0, 224, 255, 0.24);
  --hgp-green: #35ffd0;
  --hgp-yellow: #ffd95a;
  --hgp-pink: #ff4c92;
  --hgp-text: #f7fbff;
  --hgp-muted: #a9c6d6;
}

html,
body {
  min-height: 100%;
  background-color: var(--hgp-bg-deep);
  color: var(--hgp-text);
}

body {
  background-image:
    linear-gradient(rgba(0, 224, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 224, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 52% 24%, rgba(40, 160, 255, 0.18), transparent 36%),
    radial-gradient(circle at 82% 8%, rgba(0, 255, 209, 0.08), transparent 30%),
    linear-gradient(180deg, #061527 0%, #020812 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  background-attachment: fixed;
}

.hero,
.panel,
.period-panel,
.table-panel,
.kpis article,
.side-card,
.steps,
.upload-box,
.hgp-primary-nav,
.hgp-program-nav,
.hgp-product-only-page-nav,
.hgp-product-only-nav,
.drop-zone,
.analysis-grid,
.account-card,
.register-table,
.selected-account,
.hgp-recon-upload-panel {
  border-color: var(--hgp-line-soft) !important;
  background-color: var(--hgp-panel) !important;
  box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.03), 0 18px 50px rgba(0, 0, 0, 0.28);
}

.hgp-primary-nav,
.hgp-program-nav,
.hgp-product-only-page-nav,
.hgp-product-only-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hgp-primary-nav a,
.hgp-program-nav a,
.hgp-product-only-page-nav a,
.hgp-product-only-nav a,
button,
.button,
.import-btn {
  border-color: var(--hgp-line) !important;
  background: linear-gradient(180deg, rgba(7, 54, 78, 0.96), rgba(4, 24, 38, 0.96)) !important;
  color: var(--hgp-text) !important;
  box-shadow: 0 0 18px rgba(0, 224, 255, 0.12);
}

.hgp-primary-nav a.active,
.hgp-program-nav a.active,
.hgp-product-only-page-nav a.active,
.hgp-product-only-nav a.active,
.side-nav nav a.active {
  background: linear-gradient(180deg, rgba(9, 83, 104, 0.98), rgba(5, 40, 58, 0.98)) !important;
  box-shadow: 0 0 24px var(--hgp-glow);
}

input,
select,
textarea {
  border-color: var(--hgp-line-soft) !important;
  background-color: rgba(2, 17, 28, 0.95) !important;
  color: var(--hgp-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(189, 215, 226, 0.72);
}

.kicker,
label span,
th,
.upload-box > span,
.period-panel span,
.side-card span {
  color: var(--hgp-green) !important;
}

.status,
.pill,
.badge {
  border-color: var(--hgp-line-soft);
}

.hgp-recon-upload-panel .upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hgp-recon-upload-drop {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px dashed var(--hgp-line);
  background: rgba(0, 224, 255, 0.05);
}

.hgp-recon-upload-note {
  color: var(--hgp-muted);
  margin: 0;
}

#supportUploadStatus {
  min-height: 22px;
  color: var(--hgp-muted);
}