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

    :root {
      --teal: #0d9488;
      --teal-light: #14b8a6;
      --teal-dark: #0f766e;
      --dark: #0f172a;
      --gray: #64748b;
      --gray-light: #f1f5f9;
      --gray-border: #e2e8f0;
      --white: #ffffff;
      --error: #ef4444;
      --success: #10b981;
      --font: 'Inter', sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font);
      color: var(--dark);
      background: var(--dark);
      min-height: 100vh;
      display: flex;
      overflow: hidden;
    }

    /* ── SPLIT LAYOUT ── */
    .auth-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: var(--dark);
      padding: 48px;
      position: relative;
      overflow: hidden;
    }

    .auth-left__blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }

    .auth-left__blob--1 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(13, 148, 136, .35), transparent);
      top: -100px;
      left: -80px;
      animation: blobAnim 8s ease-in-out infinite;
    }

    .auth-left__blob--2 {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(99, 102, 241, .2), transparent);
      bottom: -60px;
      right: -60px;
      animation: blobAnim 10s ease-in-out infinite reverse;
    }

    @keyframes blobAnim {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(20px, -20px)
      }
    }

    .auth-left__grid {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
      background-size: 48px 48px;
    }

    .auth-left__content {
      position: relative;
      z-index: 1;
      max-width: 420px;
      color: var(--white);
    }

    .auth-left__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 48px;
      text-decoration: none;
    }

    .auth-left__logo .icon {
      font-size: 26px;
      color: var(--teal-light);
    }

    .auth-left__logo .text {
      font-size: 22px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.5px;
    }

    .auth-left__title {
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -.5px;
      margin-bottom: 16px;
    }

    .auth-left__title .highlight {
      color: var(--teal-light);
    }

    .auth-left__sub {
      font-size: 15px;
      color: #94a3b8;
      line-height: 1.6;
      margin-bottom: 40px;
    }

    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: #cbd5e1;
    }

    .feature-item__icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(13, 148, 136, .15);
      border: 1px solid rgba(13, 148, 136, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    /* ── AUTH RIGHT ── */
    .auth-right {
      width: 480px;
      background: var(--white);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px;
      overflow-y: auto;
    }

    .auth-right__header {
      margin-bottom: 32px;
    }

    .auth-right__header h2 {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -.5px;
      margin-bottom: 6px;
    }

    .auth-right__header p {
      font-size: 14px;
      color: var(--gray);
    }

    /* ── TABS ── */
    .auth-tabs {
      display: flex;
      background: var(--gray-light);
      border-radius: 10px;
      padding: 4px;
      margin-bottom: 32px;
    }

    .auth-tab {
      flex: 1;
      text-align: center;
      padding: 8px;
      border-radius: 7px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--gray);
      transition: all .2s;
    }

    .auth-tab.active {
      background: var(--white);
      color: var(--dark);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    /* ── FORM ── */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 18px;
    }

    .form-group label {
      font-size: 13px;
      font-weight: 600;
      color: var(--dark);
    }

    .form-group input {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid var(--gray-border);
      border-radius: 8px;
      font-size: 14px;
      font-family: var(--font);
      color: var(--dark);
      background: var(--white);
      transition: border-color .2s, box-shadow .2s;
      outline: none;
    }

    .form-group input:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(13, 148, 136, .1);
    }

    .form-group input.error {
      border-color: var(--error);
    }

    .input-wrapper {
      position: relative;
    }

    .input-wrapper input {
      padding-right: 42px;
    }

    .toggle-pass {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--gray);
      transition: color .2s;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .toggle-pass:hover {
      color: var(--dark);
    }

    .toggle-pass svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .btn-submit {
      width: 100%;
      padding: 13px;
      background: var(--teal);
      color: var(--white);
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-submit:hover {
      background: var(--teal-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(13, 148, 136, .3);
    }

    .btn-submit:disabled {
      opacity: .7;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-submit .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, .4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }

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

    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
      color: var(--gray);
      font-size: 12px;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--gray-border);
    }

    .forgot {
      text-align: right;
      margin-top: -10px;
      margin-bottom: 18px;
    }

    .forgot a {
      font-size: 12px;
      color: var(--teal);
      text-decoration: none;
      font-weight: 500;
    }

    .forgot a:hover {
      text-decoration: underline;
    }

    /* ── ALERT ── */
    .alert {
      padding: 12px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      animation: slideIn .3s ease;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .alert--error {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .alert--success {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    /* ── PASSWORD STRENGTH ── */
    .pwd-strength {
      margin-top: 10px;
      display: none;
    }

    .pwd-strength.visible {
      display: block;
    }

    .pwd-strength__bar {
      display: flex;
      gap: 5px;
      margin-bottom: 7px;
    }

    .pwd-strength__seg {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: var(--gray-border);
      transition: background .35s ease;
    }

    .pwd-strength__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .pwd-strength__label {
      font-size: 12px;
      font-weight: 700;
      transition: color .3s;
    }

    .pwd-strength__rules {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .pwd-rule {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: var(--gray);
      transition: color .2s;
    }

    .pwd-rule::before {
      content: '○';
      font-size: 10px;
      color: var(--gray-border);
      transition: color .2s;
      flex-shrink: 0;
    }

    .pwd-rule.ok {
      color: var(--success);
    }

    .pwd-rule.ok::before {
      content: '●';
      color: var(--success);
    }

    /* ── BACK LINK ── */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--gray);
      text-decoration: none;
      margin-bottom: 32px;
      transition: color .2s;
    }

    .back-link:hover {
      color: var(--dark);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .auth-left {
        display: none;
      }

      .auth-right {
        width: 100%;
        padding: 32px 24px;
      }
    }

    @media (max-width: 400px) {
      .form-row {
        grid-template-columns: 1fr;
      }
    }