*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      min-height: 100vh;
      display: flex;
      background: #0f172a;
      color: #fff;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Left panel — hero ─── */
    .hero {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px;
      background: linear-gradient(145deg, #064e3b 0%, #065f46 40%, #059669 100%);
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
    }
    .hero-content { position: relative; z-index: 1; }

    .hero-logo {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 48px;
    }
    .hero-logo-icon {
      width: 48px; height: 48px;
      background: rgba(255,255,255,0.15);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
      backdrop-filter: blur(4px);
    }
    .hero-logo-name {
      font-size: 22px; font-weight: 800;
      letter-spacing: -0.02em;
    }
    .hero-logo-sub { font-size: 13px; opacity: 0.65; margin-top: 2px; }

    .hero-title {
      font-size: 42px; font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      margin-bottom: 18px;
    }
    .hero-title span { color: #6ee7b7; }

    .hero-desc {
      font-size: 16px; opacity: 0.75; line-height: 1.7;
      max-width: 420px; margin-bottom: 40px;
    }

    .hero-stats {
      display: flex; gap: 28px;
    }
    .stat-item { }
    .stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
    .stat-label { font-size: 12px; opacity: 0.6; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }

    .hero-decoration {
      position: absolute;
      right: -60px; bottom: -60px;
      width: 400px; height: 400px;
      border-radius: 50%;
      border: 80px solid rgba(255,255,255,0.04);
    }
    .hero-decoration-2 {
      position: absolute;
      right: 60px; bottom: 80px;
      width: 200px; height: 200px;
      border-radius: 50%;
      border: 40px solid rgba(255,255,255,0.05);
    }

    /* ── Right panel — form ── */
    .login-panel {
      width: 480px;
      min-height: 100vh;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px 48px;
    }
    .login-header { margin-bottom: 36px; }
    .login-title {
      font-size: 26px; font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .login-subtitle { font-size: 14px; color: #64748b; }

    .form-group { margin-bottom: 18px; }
    .form-label {
      display: block;
      font-size: 13px; font-weight: 600;
      color: #374151; margin-bottom: 7px;
    }
    .input-wrap { position: relative; }
    .input-icon {
      position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
      color: #94a3b8; font-size: 15px;
      pointer-events: none;
    }
    .form-input {
      width: 100%; padding: 11px 13px 11px 40px;
      border-radius: 9px;
      border: 1.5px solid #e2e8f0;
      background: #f8fafc;
      font-size: 14px; font-family: inherit;
      color: #0f172a;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-input:focus {
      outline: none;
      border-color: #059669;
      box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
      background: #fff;
    }
    .toggle-pass {
      position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
      color: #94a3b8; cursor: pointer; font-size: 15px;
      background: none; border: none; padding: 0;
    }
    .toggle-pass:hover { color: #475569; }

    .alert-error {
      background: #fef2f2; border: 1px solid #fecaca;
      border-radius: 9px; padding: 12px 16px;
      display: flex; align-items: center; gap: 10px;
      font-size: 13.5px; color: #b91c1c;
      margin-bottom: 20px;
    }

    .btn-login {
      width: 100%; padding: 13px;
      background: linear-gradient(135deg, #065f46, #059669);
      color: #fff; border: none;
      border-radius: 9px;
      font-size: 15px; font-weight: 700;
      font-family: inherit;
      cursor: pointer; letter-spacing: 0.01em;
      transition: all 0.18s;
      box-shadow: 0 4px 14px rgba(5,150,105,0.3);
      margin-top: 8px;
    }
    .btn-login:hover {
      background: linear-gradient(135deg, #047857, #10b981);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(5,150,105,0.35);
    }
    .btn-login:active { transform: scale(0.99); }

    .login-hint {
      margin-top: 24px; text-align: center;
      font-size: 12.5px; color: #94a3b8;
      padding: 14px;
      background: #f8fafc; border-radius: 8px;
      border: 1px dashed #e2e8f0;
    }
    .login-hint strong { color: #475569; }

    .login-footer {
      margin-top: 32px; text-align: center;
      font-size: 12px; color: #94a3b8;
    }

    @media (max-width: 900px) {
      .hero { display: none; }
      .login-panel { width: 100%; }
    }