/* Namespace root: all variables live on .cloneai */
      .cloneai {
          /* Color system (exactly 5 colors) */
          --ca-bg: #0b0f14;
          /* Near-black background */
          --ca-text: #e6f1f7;
          /* Off-white foreground */
          --ca-muted: #8da3b8;
          /* Muted gray for hints */
          --ca-teal: #00e0c6;
          /* Primary brand */
          --ca-violet: #8b5cf6;
          /* Accent */
          /* Surfaces and borders */
          --ca-surface: rgba(255, 255, 255, 0.04);
          --ca-surface-strong: rgba(255, 255, 255, 0.06);
          --ca-border: rgba(255, 255, 255, 0.12);
          --ca-focus: color-mix(in oklab, var(--ca-teal) 70%, white);
          --ca-ring: color-mix(in oklab, var(--ca-teal) 30%, transparent);
          --ca-danger: #ff5353;

          --ca-radius: 16px;
          --ca-radius-sm: 10px;
          --ca-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);

          --ca-font-head: "Orbitron", system-ui, -apple-system, Segoe UI, Roboto,
              Arial, sans-serif;
          --ca-font-body: "Exo 2", ui-sans-serif, system-ui, -apple-system,
              Segoe UI, Roboto, Arial, sans-serif;
      }

      /* Page frame */
      .cloneai {
          width: 100%;
          min-height: 100svh;
          display: grid;
          place-items: center;
          color: var(--ca-text);
          font-family: var(--ca-font-body);
          padding: 24px;
      }

      .cloneai-card {
          width: 100%;
          max-width: 520px;
          background: color-mix(in oklab, var(--ca-bg) 88%, white 12%);
          background: linear-gradient(180deg,
                  var(--ca-surface-strong),
                  var(--ca-surface)),
              color-mix(in oklab, var(--ca-bg) 88%, white 12%);
          border: 1px solid var(--ca-border);
          border-radius: var(--ca-radius);
          box-shadow: var(--ca-shadow-lg);
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
          overflow: clip;
      }

      .cloneai-card-inner {
          padding: 28px;
          display: grid;
          gap: 22px;
      }

      .cloneai-brand {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
      }

      .cloneai-brand img {
          width: 200px;
          height: 50px;
          display: block;
          filter: drop-shadow(0 4px 18px color-mix(in oklab, var(--ca-teal) 40%, transparent));
      }

      .cloneai-title {
          margin: 0;
          font-family: var(--ca-font-head);
          font-weight: 700;
          font-size: clamp(20px, 2.4vw, 24px);
          letter-spacing: 0.02em;
          text-transform: uppercase;
      }

      .cloneai-subtitle {
          margin: -6px 0 0;
          color: var(--ca-muted);
          font-size: 14px;
          line-height: 1.5;
      }

      .cloneai-form {
          display: grid;
          gap: 16px;
      }

      .cloneai-field {
          display: grid;
          gap: 8px;
      }

      .cloneai-label {
          font-size: 13px;
          letter-spacing: 0.02em;
          color: color-mix(in oklab, var(--ca-text) 82%, var(--ca-muted));
      }

      .cloneai-input-wrap {
          position: relative;
          display: grid;
      }

      .cloneai .cloneai-input {
          appearance: none;
          height: 44px;
          padding: 10px 14px;
          padding-right: 46px;
          /* space for toggles */
          font: 500 14px/1.2 var(--ca-font-body);
          color: var(--ca-text);
          background: color-mix(in oklab, var(--ca-bg) 78%, white 22%);
          border: 1px solid var(--ca-border);
          border-radius: var(--ca-radius-sm);
          outline: none;
          transition: border-color 160ms ease, box-shadow 160ms ease,
              background-color 160ms ease;
      }

      .cloneai-input::placeholder {
          color: color-mix(in oklab, var(--ca-muted) 74%, black);
      }

      .cloneai-input:focus-visible {
          border-color: var(--ca-teal);
          box-shadow: 0 0 0 4px var(--ca-ring);
      }

      .cloneai-input[aria-invalid="true"] {
          border-color: var(--ca-danger);
          box-shadow: 0 0 0 3px color-mix(in oklab, var(--ca-danger) 25%, transparent);
      }

      .cloneai-eye-btn {
          position: absolute;
          right: 6px;
          top: 6px;
          height: 32px;
          min-width: 36px;
          padding: 0 10px;
          border-radius: 8px;
          background: transparent;
          border: 1px solid transparent;
          color: var(--ca-muted);
          font-size: 12px;
          cursor: pointer;
          transition: color 160ms ease, border-color 160ms ease,
              background-color 160ms ease, box-shadow 160ms ease;
      }

      .cloneai-eye-btn:hover {
          color: var(--ca-text);
          border-color: var(--ca-border);
          background: color-mix(in oklab, var(--ca-bg) 70%, white 30%);
      }

      .cloneai-eye-btn:focus-visible {
          outline: none;
          border-color: var(--ca-teal);
          box-shadow: 0 0 0 3px var(--ca-ring);
      }

      .cloneai-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
      }

      .cloneai-checkbox {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          user-select: none;
          cursor: pointer;
          color: var(--ca-muted);
          font-size: 13px;
      }

      .cloneai-checkbox input {
          inline-size: 18px;
          block-size: 18px;
          accent-color: var(--ca-teal);
      }

      .cloneai-link {
          color: var(--ca-teal);
          text-decoration: none;
      }

      .cloneai-link:hover {
          text-decoration: underline;
      }

      .cloneai-submit {
          height: 46px;
          border: 0;
          border-radius: 12px;
          background: linear-gradient(90deg,
                  color-mix(in oklab, var(--ca-teal) 86%, white 14%),
                  color-mix(in oklab, var(--ca-violet) 70%, white 30%));
          color: #020304;
          font-family: var(--ca-font-head);
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          cursor: pointer;
          display: inline-grid;
          place-items: center;
          transition: filter 160ms ease, transform 80ms ease;
      }

      .cloneai-submit:hover {
          filter: brightness(1.06);
      }

      .cloneai-submit:active {
          transform: translateY(1px);
      }

      .cloneai-submit:disabled {
          opacity: 0.8;
          cursor: not-allowed;
          filter: saturate(0.75);
      }

      .cloneai-spinner {
          inline-size: 18px;
          block-size: 18px;
          border-radius: 999px;
          border: 2.5px solid rgba(0, 0, 0, 0.18);
          border-top-color: #000000;
          animation: cloneai-spin 900ms linear infinite;
      }

      @keyframes cloneai-spin {
          to {
              transform: rotate(360deg);
          }
      }

      .cloneai-help,
      .cloneai-field-msg {
          font-size: 12px;
          color: var(--ca-muted);
      }

      .cloneai-field-msg[aria-live] {
          min-height: 1.2em;
          /* avoid layout shift */
      }

      .cloneai-error {
          color: var(--ca-danger);
      }

    .cloneai-footer {
        margin-top: 6px;
        display: flex;
        gap: 6px;
        justify-content: center;
        font-size: 13px;
        color: var(--ca-muted);
        flex-direction: column;
        align-items: center;
    }

      .cloneai-footer a {
          color: var(--ca-teal);
          text-decoration: none;
      }

      .cloneai-footer a:hover {
          text-decoration: underline;
      }

      /* Motion preference */
      @media (prefers-reduced-motion: reduce) {

          .cloneai-submit,
          .cloneai-input,
          .cloneai-eye-btn {
              transition: none !important;
          }

          .cloneai-spinner {
              animation-duration: 1400ms;
          }
      }