:root { --eye-size:28px; --eye-gap:10px; }

/* Base button: neutral by default; variants handle positioning */
.eye-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: var(--eye-size);
 height: var(--eye-size);
 border-radius:6px;
 border: none;
 cursor: pointer;
 color: inherit;
 z-index:3; /* above input */
 padding:0;
 line-height:1;
}

.eye-toggle i { font-size:0.95rem; pointer-events:none; }
.eye-toggle:focus { outline:2px solid rgba(29,233,182,0.12); outline-offset:2px; }

/* Visual variants */
.eye-toggle.variant-signin { background: rgba(255,255,255,0.06); color:#23395d; }
.eye-toggle.variant-signup { background: rgba(0,0,0,0.04); color:#23395d; }

/* Reserve input right padding when a toggle is present */
.form-field.has-eye input,
.signin-field.has-eye input { padding-right: calc(var(--eye-size) + var(--eye-gap) +6px); }

/* Fallback when markup doesn't add .has-eye */
.form-field:has(.eye-toggle) input,
.signin-field:has(.eye-toggle) input { padding-right: calc(var(--eye-size) + var(--eye-gap) +6px); }

/* Small screens */
@media (max-width:700px) {
 :root { --eye-size:24px; --eye-gap:8px; }
 .eye-toggle { width: var(--eye-size); height: var(--eye-size); }
}

/* Separate positioning by context to avoid cross-page impact */
/* Sign-in page context: position absolutely inside field */
:host-context(.signin-popup) .eye-toggle.variant-signin {
 position: absolute;
 right:10px;
 top:50%;
 transform: translateY(-50%);
}

/* Sign-up page context (if used similarly), keep independent positioning */
:host-context(.signup-popup) .eye-toggle.variant-signup {
 position: absolute;
 right:10px;
 top:50%;
 transform: translateY(-50%);
}