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

    html {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      color: #313131;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    }

    button {
      font-family: inherit
    }

    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      min-height: 100vh
    }

    /* ── Animations ── */
    @keyframes spin {
      100% {
        transform: rotate(360deg)
      }
    }

    @keyframes scale {

      0%,
      100% {
        transform: none
      }

      50% {
        transform: scale3d(1, 1, 1)
      }
    }

    @keyframes stroke {
      100% {
        stroke-dashoffset: 0
      }
    }

    @keyframes scale-up-center {
      0% {
        transform: scale(.01)
      }

      100% {
        transform: scale(1)
      }
    }

    @keyframes fade-in {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @keyframes dots {
      0% {
        content: ""
      }

      25% {
        content: "."
      }

      50% {
        content: ".."
      }

      75% {
        content: "..."
      }

      100% {
        content: ""
      }
    }

    @keyframes lds-ring {
      0% {
        transform: rotate(0deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    @keyframes unspin {
      40% {
        stroke-width: 1px;
        stroke-linecap: square;
        stroke-dashoffset: 192
      }

      100% {
        stroke-width: 0
      }
    }

    /* ── Success icon ── */
    #success-i {
      width: 30px;
      height: 30px;
      display: flex;
      border-radius: 50%;
      box-shadow: inset 0 0 0 #228b49;
      stroke-width: 1px;
      fill: #fff;
      stroke: #fff;
      stroke-miterlimit: 10;
      animation: scale-up-center .3s cubic-bezier(.55, .085, .68, .53) both;
      stroke-width: 6px
    }

    #success-i .p1 {
      animation: stroke .4s cubic-bezier(.65, 0, .45, 1) forwards;
      animation-delay: .3s;
      box-shadow: inset 0 0 0 #228b49;
      stroke-dasharray: 242;
      stroke-dashoffset: 242
    }

    .success-circle {
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke: #228b49;
      fill: #228b49
    }

    #success-pre-i {
      width: 30px;
      height: 30px
    }

    #success-pre-i line {
      stroke: #228b49;
      animation: firework .3s 1 ease-out;
      stroke-width: 1;
      stroke-dasharray: 32 32;
      stroke-dashoffset: -8
    }

    .circle {
      stroke-width: 3px;
      stroke-linecap: round;
      stroke: #228b49;
      stroke-dasharray: 0, 100, 0;
      stroke-dashoffset: 200;
      stroke-miterlimit: 1;
      stroke-linejoin: round
    }

    /* ── Fail icon ── */
    #fail-i,
    #fail-small-i {
      width: 30px;
      height: 30px;
      display: flex;
      border-radius: 50%;
      stroke-width: 1px;
      fill: #fff;
      stroke: #fff;
      stroke-miterlimit: 10;
      animation: scale-up-center .6s cubic-bezier(.55, .085, .68, .53) both
    }

    .failure-circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke: #b20f03;
      fill: #b20f03;
      animation: stroke .6s cubic-bezier(.65, 0, .45, 1) forwards
    }

    .failure-cross {
      animation: fade-in-animation .1s .4s cubic-bezier(1, 1, 0, 1) backwards;
      fill: #f2f2f2;
      transform-origin: bottom center
    }

    @keyframes fade-in-animation {
      0% {
        fill: #b20f03;
        stroke: #b20f03
      }

      100% {
        fill: #f2f2f2;
        stroke: #f2f2f2
      }
    }

    #fail-small-i {
      width: 12px;
      height: 12px
    }

    /* ── Verifying spinner ── */
    #verifying-i,
    #overrun-i {
      display: flex;
      animation: spin 5s linear infinite;
      width: 30px;
      height: 30px
    }

    .unspun .circle {
      animation: unspin .7s cubic-bezier(.65, 0, .45, 1) forwards
    }

    /* ── Expired/Timeout ── */
    .expired-circle,
    .timeout-circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke: #595959;
      fill: #595959
    }

    #expired-i,
    #timeout-i {
      width: 30px;
      height: 30px;
      display: flex;
      border-radius: 50%;
      stroke-width: 1px;
      fill: #fff;
      stroke: #fff;
      stroke-miterlimit: 10;
      animation: scale .3s ease-in-out .9s both
    }

    /* ── Loading ring ── */
    .lds-ring {
      display: inline-block;
      position: relative;
      width: 1.875rem;
      height: 1.875rem
    }

    .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
      border: .3rem solid;
      border-radius: 50%;
      border-color: #313131 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
      width: 1.875rem;
      height: 1.875rem
    }

    .lds-ring div:nth-child(1) {
      animation-delay: -.45s
    }

    .lds-ring div:nth-child(2) {
      animation-delay: -.3s
    }

    .lds-ring div:nth-child(3) {
      animation-delay: -.15s
    }

    /* ── Page layout ── */
    .main-content {
      margin: 8rem auto;
      padding-right: 2rem;
      padding-left: 2rem;
      width: 100%;
      max-width: 60rem
    }

    .spacer {
      margin: 2rem 0
    }

    .spacer-top {
      margin-top: 2rem;
      margin-bottom: .5rem
    }

    .spacer-bottom {
      margin-top: .5rem;
      margin-bottom: 2rem
    }

    .heading-favicon {
      margin-right: .5rem;
      width: 2rem;
      height: 2rem
    }

    .heading-favicon-hidden {
      display: none
    }

    .main-wrapper {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center
    }

    h1 {
      line-height: 125%;
      font-size: 2.5rem;
      font-weight: 600
    }

    h2 {
      margin-bottom: 8px;
      line-height: 125%;
      font-size: 1.5rem;
      font-weight: 600;
      font-style: normal
    }

    p,
    li {
      margin-bottom: 8px;
      line-height: 150%;
      font-size: 1rem;
      font-weight: 300;
      font-style: normal
    }

    a {
      display: inline-block;
      text-decoration: underline;
      font-size: 1rem;
      font-weight: 400;
      cursor: pointer
    }

    .ch-description {
      margin-top: 0;
      margin-bottom: 2rem;
      font-weight: 400
    }

    .ch-title {
      margin: 8px 0
    }

    .ch-title-zone {
      display: flex;
      gap: 16px;
      align-items: center
    }

    #challenge-success-text::after {
      animation: dots 1.4s steps(4, end) infinite;
      content: ""
    }

    /* ── Footer ── */
    .footer {
      margin: 0 auto;
      padding-right: 2rem;
      padding-left: 2rem;
      width: 100%;
      max-width: 60rem;
      line-height: 1.125rem;
      font-size: .75rem
    }

    .footer a {
      font-size: .75rem
    }

    .footer-inner {
      display: flex;
      justify-content: center;
      border-top: 1px solid #f2f2f2;
      padding-top: 1rem;
      padding-bottom: 1rem
    }

    .footer-wrapper {
      text-align: center
    }

    .footer-divider {
      border: 1px solid #f2f2f2;
      height: 12px
    }

    .footer-link-wrapper {
      display: flex;
      gap: 8px;
      align-items: center
    }

    /* ── Dark theme ── */
    body.theme-dark {
      background-color: #000;
      color: #f2f2f2
    }

    body.theme-dark h1,
    body.theme-dark h2,
    body.theme-dark h3 {
      color: #f2f2f2
    }

    body.theme-dark p {
      color: #f2f2f2
    }

    body.theme-dark .footer-text {
      color: #f2f2f2
    }

    body.theme-dark a {
      color: #82b6ff
    }

    body.theme-dark a:hover {
      color: #b9d6ff
    }

    body.theme-dark a:visited {
      color: #9d94ec
    }

    body.theme-dark .footer-inner {
      border-top: 1px solid #f2f2f2
    }

    body.theme-dark .footer-divider {
      border: 1px solid #f2f2f2
    }

    body.theme-dark .ch-description {
      color: #b6b6b6
    }

    body.theme-dark .lds-ring div {
      border-color: #f2f2f2 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
    }

    /* ── Turnstile widget styles (from original) ── */
    .main-wrapper.theme-dark #content {
      border-color: #f2f2f2;
      background-color: #313131
    }

    #content {
      display: inline-flex;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      background: #1f1f1f;
      padding: 0;
      width: 300px;
      height: 65px;
      overflow: hidden;
    }

    /* inner flex layout matching original iframe content */
    .cb-c {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 0 10px;
      gap: 10px;
    }

    /* Label / checkbox */
    .cb-lb {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      flex: 1;
    }

    .cb-lb input[type=checkbox] {
      display: none;
    }

    .cb-i {
      width: 22px;
      height: 22px;
      border: 2px solid #8a8a8a;
      border-radius: 2px;
      background: #0a0a0a;
      flex-shrink: 0;
      position: relative;
      transition: border-color .15s, background .15s;
    }

    .cb-lb input:checked~.cb-i {
      background: #4a4a4a;
      border-color: #fbad41;
    }

    .cb-lb input:checked~.cb-i::after {
      content: '';
      position: absolute;
      display: block;
      left: 5px;
      top: 1px;
      width: 6px;
      height: 11px;
      border: 2px solid #fbad41;
      border-top: none;
      border-left: none;
      transform: rotate(45deg);
    }

    .cb-lb-t {
      font-size: .875rem;
      color: #d9d9d9;
      line-height: 1.3;
    }

    /* cb-container: verifying/success/fail rows */
    .cb-container {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 0 10px;
      gap: 10px;
      font-size: .8rem;
      color: #d9d9d9;
    }

    /* Branding block (right side) */
    #branding {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding: 6px 10px 6px 0;
      flex-shrink: 0;
    }

    #logo {
      height: 16px;
      width: auto
    }

    .logo-text {
      fill: #d9d9d9
    }

    #terms {
      display: flex;
      gap: 3px;
      margin-top: 3px;
      font-size: .55rem;
    }

    #terms a {
      font-size: .55rem;
      color: #8a8a8a;
      text-decoration: underline;
      display: inline;
    }

    #terms a:hover {
      color: #b9d6ff
    }

    .link-spacer {
      color: #8a8a8a;
      font-size: .55rem;
    }

    /* verifying spinner */
    .verifying-container {
      display: flex;
      align-items: center;
    }

    #verifying-text {
      font-size: .8rem;
      color: #d9d9d9;
    }

    /* success text */
    #success-text {
      font-size: .8rem;
      color: #228b49;
    }

    /* fail text */
    #fail-text {
      font-size: .75rem;
      color: #b20f03;
    }

    .cf-troubleshoot {
      font-size: .7rem;
    }

    .error-message-sm {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-wrap: wrap;
    }
  


    .cf-box {
      width: 302px;
      height: 65px;
      background: #313131;
      border: 1px solid #d9d9d9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      color: #fff;
      font-family: Arial, sans-serif;
      flex: none
    }

    .left {
      display: flex;
      align-items: center
    }

    .checkbox {
      width: 24px;
      height: 24px;
      border: 2px solid #999;
      background: #111;
      flex-shrink: 0;
      cursor: pointer
    }

    .text {
      margin-left: 10px;
      font-size: 14px;
      line-height: 18px;
      font-weight: 400
    }

    .right {
      width: 95px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      transform: translateY(-3px)
    }

    .cloud-icon {
      width: 40px;
      height: 24px
    }

    .cloud-icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain
    }

    .cloudflare-text {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 2px;
      line-height: 9px
    }

    .links {
      margin-top: 2px;
      font-size: 8px;
      line-height: 9px
    }

    .links div {
      text-decoration: underline
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999
    }

    .overlay.show {
      display: flex
    }

    .modal {
      width: 420px;
      background: #232323;
      border: 1px solid #8a8a8a;
      border-radius: 8px;
      padding: 26px;
      color: #fff
    }

    .modal p {
      text-align: center;
      font-size: 18px;
      line-height: 1.3;
      margin: 0 0 24px
    }

    .modal ol {
      margin: 0 0 24px 24px;
      padding: 0;
      font-size: 16px;
      line-height: 1.9
    }

    .modal-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px
    }

    .modal-loading-text {
      font-size: 16px
    }