:root{
      --bg: linear-gradient(135deg, #1a0a1a, #2d1b2d, #4a1f4a);
      --card-bg: rgba(139, 69, 193, 0.2);
      --card-border: rgba(168, 85, 247, 0.3);
      --card-text: #e9d5ff;
      --title-color: #c084fc;
      --muted: #d8b4fe;
      --btn-bg: linear-gradient(135deg, #7c3aed, #a855f7);
      --btn-bg-hover: linear-gradient(135deg, #8b5cf6, #c084fc);
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    html,body{
      height:100%;
      margin:0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: var(--bg);
      color: var(--card-text);
    }

    .wrap{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:40px 20px;
      box-sizing:border-box;
    }

    .card{
      text-align:center;
      max-width:720px;
      width:100%;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      padding: 50px 40px;
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
    }

    .avatar{
      width:120px;
      height:120px;
      border-radius:50%;
      object-fit:cover;
      display:block;
      margin:0 auto;
      box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
      border: 4px solid rgba(192, 132, 252, 0.3);
    }

    h1{
      margin:18px 0 8px;
      font-size:40px;
      line-height:1;
      font-weight:800;
      letter-spacing: -0.02em;
      color: var(--title-color);
    }

    p.lead{
      margin:0;
      margin-bottom:22px;
      color:var(--muted);
      font-size:18px;
    }

    .enter-btn{
      display:inline-block;
      background: var(--btn-bg);
      border:0;
      padding:15px 35px;
      border-radius:12px;
      font-weight:700;
      font-size:16px;
      cursor:pointer;
      box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4);
      transition: all 0.3s ease;
      user-select:none;
      color: white;
    }

    .enter-btn:hover{
      transform: translateY(-3px);
      background: var(--btn-bg-hover);
      box-shadow: 0 12px 30px rgba(168, 85, 247, 0.6);
    }

    /* Responsive text sizing for smaller screens */
    @media (max-width:420px){
      h1{ font-size:28px; }
      .avatar{ width:96px; height:96px; }
      p.lead{ font-size:15px; }
      .enter-btn{ padding:12px 25px; font-size:15px; }
      .card{ padding: 30px 20px; }
    }