body.howto-theme {
  color: #18324b;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 141, 39, 0.18), transparent 38%),
    radial-gradient(circle at 88% 15%, rgba(12, 124, 216, 0.18), transparent 34%),
    linear-gradient(160deg, #eef3f8 0%, #e7f0fa 45%, #f4f8fc 100%);
}

body.howto-theme .page-bg {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 132, 28, 0.22), transparent 31%),
    radial-gradient(circle at 86% 18%, rgba(6, 106, 190, 0.2), transparent 30%),
    radial-gradient(circle at 45% 88%, rgba(255, 255, 255, 0.72), transparent 42%);
}

body.howto-theme .site-header {
  background: rgba(250, 253, 255, 0.92);
  border-bottom: 1px solid rgba(20, 62, 102, 0.14);
  box-shadow: 0 12px 24px rgba(8, 35, 67, 0.12);
  backdrop-filter: blur(10px);
}

body.howto-theme .header-inner {
  min-height: 84px;
}

body.howto-theme .brand {
  gap: 0.8rem;
  color: #11365c;
}

body.howto-theme .brand-logo {
  display: block;
  width: clamp(150px, 20vw, 230px);
  height: auto;
  border-radius: 0.55rem;
  filter: drop-shadow(0 8px 16px rgba(15, 55, 93, 0.25));
}

body.howto-theme .main-nav a {
  color: #1b4a74;
  text-decoration: none;
  transition: color 180ms ease;
}

body.howto-theme .main-nav a:hover {
  color: #ff6d1a;
  text-decoration: none;
}

body.howto-theme .main-nav .button {
  background: linear-gradient(132deg, #0f5f9e 0%, #1e7dc7 58%, #ff8a2f 100%);
  color: #ffffff;
  border-color: rgba(15, 95, 158, 0.24);
}

body.howto-theme .main-nav .button:hover {
  filter: brightness(1.04);
}

body.howto-theme .hero {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(241, 248, 255, 0.94)),
    radial-gradient(circle at 88% 12%, rgba(255, 145, 34, 0.15), transparent 36%);
  border: 1px solid rgba(27, 84, 134, 0.16);
  box-shadow: 0 14px 34px rgba(15, 46, 80, 0.13);
}

body.howto-theme .card {
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(27, 84, 134, 0.15);
}

body.howto-theme .eyebrow {
  color: #ff7c21;
}

body.howto-theme .button {
  background: linear-gradient(132deg, #0f67a9 0%, #1884d0 60%, #ff8a2f 100%);
  color: #ffffff;
}

body.howto-theme .button-ghost {
  background: rgba(15, 103, 169, 0.06);
  color: #0f5e99;
  border-color: rgba(15, 94, 153, 0.3);
}

body.howto-theme .button-ghost:hover {
  background: rgba(15, 103, 169, 0.12);
}

body.howto-theme .site-footer {
  background: linear-gradient(130deg, rgba(8, 53, 92, 0.95), rgba(11, 72, 120, 0.92));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.howto-theme .maintenance-hero {
  position: relative;
  overflow: hidden;
}

body.howto-theme .maintenance-hero::before {
  content: "";
  position: absolute;
  inset: -28% -8% auto -8%;
  height: 62%;
  background:
    radial-gradient(circle at 20% 40%, rgba(255, 137, 31, 0.2), transparent 58%),
    radial-gradient(circle at 80% 55%, rgba(20, 134, 216, 0.18), transparent 56%);
  pointer-events: none;
}

body.howto-theme .maintenance-hero > * {
  position: relative;
  z-index: 1;
}

body.howto-theme .maintenance-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0.65rem;
}

body.howto-theme .maintenance-logo {
  display: block;
  width: min(100%, 620px);
  height: auto;
  border-radius: 0.85rem;
  box-shadow: 0 16px 30px rgba(9, 48, 86, 0.22);
}

body.howto-theme .maintenance-card {
  border-left: 4px solid #ff8424;
}

body.howto-theme .maintenance-highlights {
  margin-top: 0.85rem;
}

body.howto-theme .maintenance-highlights li {
  padding: 0.55rem 0.7rem;
  border-radius: 0.62rem;
  background: linear-gradient(120deg, rgba(11, 92, 157, 0.08), rgba(255, 138, 48, 0.09));
  border: 1px solid rgba(15, 93, 152, 0.16);
}

@media (max-width: 860px) {
  body.howto-theme .header-inner {
    min-height: 72px;
  }

  body.howto-theme .brand-logo {
    width: clamp(126px, 36vw, 190px);
  }
}