/* ========================================================
       MOOSIZE PUBLIC TOOL DESIGN SYSTEM
       ======================================================== */

    :root {
      color-scheme: dark !important;

      --background: #050718 !important;
      --panel: #11153f !important;
      --panel-2: #17164a !important;

      --ink: #f7f8ff !important;
      --text: #f7f8ff !important;

      --muted: #aab3cc !important;
      --soft: #050718 !important;

      --accent: #8b5cf6 !important;
      --accent-hover: #9f67ff !important;

      --border: rgba(126, 111, 255, .30) !important;
      --warning: #f2b84b !important;
      --danger: #ff8585 !important;
    }

    html {
      background: #050718 !important;
    }

    body {
      margin: 0 !important;

      background:
        radial-gradient(
          circle at 76% 0%,
          rgba(103, 72, 255, .13),
          transparent 34rem
        ),
        #050718 !important;

      color: #f7f8ff !important;

      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
    }

    body > main,
    body main {
      width: min(1180px, calc(100% - 48px)) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding: 0 0 84px !important;
      box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       NAVIGATION
       -------------------------------------------------------- */

    .mz-public-tool-nav {
      min-height: 76px !important;

      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;

      gap: 28px !important;

      margin: 0 0 68px !important;
      padding: 0 !important;

      border-bottom:
        1px solid rgba(255, 255, 255, .08) !important;
    }

    .mz-public-tool-brand {
      color: #ffffff !important;

      font-size: .95rem !important;
      font-weight: 900 !important;

      letter-spacing: .10em !important;

      text-decoration: none !important;
    }

    .mz-public-tool-nav-links {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      flex-wrap: wrap !important;

      gap: 24px !important;
    }

    .mz-public-tool-nav a {
      color: #c5cbe0 !important;

      font-size: .85rem !important;
      font-weight: 750 !important;

      text-decoration: none !important;
    }

    .mz-public-tool-nav a:hover {
      color: #ffffff !important;
    }


    /* --------------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------------- */

    body h1,
    body h2,
    body h3 {
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

      color: #f7f8ff !important;
    }

    body h1 {
      max-width: 900px !important;

      margin-top: 0 !important;

      font-size:
        clamp(3rem, 6vw, 5.3rem) !important;

      font-weight: 850 !important;

      letter-spacing: -.055em !important;
      line-height: .98 !important;
    }

    body h2 {
      letter-spacing: -.035em !important;
    }

    body .intro {
      max-width: 760px !important;

      color: #b5bdd3 !important;

      font-size: 1.08rem !important;
      line-height: 1.65 !important;
    }

    body .eyebrow {
      color: #a99aff !important;

      font-size: .72rem !important;
      font-weight: 850 !important;

      letter-spacing: .16em !important;
      text-transform: uppercase !important;
    }


    /* --------------------------------------------------------
       PANELS / GENERATORS / CALCULATORS
       -------------------------------------------------------- */

    body .panel,
    body .guidance,
    body .calculator,
    body .result-card,
    body .summary,
    body .results-panel,
    body .result-panel,
    body .card {
      border-color:
        rgba(126, 111, 255, .30) !important;

      background:
        linear-gradient(
          145deg,
          rgba(18, 23, 66, .97),
          rgba(24, 19, 73, .94)
        ) !important;

      color: #f7f8ff !important;

      box-shadow: none !important;
    }

    body .panel,
    body .guidance {
      border-radius: 18px !important;
    }

    body .generator,
    body .calculator {
      gap: 20px !important;
    }

    body .guidance,
    body .cta {
      margin-top: 26px !important;
    }

    body .guidance p,
    body .guidance li,
    body .panel p,
    body .notice,
    body .status,
    body .hint,
    body .intent {
      color: #aeb6cc !important;
    }


    /* --------------------------------------------------------
       FORM CONTROLS
       White controls intentionally match the homepage research
       interface while panels remain dark.
       -------------------------------------------------------- */

    body input,
    body select,
    body textarea {
      border:
        1px solid rgba(126, 111, 255, .25) !important;

      border-radius: 10px !important;

      background: #ffffff !important;
      color: #11152a !important;

      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;
    }

    body input::placeholder,
    body textarea::placeholder {
      color: #9298aa !important;
    }

    body input:focus,
    body select:focus,
    body textarea:focus {
      outline:
        3px solid rgba(118, 91, 255, .16) !important;

      border-color: #8d72ff !important;
    }

    body label {
      color: #eef0fa !important;
    }


    /* --------------------------------------------------------
       BUTTONS
       -------------------------------------------------------- */

    body button:not(.secondary):not(.secondary-button),
    body .research-link,
    body .primary-button,
    body .button-primary {
      border: 0 !important;

      background:
        linear-gradient(
          90deg,
          #6177ff,
          #ad37ea
        ) !important;

      color: #ffffff !important;

      font-weight: 850 !important;

      box-shadow: none !important;
    }

    body button:not(.secondary):not(.secondary-button):hover,
    body .research-link:hover {
      filter: brightness(1.07);
    }

    body .secondary,
    body .secondary-button {
      border:
        1px solid rgba(126, 111, 255, .34) !important;

      background:
        rgba(255, 255, 255, .045) !important;

      color: #eef0fa !important;
    }


    /* --------------------------------------------------------
       OUTPUT CARDS / METRICS
       -------------------------------------------------------- */

    body .title-card,
    body .tag-row,
    body .metric {
      border-color:
        rgba(126, 111, 255, .24) !important;

      background:
        rgba(9, 13, 44, .60) !important;

      color: #f7f8ff !important;
    }

    body .metric {
      border:
        1px solid rgba(126, 111, 255, .22) !important;

      color: #c7cde0 !important;
    }

    body .tag-number,
    body .tag-count,
    body .title-meta {
      color: #929db9 !important;
    }


    /* --------------------------------------------------------
       CTAs / INFORMATION BOXES
       -------------------------------------------------------- */

    body .cta {
      border:
        1px solid rgba(145, 117, 255, .32) !important;

      background:
        linear-gradient(
          135deg,
          rgba(82, 74, 209, .24),
          rgba(161, 55, 221, .18)
        ) !important;

      color: #f7f8ff !important;
    }

    body .cta a {
      color: #c2b7ff !important;
    }


    /* --------------------------------------------------------
       MOBILE
       -------------------------------------------------------- */

    @media (max-width: 760px) {

      body > main,
      body main {
        width: calc(100% - 28px) !important;
      }

      .mz-public-tool-nav {
        min-height: 68px !important;

        align-items: flex-start !important;
        flex-direction: column !important;

        gap: 14px !important;

        margin-bottom: 44px !important;
        padding: 18px 0 !important;
      }

      .mz-public-tool-nav-links {
        justify-content: flex-start !important;
        gap: 14px !important;
      }

      body h1 {
        font-size:
          clamp(2.6rem, 12vw, 4rem) !important;
      }

      body .generator,
      body .calculator,
      body form,
      body .result-card {
        grid-template-columns: 1fr !important;
      }

    }


/* ============================================================
   MOOSIZE WORKSPACE PREVIEW FINAL THEME
   ============================================================ */

body.mz-workspace-preview-page {
  background:
    radial-gradient(
      circle at 76% 0%,
      rgba(103, 72, 255, .13),
      transparent 34rem
    ),
    #050718 !important;

  color: #f7f8ff !important;
}

body.mz-workspace-preview-page > main {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;

  margin: 0 auto !important;
  padding: 0 0 84px !important;
}

body.mz-workspace-preview-page nav {
  min-height: 76px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 28px !important;

  margin: 0 0 68px !important;
  padding: 0 !important;

  border-bottom:
    1px solid rgba(255, 255, 255, .08) !important;
}

body.mz-workspace-preview-page nav div {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

body.mz-workspace-preview-page nav a {
  color: #c5cbe0 !important;
  font-size: .85rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

body.mz-workspace-preview-page h1,
body.mz-workspace-preview-page h2 {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  color: #f7f8ff !important;
}

body.mz-workspace-preview-page h1 {
  max-width: 900px !important;

  margin: 0 0 22px !important;

  font-size: clamp(3rem, 6vw, 5.3rem) !important;
  font-weight: 850 !important;

  letter-spacing: -.055em !important;
  line-height: .98 !important;
}

body.mz-workspace-preview-page .intro {
  max-width: 760px !important;

  color: #b5bdd3 !important;

  font-size: 1.08rem !important;
  line-height: 1.65 !important;
}

body.mz-workspace-preview-page .summary {
  background: transparent !important;
}

body.mz-workspace-preview-page .summary-card,
body.mz-workspace-preview-page .workspace-card {
  border:
    1px solid rgba(126, 111, 255, .30) !important;

  background:
    linear-gradient(
      145deg,
      rgba(18, 23, 66, .97),
      rgba(24, 19, 73, .94)
    ) !important;

  color: #f7f8ff !important;

  box-shadow: none !important;
}

body.mz-workspace-preview-page .summary-card span,
body.mz-workspace-preview-page .workspace-card > p,
body.mz-workspace-preview-page .deliverable small {
  color: #aeb6cc !important;
}

body.mz-workspace-preview-page .workspace-card h2 {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif !important;

  font-weight: 800 !important;
}

body.mz-workspace-preview-page .visible-output {
  border:
    1px solid rgba(126, 111, 255, .20) !important;

  background:
    rgba(255, 255, 255, .045) !important;

  color: #eef0fa !important;
}

body.mz-workspace-preview-page .tag-preview span {
  border:
    1px solid rgba(139, 92, 246, .45) !important;

  background:
    rgba(112, 87, 255, .20) !important;

  color: #ddd7ff !important;
}

body.mz-workspace-preview-page .locked-output {
  border:
    1px dashed rgba(139, 92, 246, .38) !important;

  background:
    rgba(5, 7, 24, .58) !important;
}

body.mz-workspace-preview-page .locked-output::after {
  background:
    rgba(10, 12, 38, .78) !important;

  color: #c9beff !important;
}

body.mz-workspace-preview-page .deliverable {
  border:
    1px solid rgba(126, 111, 255, .24) !important;

  background:
    rgba(255, 255, 255, .035) !important;
}

body.mz-workspace-preview-page .deliverable span {
  background:
    linear-gradient(
      90deg,
      #6177ff,
      #ad37ea
    ) !important;
}

body.mz-workspace-preview-page .conversion-card {
  border:
    1px solid rgba(126, 111, 255, .34) !important;

  background:
    linear-gradient(
      135deg,
      rgba(25, 29, 82, .98),
      rgba(42, 21, 92, .98)
    ) !important;
}

body.mz-workspace-preview-page .conversion-card h2 {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif !important;

  font-weight: 850 !important;
}

body.mz-workspace-preview-page .conversion-card button {
  background:
    linear-gradient(
      90deg,
      #6177ff,
      #ad37ea
    ) !important;

  color: #fff !important;
}

@media (max-width: 720px) {
  body.mz-workspace-preview-page > main {
    width: calc(100% - 28px) !important;
  }
}