:root {
      --primary-color: #2c3e50;
      --secondary-color: #3498db;
      --accent-color: #e74c3c;
      --success-color: #2ecc71;
      --neutral-color: #ecf0f1;
      --dark-color: #2c3e50;
      --light-color: #fff;
      --text-color: #333;
      --muted-text: #64748b;
      --border-color: #e1e1e1;
      --error-color: #dc2626;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      --gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
      --form-bg: rgba(255, 255, 255, 0.98);
      --brand-bg: rgba(52, 152, 219, 0.1);
    }

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

    body {
      font-family: 'Inter', 'Segoe UI', sans-serif;
      background: var(--light-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      overflow-x: hidden;
    }

    .page-container {
      display: flex;
      width: 100%;
      min-height: 100vh;
    }

    /* Brand section */
    .brand-section {
      background: var(--gradient);
      color: var(--light-color);
      flex: 1;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
      animation: fadeIn 1s ease-out;
    }

    .brand-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="none" width="100" height="100"/><path fill="rgba(255,255,255,0.05)" d="M30 20h40v10H30zM20 40h60v10H20zM10 60h80v10H10zM0 80h100v10H0z"/></svg>') repeat;
      opacity: 0.1;
    }

    .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      animation: float 15s infinite linear;
    }

    .shape:nth-child(1) {
      width: 150px;
      height: 150px;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    .shape:nth-child(2) {
      width: 100px;
      height: 100px;
      top: 70%;
      left: 15%;
      animation-delay: 2s;
    }

    .shape:nth-child(3) {
      width: 80px;
      height: 80px;
      top: 40%;
      left: 70%;
      animation-delay: 4s;
    }

    .shape:nth-child(4) {
      width: 120px;
      height: 120px;
      top: 80%;
      left: 80%;
      animation-delay: 6s;
    }

    @keyframes float {
      0% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-20px) rotate(180deg);
      }
      100% {
        transform: translateY(0) rotate(360deg);
      }
    }

    .brand-content {
      position: relative;
      z-index: 1;
      max-width: 500px;
      margin: 0 auto 0 180px;
      width: 100%;
    }

    .logo {
      font-size: 48px;
      margin-bottom: 24px;
      text-align: left;
      transform: translateY(-20px);
      opacity: 0;
      animation: slideDown 0.8s ease forwards 0.2s;
    }

    .brand-section h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
      text-align: left;
      transform: translateY(-20px);
      opacity: 0;
      animation: slideDown 0.8s ease forwards 0.4s;
    }

    .tagline {
      font-size: 1.2rem;
      margin-bottom: 40px;
      opacity: 0;
      text-align: left;
      transform: translateY(-20px);
      animation: slideDown 0.8s ease forwards 0.6s;
    }

    .features {
      display: flex;
      flex-direction: column;
      gap: 20px;
      text-align: left;
      width: 100%;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 1.1rem;
      opacity: 0;
      transform: translateX(-20px);
      animation: slideRight 0.5s ease forwards;
    }

    .feature-item:nth-child(1) {
      animation-delay: 0.8s;
    }

    .feature-item:nth-child(2) {
      animation-delay: 1s;
    }

    .feature-item:nth-child(3) {
      animation-delay: 1.2s;
    }

    .feature-item i {
      font-size: 1.2rem;
      color: var(--light-color);
      background: rgba(255, 255, 255, 0.2);
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: transform 0.3s ease;
    }

    .feature-item:hover i {
      transform: scale(1.1);
    }

    /* Login section */
    .login-section {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px;
      background-color: var(--light-color);
      background-image: 
        radial-gradient(#e1e7ed 1px, transparent 1px),
        radial-gradient(#e1e7ed 1px, transparent 1px);
      background-size: 40px 40px;
      background-position: 0 0, 20px 20px;
      animation: fadeIn 1s ease-out;
    }

    .login-container {
      background: var(--form-bg);
      padding: 40px;
      border-radius: 20px;
      box-shadow: var(--shadow);
      width: 100%;
      max-width: 450px;
      position: relative;
      transform: translateY(20px);
      opacity: 0;
      animation: slideUp 0.8s ease forwards 0.4s;
    }

    .login-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .login-header h2 {
      color: var(--dark-color);
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.5px;
    }

    .login-header p {
      color: var(--muted-text);
      font-size: 1rem;
    }

    .form-group {
      margin-bottom: 25px;
      position: relative;
      text-align: left;
      transform: translateY(20px);
      opacity: 0;
      animation: slideUp 0.5s ease forwards;
    }

    .form-group:nth-child(1) {
      animation-delay: 0.6s;
    }

    .form-group:nth-child(2) {
      animation-delay: 0.8s;
    }

    input {
      width: 100%;
      padding: 16px 16px 16px 50px;
      border: 2px solid var(--border-color);
      border-radius: 12px;
      font-size: 1rem;
      transition: all 0.3s ease;
      background-color: #f8fafc;
      text-align: left;
    }

    input:focus {
      border-color: var(--secondary-color);
      background-color: var(--light-color);
      box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
      outline: none;
    }

    input:focus + .input-icon i {
      color: var(--secondary-color);
    }

    input.valid {
      border-color: var(--success-color);
    }

    input.invalid {
      border-color: var(--accent-color);
    }

    .input-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted-text);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .input-icon i {
      font-size: 1.2rem;
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      font-size: 0.9rem;
      text-align: left;
      opacity: 0;
      animation: fadeIn 0.5s ease forwards 1s;
    }

    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
      position: static;
      transform: none;
      cursor: pointer;
    }

    .remember-me input {
      width: auto;
      margin: 0;
      padding: 0;
    }

    .forgot-password {
      color: var(--secondary-color);
      text-decoration: none;
      transition: all 0.2s;
    }

    .forgot-password:hover {
      text-decoration: underline;
      color: #2980b9;
    }

    .login-button {
      width: 100%;
      padding: 16px;
      background: var(--gradient);
      color: var(--light-color);
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 20px;
      position: relative;
      overflow: hidden;
      transform: translateY(20px);
      opacity: 0;
      animation: slideUp 0.5s ease forwards 1.2s;
    }

    .login-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(52, 152, 219, 0.25);
    }

    .login-button:active {
      transform: translateY(1px);
    }

    .login-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: all 0.6s;
    }

    .login-button:hover::before {
      left: 100%;
    }

    .login-button.loading {
      opacity: 0.8;
      pointer-events: none;
    }

    .login-button .spinner {
      display: none;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 0.8s ease infinite;
    }

    .login-button.loading .spinner {
      display: inline-block;
    }

    .login-button.loading .button-text {
      display: none;
    }

    .login-button.loading .fa-arrow-right {
      display: none;
    }

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

    .error-message {
      margin-top: 20px;
      padding: 15px;
      border-radius: 12px;
      background-color: #fef2f2;
      color: var(--error-color);
      font-size: 0.9rem;
      text-align: center;
      display: none;
      border: 1px solid #fee2e2;
      animation: fadeIn 0.3s ease-in-out;
    }

    .divider {
      display: flex;
      align-items: center;
      text-align: center;
      margin: 30px 0;
      color: var(--muted-text);
      opacity: 0;
      animation: fadeIn 0.5s ease forwards 1.4s;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid var(--border-color);
    }

    .divider::before {
      margin-right: 10px;
    }

    .divider::after {
      margin-left: 10px;
    }

    .social-login {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeIn 0.5s ease forwards 1.6s;
    }

    .social-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-color);
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1.2rem;
    }

    .social-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .social-btn.google {
      color: #DB4437;
    }

    .social-btn.facebook {
      color: #4267B2;
    }

    .social-btn.apple {
      color: #000000;
    }

    .login-footer {
      margin-top: 30px;
      text-align: center;
      font-size: 0.85rem;
      color: var(--muted-text);
      opacity: 0;
      animation: fadeIn 0.5s ease forwards 1.8s;
    }

    .signup-link {
      margin-top: 20px;
      text-align: center;
      font-size: 0.95rem;
      opacity: 0;
      animation: fadeIn 0.5s ease forwards 1.7s;
    }

    .signup-link a {
      color: var(--secondary-color);
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s;
    }

    .signup-link a:hover {
      text-decoration: underline;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideRight {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Responsive design */
    @media (max-width: 992px) {
      .page-container {
        flex-direction: column;
      }

      .brand-section {
        padding: 40px 20px;
        min-height: 250px;
        align-items: center;
      }

      .brand-content {
        margin: 0 auto;
        text-align: center;
      }

      .logo,
      .brand-section h1,
      .tagline {
        text-align: center;
      }

      .features {
        align-items: center;
      }

      .login-section {
        padding: 30px 20px;
      }

      .login-container {
        padding: 30px 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
    }

    @media (max-width: 480px) {
      .login-container {
        padding: 25px 15px;
      }

      .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .login-header h2 {
        font-size: 1.8rem;
      }
    }

    /* Fix for input placeholder */
    ::placeholder {
      color: #94a3b8;
      opacity: 0.7;
    }

    /* Fix for checkbox alignment */
    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }