:root {
  --epc-cyan: #00cfff;
  --epc-blue: #1769e0;
  --epc-navy: #071a38;
}

body { position: relative; overflow-x: hidden; background: radial-gradient(circle at 50% 8%, rgba(0, 190, 255, .08), transparent 36%), linear-gradient(145deg, #edf4fb 0%, #f7faff 48%, #e8f0f8 100%) !important; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(135deg, rgba(0, 207, 255, .02), rgba(7, 26, 56, .01)), url('/epc-logo.png');
  background-blend-mode: screen;
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(640px, 72vw);
  opacity: .12;
  filter: saturate(1.15) drop-shadow(0 0 22px rgba(0, 180, 255, .18));
}

body > * { position: relative; z-index: 1; }

.login-page { background: #020b22 !important; }
.login-page::before {
  background-image: url('/epc-logo.png');
  background-size: cover;
  background-position: center;
  opacity: .5;
  filter: saturate(1.2) brightness(.85);
}

header {
  background-color: #071a38 !important;
  background-image: linear-gradient(120deg, #06142c 0%, #0a2c55 58%, #064468 100%), url('/epc-logo.png') !important;
  box-shadow: 0 3px 22px rgba(0, 32, 78, .3);
  border-bottom: 1px solid rgba(0, 207, 255, .35);
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 74px 74px;
}

header nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
header nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(109, 191, 232, .72) !important;
  border-radius: 7px !important;
  color: #f5fbff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0, 130, 190, .18)) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: inset 0 0 10px rgba(0, 207, 255, .08), 0 2px 8px rgba(0, 20, 60, .2) !important;
}
header nav a:hover { border-color: var(--epc-cyan) !important; background: linear-gradient(180deg, rgba(0,207,255,.26), rgba(0,90,150,.3)) !important; }

a { transition: color .15s ease, border-color .15s ease, box-shadow .15s ease; }
a:hover { color: var(--epc-cyan) !important; }

button, .card, input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
button:hover { border-color: var(--epc-cyan); box-shadow: 0 0 0 2px rgba(0, 207, 255, .12); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--epc-cyan); box-shadow: 0 0 0 3px rgba(0, 207, 255, .14); }

.card { box-shadow: 0 10px 30px rgba(16, 24, 40, .09), 0 0 0 1px rgba(0, 207, 255, .035); }

button {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid #5e87b5;
  border-radius: 6px;
  background: linear-gradient(180deg, #f9fcff 0%, #d7e5f3 48%, #b9cde1 100%);
  color: #10233f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(16, 52, 91, .16);
  letter-spacing: .01em;
}
button:hover { transform: translateY(-1px); background: linear-gradient(180deg, #ffffff 0%, #dff6ff 48%, #b9e4f4 100%); }
button:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(16, 52, 91, .2); }
nav a {
  border-color: rgba(91, 157, 207, .8) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0, 156, 220, .12));
  box-shadow: inset 0 0 10px rgba(0, 207, 255, .08), 0 2px 8px rgba(0, 40, 90, .16);
}