:root {
  --bg: #080010;
  --panel: rgba(249, 244, 255, .93);
  --panel-soft: rgba(236, 225, 250, .88);
  --ink: #24133b;
  --muted: #5c4b72;
  --line: #c9a7ff;
  --purple: #7c3aed;
  --purple-dark: #24133b;
  --gold: #d7b76a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  padding: 34px;
  color: var(--ink);
  font-family: "Lucida Console", "Courier New", monospace;
  background:
    linear-gradient(180deg, rgba(8, 0, 16, .18), rgba(8, 0, 16, .78)),
    radial-gradient(circle at 50% 14%, rgba(255, 248, 255, .18), transparent 31%),
    url("/assets/retro-cathedral-bg.png") center / cover fixed no-repeat;
}

.btnBackFloating {
  position: fixed;
  top: 28px;
  left: 28px;
  z-index: 20;
  min-width: 160px;
  padding: 14px 18px;
  color: #f8f1ff;
  font: 900 15px "Lucida Console", "Courier New", monospace;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(68, 28, 118, .88), rgba(31, 11, 58, .96));
  border: 2px solid rgba(201, 167, 255, .78);
  border-radius: 0;
  box-shadow:
    inset 0 0 14px rgba(124, 58, 237, .16),
    4px 4px 0 rgba(6, 0, 18, .72);
  text-shadow: 1px 1px 0 #12001f;
}

.btnBackFloating:hover {
  background:
    linear-gradient(180deg, #a66dff 0%, #7c3aed 48%, #3a0872 100%);
}

.helpdeskPage {
  width: min(1120px, 94vw);
  margin: 0 auto;
}

.helpdeskCard {
  position: relative;
  min-height: calc(100vh - 68px);
  padding: 30px;
  background:
    linear-gradient(180deg, rgba(20, 8, 42, .96), rgba(34, 15, 59, .94));
  border: 2px solid rgba(201, 167, 255, .78);
  outline: 1px solid rgba(255, 255, 255, .18);
  outline-offset: -8px;
  box-shadow:
    0 24px 54px rgba(6, 0, 18, .48),
    6px 6px 0 rgba(6, 0, 18, .72),
    inset 0 0 34px rgba(124, 58, 237, .16);
}

.helpdeskCard::before {
  content: "";
  display: block;
  height: 6px;
  margin: -14px -14px 24px;
  background:
    linear-gradient(90deg, transparent 0 4%, #c9a7ff 4% 8%, transparent 8% 12%),
    repeating-linear-gradient(90deg, #12001f 0 22px, #7c3aed 22px 24px, #12001f 24px 44px);
  border-bottom: 1px solid rgba(201, 167, 255, .58);
}

.helpdeskHeader {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 28px;
  text-align: center;
}

.logoGlow {
  position: relative;
  width: min(320px, 78vw);
  padding: 14px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(34, 15, 59, .98), rgba(16, 5, 34, .98));
  border: 2px solid rgba(201, 167, 255, .78);
  outline: 1px solid rgba(255, 255, 255, .16);
  outline-offset: -7px;
  box-shadow:
    0 18px 38px rgba(6, 0, 18, .42),
    4px 4px 0 rgba(6, 0, 18, .70),
    inset 0 0 24px rgba(124, 58, 237, .18);
}

.logoGlow img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(3px 3px 0 #12001f)
    drop-shadow(0 0 10px rgba(201, 167, 255, .24));
}

.badgeTitle {
  display: inline-block;
  padding: 9px 16px;
  color: #fff5dd;
  font-weight: 900;
  font-size: 13px;
  background: rgba(8, 0, 16, .72);
  border: 2px solid var(--gold);
  box-shadow: 3px 3px 0 rgba(6, 0, 18, .60);
  text-shadow: 1px 1px 0 #12001f;
}

.helpdeskHeader h1 {
  color: #f8f1ff;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  text-shadow:
    2px 2px 0 #12001f,
    0 0 10px rgba(201, 167, 255, .34);
}

.helpdeskHeader p {
  max-width: 760px;
  color: #cdbdf1;
  font-size: 17px;
  line-height: 1.5;
  text-shadow: 1px 1px 0 #12001f;
}

.helpdeskForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 24px;
  background:
    linear-gradient(180deg, var(--panel), var(--panel-soft));
  border: 2px solid var(--line);
  outline: 1px solid rgba(36, 19, 59, .78);
  outline-offset: -8px;
  box-shadow:
    0 16px 34px rgba(6, 0, 18, .34),
    4px 4px 0 rgba(6, 0, 18, .54),
    inset 0 0 24px rgba(124, 58, 237, .10);
}

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
  font-weight: 900;
  font-size: 15px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 58px;
  padding: 15px 16px;
  color: var(--ink);
  font: 700 15px "Lucida Console", "Courier New", monospace;
  background: rgba(255, 252, 255, .96);
  border: 2px solid rgba(188, 167, 230, .90);
  border-radius: 0;
  outline: none;
  box-shadow: inset 2px 2px 0 rgba(124, 58, 237, .10);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--purple);
  box-shadow:
    inset 2px 2px 0 rgba(124, 58, 237, .16),
    0 0 0 3px rgba(124, 58, 237, .14);
}

textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}

.wide {
  grid-column: 1 / -1;
}

.submitBtn {
  grid-column: 1 / -1;
  width: 100%;
  padding: 16px 18px;
  color: #ffffff;
  font: 900 17px "Lucida Console", "Courier New", monospace;
  cursor: pointer;
  background:
    linear-gradient(180deg, #a66dff 0%, #7c3aed 48%, #3a0872 100%);
  border: 2px solid #efe4ff;
  border-radius: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .34),
    4px 4px 0 rgba(6, 0, 18, .70);
  text-shadow: 1px 1px 0 #12001f;
}

.submitBtn:hover {
  background:
    linear-gradient(180deg, #f7ecff 0%, #a66dff 34%, #5b16bd 100%);
}

#helpdeskMsg {
  margin-top: 20px;
  padding: 14px;
  min-height: 18px;
  color: #f8f1ff;
  text-align: center;
  font-weight: 900;
  line-height: 1.5;
  text-shadow: 1px 1px 0 #12001f;
}

@media (max-width: 860px) {
  body {
    padding: 88px 16px 24px;
  }

  .btnBackFloating {
    top: 18px;
    left: 18px;
  }

  .helpdeskPage {
    width: 100%;
  }

  .helpdeskCard {
    min-height: 0;
    padding: 22px;
  }

  .helpdeskForm {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}

/* Molduras goticas 16-bit com vela e morcego */
.helpdeskCard,
.helpdeskForm,
.logoGlow {
  position: relative;
  border-color: #d6c4ff;
  box-shadow:
    0 0 0 2px #12001f,
    0 0 0 5px #c9a7ff,
    0 0 0 7px #3a0872,
    0 18px 38px rgba(6, 0, 18, .40),
    5px 5px 0 rgba(6, 0, 18, .72),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 0 28px rgba(124, 58, 237, .12);
}

.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

.helpdeskCard::after,
.logoGlow::after {
  top: -18px;
  right: 28px;
  width: 48px;
  height: 30px;
  background: #08020d;
  clip-path: polygon(
    0 42%, 12% 8%, 28% 38%, 40% 16%, 50% 42%,
    60% 16%, 72% 38%, 88% 8%, 100% 42%,
    76% 58%, 61% 55%, 50% 82%, 39% 55%, 24% 58%
  );
  filter:
    drop-shadow(0 -8px 0 rgba(201, 167, 255, .38))
    drop-shadow(2px 2px 0 #3a0872);
  transform-origin: 50% 0;
  animation: batHang 1.4s steps(2, end) infinite alternate;
}

.helpdeskForm::after {
  left: -18px;
  bottom: 24px;
  width: 24px;
  height: 54px;
  background:
    radial-gradient(ellipse at 50% 10px, #fff8c7 0 4px, #ffb22e 5px 8px, #e54858 9px 11px, transparent 12px),
    linear-gradient(90deg, transparent 0 6px, #fff1cf 6px 18px, transparent 18px 24px),
    linear-gradient(90deg, transparent 0 3px, #d7b76a 3px 21px, transparent 21px 24px);
  background-size: 24px 24px, 24px 34px, 24px 8px;
  background-position: 0 0, 0 18px, 0 46px;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 7px rgba(255, 178, 46, .75))
    drop-shadow(2px 2px 0 #12001f);
  animation: candleFlicker .9s steps(2, end) infinite alternate;
}

@keyframes batHang {
  from {
    transform: translateY(0) rotate(-3deg) scaleX(1);
  }
  to {
    transform: translateY(3px) rotate(3deg) scaleX(.94);
  }
}

@keyframes candleFlicker {
  from {
    filter:
      drop-shadow(0 0 5px rgba(255, 178, 46, .62))
      drop-shadow(2px 2px 0 #12001f);
    transform: translateY(0) scaleY(1);
  }
  to {
    filter:
      drop-shadow(0 0 10px rgba(255, 230, 140, .92))
      drop-shadow(2px 2px 0 #12001f);
    transform: translateY(-1px) scaleY(1.06);
  }
}

/* Moldura tipo quadro antigo com ornamentos externos */
.helpdeskPage {
  overflow: visible;
}

.helpdeskCard,
.helpdeskForm,
.logoGlow {
  overflow: visible;
  border: 10px solid #7a3f22;
  border-image: linear-gradient(
    135deg,
    #12001f 0%,
    #4b2137 10%,
    #d7b76a 18%,
    #fff2bc 25%,
    #7a3f22 34%,
    #2a123b 48%,
    #d7b76a 62%,
    #7a3f22 76%,
    #12001f 100%
  ) 14;
  border-radius: 0;
  outline: 2px solid #d7b76a;
  outline-offset: -18px;
  box-shadow:
    0 0 0 2px #08020d,
    0 0 0 5px #2a123b,
    0 0 0 8px #d7b76a,
    0 0 0 12px #08020d,
    0 18px 38px rgba(6, 0, 18, .46),
    6px 6px 0 rgba(6, 0, 18, .72),
    inset 0 0 0 2px rgba(255, 245, 211, .38),
    inset 0 0 28px rgba(124, 58, 237, .12);
}

.helpdeskCard::before,
.logoGlow::before {
  content: "";
  position: absolute;
  top: -42px;
  right: 34px;
  width: 72px;
  height: 54px;
  pointer-events: none;
  z-index: 20;
  background:
    linear-gradient(#d7b76a, #d7b76a) 50% 0 / 3px 18px no-repeat,
    radial-gradient(ellipse at 50% 64%, #08020d 0 10px, transparent 11px),
    radial-gradient(ellipse at 24% 58%, #08020d 0 18px, transparent 19px),
    radial-gradient(ellipse at 76% 58%, #08020d 0 18px, transparent 19px);
  clip-path: polygon(
    48% 0, 52% 0, 52% 30%, 62% 34%, 72% 18%, 78% 42%,
    100% 30%, 86% 58%, 68% 54%, 56% 68%, 50% 92%,
    44% 68%, 32% 54%, 14% 58%, 0 30%, 22% 42%,
    28% 18%, 38% 34%, 48% 30%
  );
  filter:
    drop-shadow(2px 2px 0 #3a0872)
    drop-shadow(0 0 8px rgba(201, 167, 255, .42));
  transform-origin: 50% 0;
  animation: batOutside 1.45s steps(2, end) infinite alternate;
}

.helpdeskForm::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: 18px;
  width: 32px;
  height: 76px;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(ellipse at 50% 12px, #fff8c7 0 5px, #ffb22e 6px 10px, #e54858 11px 14px, transparent 15px),
    linear-gradient(90deg, transparent 0 8px, #fff1cf 8px 24px, transparent 24px 32px),
    linear-gradient(90deg, transparent 0 4px, #d7b76a 4px 28px, transparent 28px 32px),
    linear-gradient(90deg, transparent 0 2px, #08020d 2px 30px, transparent 30px 32px);
  background-size: 32px 30px, 32px 42px, 32px 8px, 32px 4px;
  background-position: 0 0, 0 24px, 0 64px, 0 72px;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 9px rgba(255, 178, 46, .78))
    drop-shadow(3px 3px 0 #12001f);
  animation: candleOutside .85s steps(2, end) infinite alternate;
}

.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  content: "";
  position: absolute;
  inset: -17px;
  pointer-events: none;
  z-index: 19;
  background:
    linear-gradient(90deg, transparent 0 54px, #d7b76a 54px calc(100% - 54px), transparent calc(100% - 54px)) top 9px left 0 / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 54px, #7a3f22 54px calc(100% - 54px), transparent calc(100% - 54px)) bottom 9px left 0 / 100% 4px no-repeat,
    linear-gradient(180deg, transparent 0 54px, #d7b76a 54px calc(100% - 54px), transparent calc(100% - 54px)) left 9px top 0 / 3px 100% no-repeat,
    linear-gradient(180deg, transparent 0 54px, #7a3f22 54px calc(100% - 54px), transparent calc(100% - 54px)) right 9px top 0 / 4px 100% no-repeat,
    radial-gradient(circle at 14px 14px, #fff2bc 0 5px, #d7b76a 6px 9px, transparent 10px) top left / 44px 44px no-repeat,
    radial-gradient(circle at calc(100% - 14px) 14px, #fff2bc 0 5px, #d7b76a 6px 9px, transparent 10px) top right / 44px 44px no-repeat,
    radial-gradient(circle at 14px calc(100% - 14px), #7a3f22 0 6px, #d7b76a 7px 10px, transparent 11px) bottom left / 44px 44px no-repeat,
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #7a3f22 0 6px, #d7b76a 7px 10px, transparent 11px) bottom right / 44px 44px no-repeat;
  opacity: .85;
}

@keyframes batOutside {
  from {
    transform: translateY(0) rotate(-2deg) scaleX(1);
  }
  to {
    transform: translateY(4px) rotate(3deg) scaleX(.92);
  }
}

@keyframes candleOutside {
  from {
    transform: translateY(0) scaleY(1);
    filter:
      drop-shadow(0 0 6px rgba(255, 178, 46, .70))
      drop-shadow(3px 3px 0 #12001f);
  }
  to {
    transform: translateY(-2px) scaleY(1.07);
    filter:
      drop-shadow(0 0 12px rgba(255, 230, 140, .96))
      drop-shadow(3px 3px 0 #12001f);
  }
}

@media (prefers-reduced-motion: reduce) {
  .helpdeskCard::before,
  .helpdeskForm::before,
  .logoGlow::before {
    animation: none;
  }
}

/* Override final: tamanhos menores e moldura limpa */
.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  inset: -12px;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px left 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 24px left 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px right 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 24px right 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(#08020d, #08020d) top left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) top right / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom right / 28px 28px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px right 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px right 6px / 16px 16px no-repeat;
}

.helpdeskCard::before,
.logoGlow::before {
  top: -30px;
  right: 28px;
  width: 70px;
  height: 48px;
}

.helpdeskForm::before {
  left: -18px;
  bottom: 20px;
  width: 38px;
  height: 68px;
}

/* Ajuste fino: ornamentos menores e cantos sem glitch visual */
.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  inset: -12px;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px left 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 24px left 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px right 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 24px right 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(#08020d, #08020d) top left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) top right / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom right / 28px 28px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px right 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px right 6px / 16px 16px no-repeat;
}

.helpdeskCard::before,
.logoGlow::before {
  top: -30px;
  right: 28px;
  width: 70px;
  height: 48px;
}

.helpdeskForm::before {
  left: -18px;
  bottom: 20px;
  width: 38px;
  height: 68px;
}

/* Refinamento SOTN: ornamentos pixelados e moldura sem falhas */
.helpdeskCard,
.helpdeskForm,
.logoGlow {
  border: 4px solid #100518;
  border-image: none;
  border-radius: 0;
  outline: 2px solid #d7b76a;
  outline-offset: -14px;
  box-shadow:
    0 0 0 2px #d7b76a,
    0 0 0 5px #6f3724,
    0 0 0 8px #180824,
    0 0 0 12px #c99a45,
    0 0 0 15px #07020d,
    0 18px 38px rgba(6, 0, 18, .50),
    6px 6px 0 rgba(6, 0, 18, .72),
    inset 0 0 0 2px rgba(255, 242, 188, .52),
    inset 0 0 0 5px rgba(122, 63, 34, .56),
    inset 0 0 28px rgba(124, 58, 237, .12);
}

.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  inset: -13px;
  border: 0;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 5px left 0 / 100% 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 9px left 0 / 100% 5px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 5px left 0 / 100% 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 9px left 0 / 100% 5px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 0 left 5px / 2px 100% no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 0 left 9px / 5px 100% no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 0 right 5px / 2px 100% no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 0 right 9px / 5px 100% no-repeat,
    conic-gradient(from 45deg, #08020d 0 25%, #d7b76a 0 50%, #7a3f22 0 75%, #08020d 0) top left / 34px 34px no-repeat,
    conic-gradient(from 135deg, #08020d 0 25%, #d7b76a 0 50%, #7a3f22 0 75%, #08020d 0) top right / 34px 34px no-repeat,
    conic-gradient(from -45deg, #08020d 0 25%, #d7b76a 0 50%, #4b2137 0 75%, #08020d 0) bottom left / 34px 34px no-repeat,
    conic-gradient(from -135deg, #08020d 0 25%, #d7b76a 0 50%, #4b2137 0 75%, #08020d 0) bottom right / 34px 34px no-repeat;
  opacity: 1;
}

.helpdeskCard::before,
.logoGlow::before {
  top: -48px;
  right: 28px;
  width: 112px;
  height: 76px;
  background: url("assets/ornament-bat-16bit.svg") center / contain no-repeat;
  clip-path: none;
  filter:
    drop-shadow(3px 3px 0 #08020d)
    drop-shadow(0 0 8px rgba(201, 167, 255, .45));
  transform-origin: 50% 10%;
  animation: batSotnHang 1.25s steps(2, end) infinite alternate;
  image-rendering: pixelated;
}

.helpdeskForm::before {
  left: -28px;
  bottom: 18px;
  width: 58px;
  height: 104px;
  background: url("assets/ornament-candelabrum-blue-16bit.svg?v=6") center / contain no-repeat;
  clip-path: none;
  filter:
    drop-shadow(3px 3px 0 #08020d)
    drop-shadow(0 0 10px rgba(56, 189, 248, .72))
    drop-shadow(0 0 16px rgba(124, 58, 237, .42));
  animation: candleSotnFlicker .78s steps(2, end) infinite alternate;
  image-rendering: pixelated;
}

@keyframes batSotnHang {
  from {
    transform: translateY(0) rotate(-1deg);
  }
  to {
    transform: translateY(4px) rotate(2deg);
  }
}

@keyframes candleSotnFlicker {
  from {
    transform: translateY(0);
    filter:
      drop-shadow(3px 3px 0 #08020d)
      drop-shadow(0 0 8px rgba(56, 189, 248, .58));
  }
  to {
    transform: translateY(-2px);
    filter:
      drop-shadow(3px 3px 0 #08020d)
      drop-shadow(0 0 17px rgba(124, 58, 237, .82));
  }
}

@media (prefers-reduced-motion: reduce) {
  .helpdeskCard::before,
  .helpdeskForm::before,
  .logoGlow::before {
    animation: none;
  }
}

/* Override final definitivo: ornamentos discretos e bordas estaveis */
.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  inset: -12px;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px left 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 24px left 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px right 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 24px right 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(#08020d, #08020d) top left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) top right / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom right / 28px 28px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px right 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px right 6px / 16px 16px no-repeat;
}

.helpdeskCard::before,
.logoGlow::before {
  top: -30px;
  right: 28px;
  width: 70px;
  height: 48px;
}

.helpdeskForm::before {
  left: -18px;
  bottom: 20px;
  width: 38px;
  height: 68px;
}

/* Usa somente o novo castical azul, sem reaproveitar a vela antiga */
.helpdeskForm::before {
  display: block;
  content: "";
  left: -18px;
  bottom: 20px;
  width: 38px;
  height: 68px;
  background: url("assets/ornament-candelabrum-blue-16bit.svg?v=6") center / contain no-repeat;
  clip-path: none;
  filter:
    drop-shadow(3px 3px 0 #08020d)
    drop-shadow(0 0 10px rgba(56, 189, 248, .72))
    drop-shadow(0 0 16px rgba(124, 58, 237, .42));
  animation: candleSotnFlicker .78s steps(2, end) infinite alternate;
}

/* Modo somente moldura: remove morcegos, velas e casticais */
.helpdeskCard::before,
.helpdeskForm::before,
.logoGlow::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* Moldura limpa: remove todos os pedacos extras marcados */
.helpdeskCard::before,
.helpdeskCard::after,
.helpdeskForm::before,
.helpdeskForm::after,
.logoGlow::before,
.logoGlow::after {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  inset: auto !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

.helpdeskCard,
.helpdeskForm,
.logoGlow {
  border: 4px solid #08020d !important;
  border-radius: 0 !important;
  outline: 2px solid #d7b76a !important;
  outline-offset: -12px !important;
  box-shadow:
    0 0 0 2px #d7b76a,
    0 0 0 5px #7a3f22,
    0 0 0 8px #180824,
    0 0 0 11px #c99a45,
    0 0 0 14px #07020d,
    6px 6px 0 rgba(6, 0, 18, .72),
    0 18px 38px rgba(6, 0, 18, .42),
    inset 0 0 0 2px rgba(255, 242, 188, .45) !important;
}

/* Velas laterais 16-bit com fogo azul */
.helpdeskCard,
.helpdeskForm,
.logoGlow {
  overflow: visible !important;
}

.helpdeskCard::before,
.helpdeskForm::before,
.logoGlow::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -19px !important;
  top: calc(50% - 25px) !important;
  right: auto !important;
  bottom: auto !important;
  width: 34px !important;
  height: 50px !important;
  min-width: 34px !important;
  min-height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: url("assets/ornament-candelabrum-blue-16bit.svg?v=6") center / contain no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  pointer-events: none !important;
  z-index: 8 !important;
  image-rendering: pixelated;
  filter:
    drop-shadow(2px 2px 0 #08020d)
    drop-shadow(0 0 7px rgba(56, 189, 248, .68))
    drop-shadow(0 0 13px rgba(124, 58, 237, .48)) !important;
  animation: sideBlueCandleFlicker .82s steps(2, end) infinite alternate !important;
}

.logoGlow::before {
  left: -15px !important;
  top: calc(50% - 21px) !important;
  width: 28px !important;
  height: 42px !important;
}

@keyframes sideBlueCandleFlicker {
  from {
    transform: none;
    filter:
      drop-shadow(2px 2px 0 #08020d)
      drop-shadow(0 0 5px rgba(56, 189, 248, .48))
      drop-shadow(0 0 8px rgba(124, 58, 237, .28));
  }
  to {
    transform: none;
    filter:
      drop-shadow(2px 2px 0 #08020d)
      drop-shadow(0 0 9px rgba(56, 189, 248, .78))
      drop-shadow(0 0 14px rgba(124, 58, 237, .48));
  }
}

@media (max-width: 760px) {
  .helpdeskCard::before,
  .helpdeskForm::before {
    display: none !important;
  }
}

/* Morcego pixelado no outro lado da moldura */
.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: -20px !important;
  left: auto !important;
  top: calc(50% - 24px) !important;
  bottom: auto !important;
  width: 39px !important;
  height: 48px !important;
  min-width: 39px !important;
  min-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: url("assets/ornament-bat-red-16bit.svg?v=1") center / contain no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  pointer-events: none !important;
  z-index: 8 !important;
  image-rendering: pixelated;
  filter:
    drop-shadow(2px 2px 0 #08020d)
    drop-shadow(0 0 9px rgba(229, 72, 53, .36)) !important;
  animation: sideBatSwing 1.25s steps(2, end) infinite alternate !important;
}

.logoGlow::after {
  right: -15px !important;
  top: calc(50% - 21px) !important;
  width: 32px !important;
  height: 40px !important;
}

@keyframes sideBatSwing {
  from {
    transform: translateY(0) rotate(-2deg);
  }
  to {
    transform: translateY(2px) rotate(2deg);
  }
}

@media (max-width: 760px) {
  .helpdeskCard::after,
  .helpdeskForm::after {
    display: none !important;
  }
}

/* Remove morcegos, mantendo as velas azuis */
.helpdeskCard::after,
.helpdeskForm::after,
.logoGlow::after {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}