html body.octa-helper-page,
html body[data-helper-theme="hub"] {
  background:#2A1714 !important;
  background-image:
    linear-gradient(135deg, rgba(236,21,16,.56), rgba(43,29,23,.84) 48%, rgba(236,21,16,.50)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 76px) !important;
  color:#1A1A1A;
  min-height:100vh;
  position:relative;
}

html body.octa-helper-page::before,
html body[data-helper-theme="hub"]::before {
  content:"";
  position:fixed;
  inset:-18% -12%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(236,21,16,.20), transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(255,176,32,.14), transparent 36%);
}

html body.octa-helper-page > *,
html body[data-helper-theme="hub"] > * {
  position:relative;
  z-index:1;
}

html body.octa-helper-page .top,
html body[data-helper-theme="hub"] .top {
  color:#FFF7EF;
}

html body.octa-helper-page .top p,
html body[data-helper-theme="hub"] .top p {
  color:#DCCDC2;
}

html body.octa-helper-page .back,
html body[data-helper-theme="hub"] .back {
  color:#FFF7EF;
  border-color:rgba(255,255,255,.42);
  background:rgba(54,35,28,.52);
  backdrop-filter:blur(8px);
}

html body.octa-helper-page .section,
html body.octa-helper-page .card,
html body.octa-helper-page .link-box,
html body.octa-helper-page .day-card,
html body.octa-helper-page .panel,
html body[data-helper-theme="hub"] .section,
html body[data-helper-theme="hub"] .card,
html body[data-helper-theme="hub"] .link-box,
html body[data-helper-theme="hub"] .day-card,
html body[data-helper-theme="hub"] .panel {
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

html body.octa-helper-page .empty,
html body[data-helper-theme="hub"] .empty {
  color:#FFF7EF;
}

@media (max-width:680px) {
  html,
  html body.octa-helper-page,
  html body[data-helper-theme="hub"] {
    max-width:100%;
    overflow-x:hidden;
  }

  html body.octa-helper-page,
  html body[data-helper-theme="hub"] {
    padding-left:10px;
    padding-right:10px;
  }

  html body.octa-helper-page .wrap,
  html body[data-helper-theme="hub"] .wrap {
    width:100%;
    max-width:100%;
  }

  html body.octa-helper-page .top,
  html body[data-helper-theme="hub"] .top {
    min-width:0;
    overflow:hidden;
  }

  html body.octa-helper-page .top h1,
  html body[data-helper-theme="hub"] .top h1,
  html body.octa-helper-page .top p,
  html body[data-helper-theme="hub"] .top p {
    overflow-wrap:anywhere;
  }

  html body.octa-helper-page .back,
  html body[data-helper-theme="hub"] .back,
  html body.octa-helper-page button,
  html body[data-helper-theme="hub"] button,
  html body.octa-helper-page input,
  html body[data-helper-theme="hub"] input,
  html body.octa-helper-page select,
  html body[data-helper-theme="hub"] select {
    max-width:100%;
  }

  html body.octa-helper-page input,
  html body[data-helper-theme="hub"] input,
  html body.octa-helper-page select,
  html body[data-helper-theme="hub"] select {
    font-size:16px;
  }

  html body.octa-helper-page .card,
  html body.octa-helper-page .section,
  html body.octa-helper-page .panel,
  html body.octa-helper-page .day-card,
  html body[data-helper-theme="hub"] .card,
  html body[data-helper-theme="hub"] .section,
  html body[data-helper-theme="hub"] .panel,
  html body[data-helper-theme="hub"] .day-card {
    max-width:100%;
    overflow-wrap:anywhere;
  }
}