.gpin-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
padding: 40px 20px;
} .gpin-box {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 48px 40px;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.gpin-box h2 { font-size: 22px; margin: 16px 0 8px; color: #111; }
.gpin-box p  { color: #555; font-size: 15px; margin-bottom: 28px; }
.gpin-logo { margin-bottom: 8px; }
.gpin-logo img, .gpin-logo-img { max-height: 56px; max-width: 80%; width: auto; height: auto; display: inline-block; }
.gpin-logo-text { font-size: 20px; font-weight: 700; color: #111; } .gpin-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.gpin-name,
.gpin-input {
width: 100%;
border: 2px solid #d1d5db;
border-radius: 8px;
padding: 12px 16px;
text-align: center;
outline: none;
transition: border-color .2s;
box-sizing: border-box;
}
.gpin-name  { font-size: 16px; }
.gpin-input { font-size: 18px; letter-spacing: 4px; }
.gpin-name:focus,
.gpin-input:focus { border-color: #2563eb; }
.gpin-btn {
width: 100%;
background: #1d4ed8;
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.gpin-btn:hover    { background: #1e40af; }
.gpin-btn:disabled { opacity: .6; cursor: wait; } .gpin-msg { margin-top: 14px; font-size: 14px; min-height: 20px; }
.gpin-msg.gpin-ok  { color: #16a34a; }
.gpin-msg.gpin-err { color: #dc2626; } .gpin-protected-content {
-webkit-user-select: none;
user-select: none;
}
@media (max-width: 480px) {
.gpin-box { padding: 32px 20px; }
}