html, body { height: 100%; }
    body{
      font-family: sans-serif;
      margin: 0;
      padding: 16px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      font-size: 17px;
    }
    input,button{
      font-size:16px;
      padding:10px;
      width:100%;
      box-sizing:border-box;
      margin:8px 0;
    }
    .card{
      max-width:450px;
      width:100%;
      margin-top:50px;
      padding:20px;
      border-radius:14px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }

    .cardimg {
      background-image: url("/img/bg-music.png");
      background-repeat: no-repeat;
      background-size: 927px;
      background-position: center -205px;

    }

    a {color:#155DFC;}

    .lineh {line-height: 2.0;text-align: center;}

    .err{color:#b00}
    .ok{color:#070}
    @media (max-width: 520px){
      .card{ background-size: 900px; background-position: center -180px; }
    }
    .lead{margin:20px 0;}
    .err{color:#b00;margin-top:10px;}
    label{display:block;margin-top:10px;}

    .links{
      margin-top:14px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .links a{ color:#bbd2df; text-decoration:none; padding-right: 3px;font-weight: bold;}
    .links a:hover{ text-decoration:underline; }

    .welcome-toast{
      position: fixed;
      top: 20px;
      right: 20px;
      background: #0ea5e9;
      color: white;
      padding: 14px 22px;
      border-radius: 12px;
      font-weight: 600;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
      z-index: 9999;
      opacity: 0;
      transform: translateY(-10px);
      animation: fadeInOut 4s ease forwards;
    }
    
    @keyframes fadeInOut {
      0%   { opacity:0; transform: translateY(-10px); }
      10%  { opacity:1; transform: translateY(0); }
      85%  { opacity:1; }
      100% { opacity:0; transform: translateY(-10px); }
    }