:root{
      --bg: #f4fbff; /* pastel blue */
      --card: #ffffff;
      --accent: #8ab4ff; /* blue */
      --accent-2: #ffb6d5; /* pink */
      --muted: #6b7280;
      --success: #10b981;
      --danger: #ef4444;
      --radius: 14px;
      --glass: rgba(255,255,255,0.6);
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family: 'Kanit', sans-serif; background: linear-gradient(180deg,var(--bg),#ffffff 60%);
      color:#111827; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px;
    }
    .phone{
      width:375px; max-width:96%; background:transparent; border-radius:26px; box-shadow:0 10px 30px rgba(2,6,23,0.12);
      padding:24px;
    }
    .imglogo{width: 37%}
    .card{background:linear-gradient(180deg,var(--glass),rgba(255,255,255,0.85));border-radius:var(--radius);padding:24px;backdrop-filter: blur(6px);box-shadow:0 8px 30px rgba(2,6,23,0.06)}
    .card h2{margin:0 0 14px;font-size:22px;text-align:center;font-weight:700}
    .card p{margin:0 0 16px;color:var(--muted);font-size:13px;text-align:center}

    .form-group{margin-bottom:16px;display:flex;flex-direction:column}
    label{font-size:13px;margin-bottom:6px;font-weight:500;color:#374151}
    input{padding:12px 14px;border:1px solid #d1d5db;border-radius:12px;font-size:14px;outline:none;transition:border .2s}
    input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(138,180,255,0.25)}

    .btn{ font-family: 'Kanit', sans-serif;padding:12px 14px;border-radius:12px;border:0;font-weight:600;cursor:pointer;background:#0080e5;color:#fff;width:100%;font-size:15px;transition:background .2s}
    .btn:hover{background:#6f9cff}

    .extra{text-align:center;margin-top:12px;font-size:13px}
    .extra a{color:var(--accent);text-decoration:none;font-weight:500}
    .extra a:hover{text-decoration:underline}

    .logo{text-align:center;margin-bottom:20px}
    .logo span{font-size:36px;color:var(--accent)}

    @media (max-width:420px){.phone{width:100%;padding:18px}}