:root{
    --bg-base: #071026ef; 
    --accent1: #7c5cff;
    --accent2: #ff6b81;
    --card-w: 420px;
    --radius: 16px;
  }
  
  /* page background - change --bg-base to change scene color */
  html,body{
    height:100%;
    margin:0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:
      radial-gradient(circle at 10% 20%, rgba(124,92,255,0.12), transparent 10%),
      radial-gradient(circle at 90% 80%, rgba(255,107,129,0.08), transparent 10%),
      var(--bg-base);
    color: #eaeef8;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* center */
  .center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px; }
  
  /* glossy card */
  .card {
    width: var(--card-w);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    padding:22px;
    box-shadow: 0 20px 60px rgba(2,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
    transform-origin:center;
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
  }
  .card:hover { transform: translateY(-6px); box-shadow: 0 30px 90px rgba(2,6,23,0.85); }
  
  /* animated gradient border */
  .card::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    border-radius: calc(var(--radius) + 2px);
    padding:2px;
    background: linear-gradient(90deg, rgba(124,92,255,0.3), rgba(255,107,129,0.2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    pointer-events:none;
    filter: blur(8px);
    opacity:0.7;
  }
  
  /* small header */
  .header { display:flex; gap:14px; align-items:center; margin-bottom:16px; position:relative; z-index:1; }
  .logo{ width:56px; height:56px; border-radius:12px;
    background: linear-gradient(135deg,var(--accent1),var(--accent2));
    display:flex;align-items:center; justify-content:center; color:white; font-weight:700; font-size:20px;
    box-shadow: 0 8px 30px rgba(124,92,255,0.12);
    transform: translateZ(0);
  }
  .h-title{ margin:0; font-size:18px; color:#fff; }
  .h-sub{ margin:0; font-size:13px; color:rgba(255,255,255,0.75); }
  
  /* form */
  .form{ display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
  .input{
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    padding:12px 14px; border-radius:12px; color:inherit; font-size:14px;
  }
  .input::placeholder{ color: rgba(255,255,255,0.5) }
  .input:focus{ outline:none; border-color: rgba(124,92,255,0.9); box-shadow: 0 12px 40px rgba(124,92,255,0.06); }
  
  /* animated button */
  .btn{
    background: linear-gradient(90deg,var(--accent1),var(--accent2));
    color:white; padding:11px; border-radius:12px; border:none; font-weight:700; cursor:pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  .btn:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(124,92,255,0.08); }
  
  /* loading overlay */
  .loading-overlay{
    position:fixed; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;
    background: rgba(2,6,23,0.45); z-index:9999; opacity:0; pointer-events:none; transition: opacity 180ms ease;
  }
  .loading-overlay.show{ opacity:1; pointer-events:auto; }
  .loader {
    width:86px; height:86px; border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    display:flex; align-items:center; justify-content:center; box-shadow: 0 20px 60px rgba(2,6,23,0.7);
  }
  .spinner {
    width:46px; height:46px; border-radius:50%; border:4px solid rgba(255,255,255,0.09);
    border-left-color: white; animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  
  /* alerts */
  .alert{ padding:10px; border-radius:8px; font-size:13px; background: rgba(255,80,80,0.06); color:#ffd4d4; }
  
  /* small responsive */
  @media (max-width:480px){ .card{ width:92vw; padding:18px; } }