/* Internal ETOP sign-in; no dependencies on removed demo assets. */
:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; color: #15243b; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(ellipse at 15% 5%, #e1efff, transparent 65%), #f4f7fb; }
.signin-shell { width: 100%; max-width: 430px; }
.signin-home { display:block; width:186px; margin:0 auto 24px; text-decoration:none; }
.signin-home picture { display:block; }
.signin-home img { display:block; width:100%; height:auto; }
.form-2 { background: #fff; padding: 32px; border: 1px solid #dce4ef; border-radius: 20px; box-shadow: 0 14px 45px #17345b10; }
h1 { font-size: 26px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.03em; }
.signin-description { color: #66758b; margin: 0 0 24px; line-height: 1.5; }
.signin-field { margin-bottom: 18px; }
.signin-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.signin-field input { width: 100%; border: 1px solid #cbd6e4; border-radius: 10px; padding: 13px 14px; min-height: 48px; font: inherit; background: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #619de1; outline-offset: 3px; }
.signin-password-toggle { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #52647d; margin: 2px 0 24px; cursor: pointer; min-height: 32px; }
.signin-password-toggle input { width: 18px; height: 18px; accent-color: #005ab7; }
.form-2 button { width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: #005ab7; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.form-2 button:hover { background: #004995; }
.signin-back { display: block; color: #52647d; text-align: center; text-decoration: none; padding: 22px 0 0; font-size: 14px; }
.signin-message:not(:empty) { margin-bottom: 18px; font-size: 14px; line-height: 1.6; }
.signin-message .error, .signin-message .alert-danger { color: #9d2636; background: #fff2f3; padding: 12px; border-radius: 8px; }
.signin-message .close { display: none; }
@media (max-width: 420px) { .form-2 { padding: 26px 22px; } h1 { font-size: 24px; } }

.signin-account-kind{border:0;padding:0;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.signin-account-kind legend{font-size:14px;font-weight:600;padding:0;margin-bottom:8px}
.signin-account-kind label{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #dce4ef;padding:11px 8px;border-radius:10px;font-size:13px;cursor:pointer}
.signin-account-kind label:has(input:checked){border-color:#005ab7;background:#eaf3ff;color:#005ab7;font-weight:650}
.signin-account-kind input{accent-color:#005ab7;width:16px;height:16px;margin:0}
.signin-account-hint{font-size:13px;line-height:1.5;color:#66758b;margin:-6px 0 16px}

/* Match the dashboard's blue/orange identity and layered surfaces. */
body { background:radial-gradient(ellipse at 10% 5%,#dcecff,transparent 60%),radial-gradient(ellipse at 90% 95%,#ffe9d9,transparent 50%),#edf3fa; }
.form-2 { position:relative; background:linear-gradient(150deg,#fff,#fdfefe); border-color:#d2deed; box-shadow:0 3px 6px #18365808,0 18px 45px #18365816; border-top:4px solid #ff8038; }
h1 { color:#163c69; }
.signin-field input { box-shadow:inset 0 1px 3px #18365806; }
.form-2 button { background:linear-gradient(135deg,#0869c8,#0054ad); box-shadow:0 3px 6px #005ab728,inset 0 1px #ffffff30; }
.form-2 button:hover { background:#0054ad; }
.signin-account-kind label { box-shadow:0 2px 3px #18365806; background:#fff; }
.signin-account-kind label:has(input:checked) { background:linear-gradient(130deg,#eaf3ff,#f6faff); box-shadow:inset 0 -3px #ff8038,0 2px 5px #1836580b; }
.signin-back:hover { color:#ad4a12; }