:root{
      --bg: linear-gradient(105deg, #ffffff, #f2f2f2, #efeeee, #d9d9d9);
      --title-color: #d4338d; 
      --text-color: #000;
      --muted: #4a4a4a;
      --accent: #6c9cff;
      --danger: #ff6b6b;
      --success: #4cd964;
      --card-bg: rgba(255,255,255,0.02);
      --radius: 12px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    html,body{ height:100%; margin:0; background:var(--bg); color:var(--text-color); }
    .wrap{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:40px 16px; }
    .panel{ width:100%; max-width:520px; background:var(--card-bg); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 8px 30px rgba(0,0,0,0.6); }
     @media (max-width: 700px) { 
        .panel, .wrap { 
            grid-template-columns: 1fr; /* stack columns */ 
            margin-right: -10px; /* adjust spacing */ 
            margin-left: -10px; 
        } }

    h1{ margin:0 0 8px 0; color:var(--title-color); font-size:22px; }
    p{ margin:0 0 14px 0; color:var(--muted); }
    label{ font-size:13px; color:var(--muted); display:block; margin-bottom:6px; }
    input{ width:80%; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.25); color:var(--text-color); }
    button{
      padding:10px 14px;
      border-radius:8px;
      border: none;
      cursor:pointer;
      background: linear-gradient(180deg,var(--accent), #3b7be6);
      color:#fff;
      font-weight:600;
      transition: transform .08s ease, opacity .12s;
    }

    button:active{ transform: translateY(1px); }
    button.btn-toggle-pwd{
      background: transparent;
      border:1px solid rgba(255,255,255,0.06);
      color:var(--text-color);
    }

    .row{ display:flex; gap:8px; align-items:center; }
    .actions{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
    .remember{ display:flex; gap:8px; align-items:center; color:var(--muted); }
    .link{ color:var(--title-color); text-decoration:underline; }
    .danger{ color:var(--danger); }
    .pending{ color:#ffcc00; }
    .spinner{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,0.06); border-top-color:var(--accent); animation:spin 1s linear infinite; display:inline-block; vertical-align:middle; margin-right:8px; }
    @keyframes spin{ to{ transform:rotate(360deg); } }
    .footer{ margin-top:14px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }
    .socials{ display:flex; gap:8px; }
    .socials button{ background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 10px; border-radius:8px; color:var(--text-color); }

    /* Button loading spinner */
    .btn-primary.loading, button.loading {
      position: relative;
      pointer-events: none;
      opacity: 0.85;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-primary.loading::after, button.loading::after {
      content: '';
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      margin-left: 4px;
    }