/* =========================
   BASE
   ========================= */

   *,
   *::before,
   *::after{
   box-sizing:border-box;
   }
   
   body{
   margin:0;
   font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
   }
   
   
   /* =========================
      AUTH LAYOUT
      ========================= */
   
   .auth-body{
   background:#0f0f10;
   display:flex;
   align-items:center;
   justify-content:center;
   min-height:100vh;
   padding:24px;
   color:#fff;
   }
   
   
   /* =========================
      CARD
      ========================= */
   
   .auth-card{
   width:100%;
   max-width:420px;
   background:#1a1a1b;
   padding:40px;
   border-radius:16px;
   border:1px solid #2a2a2a;
   box-shadow:0 20px 40px rgba(0,0,0,0.6);
   transition:box-shadow 0.2s;
   }
   
   .auth-card:hover{
   box-shadow:0 25px 50px rgba(0,0,0,0.8);
   }
   
   
   /* =========================
      BRAND
      ========================= */
   
   .auth-logo{
   display:block;
   margin:0 auto 18px auto;
   height:36px;
   }
   
   .auth-title{
   margin:0 0 26px 0;
   font-size:22px;
   font-weight:600;
   text-align:center;
   }
   
   
   /* =========================
      GOOGLE BUTTON
      ========================= */
   
   .btn-google{
   display:block;
   width:100%;
   text-align:center;
   padding:12px;
   border-radius:10px;
   border:1px solid #2a2a2a;
   background:#111;
   text-decoration:none;
   color:#fff;
   font-weight:500;
   margin-bottom:22px;
   transition:background 0.15s;
   }
   
   .btn-google:hover{
   background:#1f1f1f;
   }
   
   
   /* =========================
      DIVIDER
      ========================= */
   
   .divider{
   display:flex;
   align-items:center;
   margin:20px 0;
   color:#777;
   font-size:13px;
   }
   
   .divider::before,
   .divider::after{
   content:"";
   flex:1;
   border-bottom:1px solid #2a2a2a;
   }
   
   .divider span{
   padding:0 12px;
   }
   
   
   /* =========================
      FORM
      ========================= */
   
   .auth-form{
   display:flex;
   flex-direction:column;
   gap:14px;
   }
   
   .auth-form input{
   width:100%;
   padding:12px 14px;
   border-radius:10px;
   border:1px solid #2a2a2a;
   background:#111;
   color:#fff;
   font-size:14px;
   }
   
   .auth-form input::placeholder{
   color:#777;
   }
   
   .auth-form input:focus{
   outline:none;
   border-color:#444;
   }
   
   .auth-form button{
   width:100%;
   padding:12px;
   border:none;
   border-radius:10px;
   background:#fff;
   color:#000;
   font-weight:600;
   cursor:pointer;
   transition:opacity 0.15s;
   }
   
   .auth-form button:hover{
   opacity:0.9;
   }
   
   
   /* =========================
      LINKS
      ========================= */
   
   .auth-links{
   text-align:center;
   font-size:13px;
   margin-top:16px;
   color:#999;
   }
   
   .auth-links a{
   color:#fff;
   text-decoration:none;
   }
   
   .auth-links a:hover{
   text-decoration:underline;
   }
   
   
   /* =========================
      MOBILE
      ========================= */
   
   @media (max-width:480px){
   
   .auth-body{
   padding:18px;
   }
   
   .auth-card{
   padding:28px 22px;
   border-radius:14px;
   max-width: 1000px;
   }

   
   
   .auth-title{
   font-size:20px;
   }
   
   .auth-form input{
   padding:12px;
   }
   
   }