/* ===== Global ===== */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c7744);
    color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
  }
  
  /* Container */
  .container {
    background: rgba(20, 22, 25, 0.9);
    border-radius: 18px;
    padding: 40px;
    width: 95%;
    max-width: 950px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .particles .p { position: absolute; font-size: 18px; opacity: .22; filter: blur(.2px); animation: drift 14s linear infinite; }
  .particles .p:nth-child(1) { left: 8%;  top: 76%; animation-delay: -1s; }
  .particles .p:nth-child(2) { left: 16%; top: 22%; animation-delay: -3s; }
  .particles .p:nth-child(3) { left: 28%; top: 64%; animation-delay: -5s; }
  .particles .p:nth-child(4) { left: 44%; top: 18%; animation-delay: -2s; }
  .particles .p:nth-child(5) { left: 58%; top: 72%; animation-delay: -4s; }
  .particles .p:nth-child(6) { left: 72%; top: 28%; animation-delay: -6s; }
  .particles .p:nth-child(7) { left: 84%; top: 58%; animation-delay: -7s; }
  .particles .p:nth-child(8) { left: 36%; top: 84%; animation-delay: -8s; }
  .particles .p:nth-child(9) { left: 12%; top: 40%; animation-delay: -9s; }
  .particles .p:nth-child(10){ left: 90%; top: 32%; animation-delay: -10s; }
  @keyframes drift { 0% { transform: translateY(0) } 50% { transform: translateY(-16px) } 100% { transform: translateY(0) } }
  @media (min-width: 860px) {
    .container {
      grid-template-columns: 1.2fr 420px;
      align-items: center;
    }
  }
  
  /* Eco Glow Borders */
  .container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, #4caf50, #2196f3, #f44336, #9e9e9e);
    background-size: 400% 400%;
    animation: gradientMove 6s infinite alternate;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  
  /* Hero Section */
  .auth-hero {
    text-align: left;
    position: relative;
    z-index: 1;
  }
  .hero-title {
    font-size: 26px;
    font-weight: 700;
    color: #e3f2e5;
  }
  .hero-subtitle {
    font-size: 14px;
    color: #a8c3a5;
    margin: 8px 0 16px;
  }
  .hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
  }
  .badge-recyclable { background: rgba(33,150,243,.15); color: #63b3ff; }
  .badge-organic { background: rgba(76,175,80,.15); color: #7ee081; }
  .badge-hazardous { background: rgba(244,67,54,.15); color: #ff8a80; }
  .badge-general { background: rgba(158,158,158,.15); color: #cfcfcf; }
  .hero-img {
    margin-top: 20px;
    max-width: 100%;
    border-radius: 12px;
  }
  
  /* Form */
  .auth-form {
    background: rgba(15, 17, 20, 0.92);
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    position: relative;
    z-index: 1;
  }
  .form-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: #7ee081;
  }
  .form-group {
    margin-bottom: 20px;
    text-align: left;
  }
  .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #cfead0;
    margin-bottom: 6px;
    display: block;
  }
  .form-group input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: #0f1216;
    color: #fff;
    font-size: 15px;
    transition: 0.3s;
  }
  .form-group input:focus {
    border-color: #4caf50;
    box-shadow: 0 0 6px rgba(76,175,80,0.4);
    outline: none;
  }
  
  /* Button */
  .auth-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s ease;
  }
  .auth-btn:hover {
    background: linear-gradient(135deg, #66bb6a, #2e7d32);
    box-shadow: 0 6px 20px rgba(76,175,80,0.45);
    transform: translateY(-2px);
  }
  .auth-btn:disabled {
    background: #555;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Google button */
  .google-btn {
    margin-top: 10px;
    background: #DB4437;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
  }
  .google-btn:hover { background: #c63d31; box-shadow: 0 6px 22px rgba(219,68,55,.35); }
  .google-btn:active { transform: translateY(0); }
  .google-btn::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cpath fill=%22%23FFC107%22 d=%22M43.6 20.5H42V20H24v8h11.3C33.7 32.6 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.3 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c10 0 19-7.3 19-20 0-1.3-.1-2.7-.4-3.5z%22/%3E%3Cpath fill=%22%23FF3D00%22 d=%22M6.3 14.7l6.6 4.8C14.4 16.3 18.8 14 24 14c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.3 29.6 4 24 4 16.1 4 9.2 8.1 6.3 14.7z%22/%3E%3Cpath fill=%22%234CAF50%22 d=%22M24 44c5.2 0 10.1-2 13.7-5.3l-6.3-5.1C29.3 36 26.8 37 24 37c-5.3 0-9.7-3.4-11.3-8H6.3l-6.6 5C2.6 39.9 12.5 44 24 44z%22/%3E%3Cpath fill=%22%232196F3%22 d=%22M43.6 20.5H42V20H24v8h11.3c-1.3 3.8-4.7 6.5-8.3 6.5-3.1 0-5.8-1.8-7.2-4.5l-6.6 5.1C16.1 39.9 20.9 44 27 44c10 0 19-7.3 19-20 0-1.3-.1-2.7-.4-3.5z%22/%3E%3C/svg%3E') center/contain no-repeat;
  }
  
  /* Links */
  .auth-links p {
    font-size: 13px;
    color: #b9c4c7;
    margin: 8px 0;
  }
  .auth-link {
    color: #7ee081;
    font-weight: 500;
    text-decoration: none;
  }
  .auth-link:hover {
    color: #a7f0a9;
    text-decoration: underline;
  }
  
  /* Floating background icons */
  body::before {
    content: "♻️ 🌱 ⚠️ 🗑️";
    font-size: 60px;
    position: absolute;
    top: -50px;
    left: -50px;
    animation: floatIcons 20s infinite linear;
    opacity: 0.05;
  }
  @keyframes floatIcons {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(100vh) rotate(360deg); }
  }