/* ERATGUARD PRO V6.2 - ACCOUNT PAGE */

:root {
  --cyan: #22d3ee;
  --navy: #050d18;
  --panel: #0b2239;
}

body {
  background: radial-gradient(
    ellipse at 80% 0%,
    #103b55 0%,
    #050d18 60%
  ) !important;
  color: #edfaff !important;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

main {
  max-width: 1000px;
  margin: 30px auto 60px;
}

.panel {
  background: linear-gradient(
    135deg,
    #0c2038,
    #092a42
  ) !important;
  border: 1px solid #176681 !important;
  border-radius: 22px !important;
  box-shadow: 0 15px 45px #0005;
}

h1, h2, h3 {
  color: #f4fcff;
}

a {
  color: #67e8f9;
}

.button,
a.button {
  display: inline-block;
  background: #22d3ee !important;
  color: #04121f !important;
  padding: 13px 22px;
  border-radius: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px #00d5ef33;
}

.button:hover,
a.button:hover {
  background: #67e8f9 !important;
}

details {
  border: 1px solid #175c77;
  border-radius: 14px;
  background: #0a2035;
  padding: 15px;
  margin: 12px 0;
}

summary {
  cursor: pointer;
}

@media (max-width: 650px) {
  main {
    margin: 18px 14px 45px;
  }

  .panel {
    padding: 20px !important;
    border-radius: 17px !important;
  }
}

/* V6.2 ACCOUNT PREMIUM REFINEMENT */

body {
  background:
    radial-gradient(circle at 80% 8%, #0a486044, transparent 45%),
    #050d18 !important;
}

.panel {
  position: relative;
  overflow: hidden;
  border-color: #1689a5 !important;
  box-shadow:
    0 0 35px #00cfff12,
    0 18px 45px #0005 !important;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #22d3ee,
    transparent
  );
}

.panel h1,
.panel h2:first-child {
  letter-spacing: -.025em;
  text-shadow: 0 0 20px #22d3ee18;
}

.panel h3 {
  color: #a5f3fc;
}

.panel ol li,
.panel ul li {
  padding-bottom: 6px;
}

.panel a.button {
  transition: transform .2s, box-shadow .2s;
}

.panel a.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #22d3ee44;
}

@media (max-width: 650px) {
  .panel h1,
  .panel h2:first-child {
    font-size: clamp(25px, 6vw, 34px);
    line-height: 1.25;
  }

  .panel ol,
  .panel ul {
    padding-left: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel a.button {
    transition: none;
  }
}

/* V6.2 PREMIUM SECTION DIVIDERS */

.v62-section-divider {
  height: 1px;
  margin: 32px 0 24px;
  background: linear-gradient(
    90deg,
    #22d3ee,
    rgba(34, 211, 238, .18),
    transparent
  );
}

.v62-section-divider + h2 {
  color: #a5f3fc;
  font-size: clamp(21px, 4vw, 27px);
  letter-spacing: -.02em;
}

@media (max-width: 650px) {
  .v62-section-divider {
    margin: 25px 0 19px;
  }
}