:root{
  --modal-backdrop:rgba(0,0,0,.88);
  --modal-surface:#101318;
  --modal-surface-deep:#0b0e12;
  --modal-border:#303842;
  --modal-text:#f5f5f3;
  --modal-muted:#a7adb5;
  --modal-accent:#ff4b0b;
}

html:has(.modal),html:has(.modal) body,
html:has(.edit-overlay),html:has(.edit-overlay) body,
html.profile-modal-open,html.profile-modal-open body{overflow:hidden}

/* Bot trap: intentionally present in the form but never visible to people. */
.auth-honeypot{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.auth-honeypot input{width:1px!important;height:1px!important;padding:0!important;border:0!important}

.modal,.main>.edit-overlay{
  position:fixed;
  z-index:9000;
  inset:0;
  width:100vw!important;
  max-width:none!important;
  height:100dvh;
  margin:0!important;
  padding:22px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--modal-backdrop);
  backdrop-filter:blur(10px);
}

.modal>.card,
.main>.profile-upload-modal,
.main>.edit-overlay>.edit-profile{
  box-sizing:border-box;
  margin:auto!important;
  max-height:calc(100dvh - 44px);
  overflow-x:hidden;
  overflow-y:auto;
  color:var(--modal-text);
  border:1px solid var(--modal-border);
  border-radius:20px;
  background:linear-gradient(145deg,var(--modal-surface),var(--modal-surface-deep));
  box-shadow:0 34px 100px rgba(0,0,0,.7);
  scrollbar-width:thin;
  scrollbar-color:#59616a var(--modal-surface-deep);
}

.modal>.card{width:min(480px,100%);padding:40px}
.main>.profile-upload-modal{position:fixed;z-index:10000;inset:0;width:min(560px,calc(100vw - 44px))!important;max-width:560px!important;height:max-content;padding:32px}
.main>.edit-overlay>.edit-profile{width:min(760px,100%);padding:28px}

.main>.profile-upload-modal::backdrop{background:var(--modal-backdrop);backdrop-filter:blur(10px)}

.modal>.card::-webkit-scrollbar,
.main>.profile-upload-modal::-webkit-scrollbar,
.main>.edit-overlay>.edit-profile::-webkit-scrollbar{width:8px;height:0}

.modal>.card::-webkit-scrollbar-track,
.main>.profile-upload-modal::-webkit-scrollbar-track,
.main>.edit-overlay>.edit-profile::-webkit-scrollbar-track{background:var(--modal-surface-deep);border-radius:999px}

.modal>.card::-webkit-scrollbar-thumb,
.main>.profile-upload-modal::-webkit-scrollbar-thumb,
.main>.edit-overlay>.edit-profile::-webkit-scrollbar-thumb{background:#59616a;border:2px solid var(--modal-surface-deep);border-radius:999px}

.modal>.card::-webkit-scrollbar-thumb:hover,
.main>.profile-upload-modal::-webkit-scrollbar-thumb:hover,
.main>.edit-overlay>.edit-profile::-webkit-scrollbar-thumb:hover{background:var(--modal-accent)}

.modal .close,.close-edit,.main>.profile-upload-modal>.profile-image-modal-close{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:#d7dadd;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  font-size:26px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
}

.modal .close:hover,.close-edit:hover,.main>.profile-upload-modal>.profile-image-modal-close:hover{color:#fff;border-color:var(--modal-border);background:#171b20}
.main>.profile-upload-modal>.profile-image-modal-close{position:absolute;top:14px;right:14px}

.modal h2,.profile-upload-modal h2,.edit-profile h2{color:var(--modal-text);font-weight:500;letter-spacing:-.03em}
.modal>.card>p:not(.error):not(.switch),.profile-upload-modal p{color:var(--modal-muted)}

.modal input:not([type=checkbox]),
.edit-profile input:not([type=checkbox]),
.profile-upload-modal input[type=file]{border-color:var(--modal-border);background:#080a0c;color:#fff}

.modal input:not([type=checkbox]):focus,
.edit-profile input:not([type=checkbox]):focus{border-color:var(--modal-accent);box-shadow:0 0 0 3px rgba(255,75,11,.1)}

@media(max-width:620px){
  .modal,.main>.edit-overlay{padding:10px}
  .modal>.card,.main>.profile-upload-modal,.main>.edit-overlay>.edit-profile{width:100%!important;max-height:calc(100dvh - 20px);padding:22px;border-radius:16px}
}

/* Account modal: scroll the viewport layer, not the card itself. */
.modal{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#59616a var(--modal-surface-deep);
}
.modal>.card{
  flex:0 0 min(480px,100%);
  width:min(480px,100%);
  max-height:none;
  margin:auto!important;
  overflow:visible;
}
.modal::-webkit-scrollbar{width:8px}
.modal::-webkit-scrollbar-track{background:var(--modal-surface-deep)}
.modal::-webkit-scrollbar-thumb{background:#59616a;border:2px solid var(--modal-surface-deep);border-radius:999px}
.modal::-webkit-scrollbar-thumb:hover{background:var(--modal-accent)}
@media(max-width:620px){.modal>.card{max-height:none}}

/* Profile Settings: keep scrolling on the viewport overlay so the scrollbar
   remains at the browser's right edge instead of inside the settings card. */
.main>.edit-overlay{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#59616a var(--modal-surface-deep);
}
.main>.edit-overlay>.edit-profile{
  flex:0 0 min(760px,100%);
  width:min(760px,100%);
  max-height:none;
  margin:auto!important;
  overflow:visible;
}
.main>.edit-overlay::-webkit-scrollbar{width:8px}
.main>.edit-overlay::-webkit-scrollbar-track{background:var(--modal-surface-deep)}
.main>.edit-overlay::-webkit-scrollbar-thumb{background:#59616a;border:2px solid var(--modal-surface-deep);border-radius:999px}
.main>.edit-overlay::-webkit-scrollbar-thumb:hover{background:var(--modal-accent)}
@media(max-width:620px){.main>.edit-overlay>.edit-profile{max-height:none}}