.kl-account{box-sizing:border-box;max-width:100%;padding:clamp(24px,4vw,52px);background:#fff;border:1px solid #e9e2f2;border-radius:22px;box-shadow:0 16px 45px #3e1b5b0a;color:#443750}
.kl-account .kl-account-eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.15em;color:#8056a5;margin-bottom:16px}
.kl-account .kl-account-header h1{font-size:clamp(28px,3vw,42px);line-height:1.2;margin:0 0 16px;color:#44214f;font-weight:400}
.kl-account .kl-account-header p{font-size:18px;line-height:1.6;margin:0 0 30px;max-width:42em}
.kl-account form.well{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;margin:0}
.kl-account fieldset{min-width:0;margin:0 0 28px;padding:0;border:0}
.kl-account-profile fieldset+fieldset{border-top:1px solid #ece5f2;padding-top:26px}
.kl-account legend{display:block;box-sizing:border-box;width:100%;float:none;padding:0;margin:0 0 20px;font-size:22px;font-weight:400;color:#553466;border:0}
.kl-account .control-group{display:block!important;margin:0 0 22px!important;padding:0!important}
.kl-account .control-label{display:block!important;float:none!important;width:auto!important;max-width:none!important;text-align:left!important;padding:0!important;margin:0 0 8px!important}
.kl-account .control-label label{font-size:16px;font-weight:600;color:#4b3558}
.kl-account .controls{margin:0!important;padding:0!important;min-width:0;width:auto!important}
.kl-account input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),.kl-account select,.kl-account textarea{box-sizing:border-box;width:100%!important;max-width:100%;height:54px!important;padding:12px 16px!important;border:1px solid #dcd2e6!important;border-radius:10px!important;background:#fff!important;color:#32233e;font:inherit;box-shadow:none}
.kl-account input[readonly],.kl-account input[disabled]{background:#f8f5fc!important;color:#796781}
.kl-account input:focus,.kl-account select:focus,.kl-account textarea:focus{outline:2px solid #9255d8;outline-offset:2px}
.kl-account input[type=checkbox],.kl-account input[type=radio]{appearance:auto!important;width:19px!important;height:19px!important;margin:0!important;accent-color:#884bed;flex:0 0 19px}
.kl-account .form-check{display:flex;align-items:center;gap:10px;margin:12px 0 22px}
.kl-account .form-check-label{margin:0}
.kl-account .input-group{display:flex!important;align-items:stretch;gap:8px;flex-wrap:nowrap}
.kl-account .input-group>input{min-width:0;flex:1}
.kl-account button.btn{box-sizing:border-box;border:1px solid #dcd2e6;border-radius:10px;background:#f9f5fd;color:#583370;min-height:44px;height:auto;padding:10px 18px;line-height:1.4;font:inherit;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-transform:none;box-shadow:none;white-space:normal}
.kl-account .input-group button{flex:0 0 auto;max-width:160px;font-size:14px}
.kl-account button svg,.kl-account button img.icon{width:22px!important;height:22px!important;max-width:22px;flex:0 0 22px}
.kl-account button .icon-eye:before{content:'◉'}.kl-account button .icon-eye-slash:before{content:'◉'}
.kl-account button .icon-check,.kl-account button .icon-times{display:none}
.kl-account button.btn-primary{border:0;border-radius:30px;background:linear-gradient(110deg,#f65370,#8048f6);color:#fff;padding:14px 30px;min-height:52px}
.kl-account button:hover{filter:brightness(.97)}
.kl-account button:focus-visible,.kl-account a:focus-visible{outline:3px solid #7040ac;outline-offset:4px}
.kl-account .com-users-login__options{display:flex;gap:12px 24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #ece5f2;font-size:15px}
.kl-account .form-control-feedback:empty{display:none}
.kl-account .form-control-feedback{font-size:14px;color:#b13c55;margin-left:6px}
.kl-account .form-text,.kl-account .text-muted,.kl-account .small,.kl-account .password-strength{font-size:14px;line-height:1.5;color:#796781}
.kl-account .form-text{margin:7px 0}
.kl-account .com-users-profile__edit-submit .controls{display:flex;flex-wrap:wrap;gap:12px}
.kl-account table{width:100%;font-size:15px;border-collapse:collapse}.kl-account th,.kl-account td{padding:12px 10px;border-bottom:1px solid #eee7f4;text-align:left;overflow-wrap:anywhere}
.kl-account .table-responsive{overflow-x:auto}
.kl-account .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.kl-account{padding:24px 18px;border-radius:16px}.kl-account .kl-account-header p{font-size:17px}.kl-account .input-group{flex-wrap:wrap}.kl-account .input-group>input{flex-basis:100%}.kl-account button.btn-primary{width:100%}.kl-account .com-users-login__options{flex-direction:column}.kl-account th,.kl-account td{padding:10px 5px;font-size:13px}}

/* Keep Joomla's native password toggle beside its input, including after reveal. */
.kl-account .input-group:has(> .input-password-toggle) { flex-wrap:nowrap!important; gap:8px; }
.kl-account .input-group:has(> .input-password-toggle) > input { flex:1 1 0%!important; width:0!important; min-width:0; }
.kl-account .input-group > button.input-password-toggle { display:inline-flex!important; align-items:center; justify-content:center; flex:0 0 48px!important; width:48px!important; max-width:48px; min-width:48px; height:54px!important; min-height:54px; margin:0!important; padding:0!important; }
.kl-account .input-password-toggle:focus-visible { outline:3px solid #9562d4; outline-offset:3px; }

/* Draw a clear eye without depending on an icon font. Native labels stay intact. */
.kl-account .input-password-toggle [class*="icon-eye"] { display:block; width:22px; height:22px; background:center/22px 22px no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23755585%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.kl-account .input-password-toggle [class*="icon-eye"]::before { content:none!important; }
.kl-account .input-group:has(>input[type="text"]) .input-password-toggle [class*="icon-eye"] { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23755585%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m3%203%2018%2018%22%2F%3E%3C%2Fsvg%3E"); }