:root {
      --bg: #f8fbff;
      --card: #ffffff;
      --border: #e2e8f0;
      --muted: #94a3b8;
      
      /* Updated to match the modern sidebar style */
      --blue: #2563eb;
      --blue-dark: #1e40af;
      --blue-soft: #eff6ff;
      
      --gradient-main: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
      
      --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.05);
      --radius: 24px;
      
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    * { box-sizing: border-box; }
    
    body { 
      margin: 0; 
      min-height: 100vh; 
      background: var(--bg); 
      color: #0f172a; 
      font-family: Inter, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    /* ================= AUTH CONTAINER ================= */
    .auth-card {
      background: #ffffff;
      width: 100%;
      max-width: 400px;
      border-radius: var(--radius);
      box-shadow: 0 25px 50px -12px rgba(37,99,235,.15);
      border: 1px solid var(--border);
      overflow: hidden;
      position: relative;
    }

    /* HEADER / BRAND */
    .auth-header {
      text-align: center;
      padding: 40px 32px 24px;
    }

    .app-logo {
      width: 64px; height: 64px;
      background: var(--blue-soft);
      color: var(--blue);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px;
      margin: 0 auto 16px;
      box-shadow: inset 0 0 0 1px rgba(37,99,235,0.1);
    }

    .app-title {
      font-size: 26px;
      font-weight: 900;
      margin: 0;
      background: var(--gradient-main);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -0.5px;
    }

    .app-subtitle {
      margin-top: 8px;
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
    }

    /* TABS (SWITCHER) */
    .auth-tabs {
      display: flex;
      padding: 0 32px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 24px;
    }

    .tab-btn {
      flex: 1;
      text-align: center;
      padding: 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: .2s;
    }

    .tab-btn:hover { color: var(--blue); }
    
    .tab-btn.active {
      color: var(--blue);
      border-bottom-color: var(--blue);
    }

    /* FORMS */
    .form-container {
      padding: 0 32px 40px;
    }

    .form-group { margin-bottom: 16px; }
    
    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .form-input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #f8fafc;
      font-size: 14px;
      color: #0f172a;
      outline: none;
      transition: .2s;
      font-weight: 500;
    }

    .form-input:focus {
      background: #ffffff;
      border-color: var(--blue);
      box-shadow: 0 0 0 4px var(--blue-soft);
    }

    .form-input::placeholder { color: #cbd5e1; }

    .password-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .password-wrapper .form-input {
      padding-right: 45px; /* Space for the icon */
    }

    .toggle-password {
      position: absolute;
      right: 16px;
      color: var(--muted);
      cursor: pointer;
      transition: .2s;
      font-size: 14px;
      user-select: none;
    }

    .toggle-password:hover {
      color: var(--blue);
    }

    .forgot-link {
      display: block;
      text-align: right;
      font-size: 12px;
      color: var(--blue);
      text-decoration: none;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .forgot-link:hover { text-decoration: underline; }

    .btn-submit {
      width: 100%;
      padding: 16px;
      border: none;
      border-radius: 14px;
      background: var(--gradient-main);
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(37,99,235,.2);
      transition: .2s;
    }
    .btn-submit:hover {
      transform: translateY(-2px);
      filter: brightness(1.1);
      box-shadow: 0 15px 30px rgba(37,99,235,.3);
    }
    .btn-submit:active { transform: translateY(0); }

    /* ANIMATION UTILS */
    .hidden { display: none; }
    .fade-in { animation: fadeIn .3s ease-in-out; }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* RESPONSIVE */
    @media (max-width: 480px) {
      body { padding: 0; background: #fff; align-items: flex-start; }
      .auth-card { box-shadow: none; border: none; border-radius: 0; max-width: 100%; height: 100vh; }
      .auth-header { padding-top: 60px; }
    }