/* ═══════════════════════════════════════════
   BESPALE × ELEMENT WEB v1.11.96
   Matching bespale site design
   ═══════════════════════════════════════════ */

/* ── Compound Design System vars ── */
:root, .cpd-theme-dark, .cpd-theme-light, [class*="cpd-theme"] {
  --cpd-color-bg-canvas-default: #000 !important;
  --cpd-color-bg-subtle-primary: rgba(188, 255, 79, 0.06) !important;
  --cpd-color-bg-subtle-secondary: rgba(255,255,255,0.04) !important;
  --cpd-color-text-primary: #fff !important;
  --cpd-color-text-secondary: #bcbcbc !important;
  --cpd-color-text-action-accent: #BCFF4F !important;
  --cpd-color-text-critical-primary: #ff4b55 !important;
  --cpd-color-text-disabled: #545454 !important;
  --cpd-color-icon-tertiary: #545454 !important;
  --cpd-color-icon-secondary: #bcbcbc !important;
  --cpd-color-icon-primary: #fff !important;
  --cpd-color-border-interactive-primary: rgba(188, 255, 79, 0.15) !important;
  --cpd-color-border-focused: rgba(188,255,79,0.4) !important;
  --cpd-color-bg-action-primary-rest: transparent !important;
  --cpd-color-bg-action-primary-hovered: rgba(188,255,79,0.08) !important;
  --cpd-color-bg-action-primary-pressed: rgba(188,255,79,0.12) !important;
  --cpd-color-text-on-solid-primary: #BCFF4F !important;
}

/* ── NUKE ALL BACKGROUNDS — pure black everywhere ── */
html, body, #root, #matrixchat,
.mx_AuthPage,
.mx_AuthPage *:not(.mx_AuthBody):not(.mx_AuthBody *):not(.mx_AuthPage_modal)  {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}

/* Kill any pseudo-element backgrounds */
.mx_AuthPage::before,
.mx_AuthPage::after,
.mx_AuthPage_modal::after,
body::before,
body::after,
#root::before,
#root::after {
  background: none !important;
  background-image: none !important;
  display: none !important;
}

/* ── Modal — black, centered ── */
.mx_AuthPage_modal {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding-top: 80px !important;
}

/* ── Logo — full bespale SVG above card ── */
.mx_AuthPage_modal::before {
  content: "";
  display: block;
  width: 160px;
  height: 32px;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22160%22%20height%3D%2232%22%20viewBox%3D%220%200%20160%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M122.6%203.6145H13.3601C13.0863%203.6145%2012.8126%203.37345%2012.8126%203.01187V0.661646C12.8126%200.360339%2013.0316%200.0590312%2013.3601%200.0590312H122.6C122.929%200.0590312%20123.148%200.360339%20123.148%200.661646V3.01187C123.148%203.31318%20122.874%203.6145%20122.6%203.6145Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M140.125%2032H85.3673C85.0935%2032%2084.8197%2031.7589%2084.8197%2031.3973V29.0471C84.8197%2028.7459%2085.0387%2028.4445%2085.3673%2028.4445H140.125C140.453%2028.4445%20140.672%2028.7459%20140.672%2029.0471V31.3973C140.672%2031.6987%20140.399%2032%20140.125%2032Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M3.23068%2015.9704V28.3845H74.634C74.9626%2028.3845%2075.1269%2028.6858%2075.1269%2028.9871V31.3373C75.1269%2031.6387%2074.9078%2031.94%2074.634%2031.94C47.803%2031.94%2028.3643%2031.94%201.5332%2031.94C0.657086%2031.94%200%2031.0963%200%2030.1924V1.86913C0%200.904936%200.711842%200.121529%201.58796%200.121529H3.17592V16.091L3.23068%2015.9704Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M28.8019%2016V20.4276C28.8019%2023.3805%2027.4878%2024.8268%2024.8047%2024.8268H7.22763C6.68005%2024.8268%206.40627%2024.5255%206.40627%2023.9228V0.902696C6.46102%200.300081%206.73481%200.0590312%207.17286%200.0590312H8.76082C9.30838%200.0590312%209.58216%200.360339%209.58216%200.902696V7.1097H24.7499C27.4331%207.1097%2028.8019%208.55746%2028.8019%2011.5705V16ZM9.63692%2021.2713H25.626V10.6049H9.63692V21.2713Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M52.7873%2015.9702V16.8741C52.7873%2017.4768%2052.5136%2017.778%2051.966%2017.778H33.5676V21.3335H51.1446C51.6921%2021.3335%2051.966%2021.6348%2051.966%2022.2375V23.985C51.966%2024.5876%2051.6921%2024.889%2051.1446%2024.889H34.3341C31.7058%2024.889%2030.3369%2023.3825%2030.3369%2020.4296V11.6313C30.3369%208.67842%2031.651%207.1719%2034.3341%207.1719H48.6806C51.3636%207.1719%2052.7873%208.58289%2052.7873%2011.5961V15.9702ZM49.5567%2014.2225V10.6671H33.5676V14.2225H49.5567Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M76.3335%2015.9089C76.7168%2016.5718%2076.8263%2017.536%2076.8263%2018.6207V20.3683C76.8263%2023.3211%2075.5122%2024.7674%2072.8291%2024.7674H55.1973C54.7045%2024.7674%2054.4307%2024.4661%2054.4307%2023.9238V22.1159C54.4307%2021.5133%2054.7045%2021.212%2055.1973%2021.212H73.5957V17.6565H58.428C56.7305%2017.6565%2055.5806%2017.0539%2054.9783%2015.9089C54.595%2015.246%2054.4307%2014.3421%2054.4307%2013.2574V11.5098C54.4307%208.55691%2055.7449%207.05037%2058.428%207.05037H76.0598C76.5526%207.05037%2076.8263%207.35167%2076.8263%207.89404V9.70189C76.8263%2010.3046%2076.5526%2010.6058%2076.0598%2010.6058H57.6614L57.7162%2014.1613H72.8838C74.5814%2014.1613%2075.7312%2014.764%2076.3335%2015.9089Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M100.862%2015.968V20.4273C100.862%2023.3802%2099.4376%2024.8265%2096.8092%2024.8265H81.6414V31.0335C81.6414%2031.6361%2081.3676%2031.8772%2080.82%2031.8772H79.2321C78.794%2031.8772%2078.5202%2031.5758%2078.4655%2031.0335V8.01336C78.4655%207.4107%2078.7392%207.1094%2079.2869%207.1094H96.8643C99.5469%207.1094%20100.862%208.61594%20100.862%2011.5688V15.968ZM81.6414%2015.968V21.3313H97.6305V10.7251H81.6414V16.0282V15.968Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M124.791%2015.9682V23.9226C124.791%2024.5251%20124.518%2024.8265%20123.97%2024.8265H106.393C103.711%2024.8265%20102.396%2023.3802%20102.396%2020.4273V18.6194C102.396%2017.5347%20102.56%2016.6308%20102.943%2015.968C103.546%2014.7627%20104.696%2014.2203%20106.393%2014.2203H121.615V10.6648H104.038C103.491%2010.6648%20103.217%2010.3636%20103.217%209.76092V8.01336C103.217%207.4107%20103.491%207.1094%20104.038%207.1094H120.849C123.533%207.1094%20124.847%208.61594%20124.847%2011.5688L124.791%2015.9682ZM105.627%2017.7155V21.271H121.615V17.7155H105.627Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M129.613%2023.9241C129.613%2024.5267%20129.339%2024.828%20128.791%2024.828H127.204C126.656%2024.828%20126.383%2024.5267%20126.383%2023.9241V0.903931C126.383%200.301308%20126.656%200%20127.204%200H128.791C129.339%200%20129.613%200.301308%20129.613%200.903931V23.9241Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M131.091%2015.9682V11.5688C131.091%208.61602%20132.514%207.10971%20135.198%207.10971H149.544C152.227%207.10971%20153.541%208.55602%20153.541%2011.5691V16.8721C153.541%2017.4748%20153.267%2017.7761%20152.72%2017.7761H134.321V21.3316H156.772V3.6145H133.281C133.007%203.6145%20132.734%203.37345%20132.734%203.01187V0.661646C132.734%200.360339%20132.952%200.0590312%20133.281%200.0590312H158.36C159.236%200.0590312%20159.948%200.842438%20159.948%201.80663V23.8626C159.948%2024.4652%20159.674%2024.7063%20159.127%2024.7063H135.087C132.46%2024.7063%20131.091%2023.1997%20131.091%2020.2469V15.9682ZM150.365%2014.2207V10.6652H134.376V14.2207H150.365Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M146.641%2031.9375H144.396C144.122%2031.9375%20143.904%2031.6964%20143.904%2031.3348V28.9846C143.904%2028.6834%20144.122%2028.382%20144.396%2028.382H146.641C146.915%2028.382%20147.134%2028.6834%20147.134%2028.9846V31.3348C147.134%2031.6362%20146.915%2031.9375%20146.641%2031.9375Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M159.505%2031.9375H157.261C156.987%2031.9375%20156.768%2031.6964%20156.768%2031.3348V28.9846C156.768%2028.6834%20156.987%2028.382%20157.261%2028.382H159.505C159.779%2028.382%20159.999%2028.6834%20159.999%2028.9846V31.3348C159.999%2031.6362%20159.779%2031.9375%20159.505%2031.9375Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M153.048%2031.9375H150.802C150.528%2031.9375%20150.31%2031.6964%20150.31%2031.3348V28.9846C150.31%2028.6834%20150.528%2028.382%20150.802%2028.382H153.048C153.321%2028.382%20153.54%2028.6834%20153.54%2028.9846V31.3348C153.54%2031.6362%20153.321%2031.9375%20153.048%2031.9375Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* ── HIDE left welcome panel ── */
.mx_AuthHeader,
.mx_AuthHeaderLogo {
  display: none !important;
}

/* ── Login card — solid dark, green border, 12px radius ── */
.mx_AuthBody {
  background: #111 !important;
  background-color: #111 !important;
  background-image: none !important;
  border: 1px solid rgba(188, 255, 79, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 40px rgba(188, 255, 79, 0.04) !important;
  padding: 40px !important;
  width: 420px !important;
  max-width: 90vw !important;
  color: #bcbcbc !important;
}

/* ── "Sign in" heading ── */
.mx_AuthBody h1 {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}
.mx_AuthBody h2 {
  color: #fff !important;
  font-weight: 600 !important;
}

/* ── HIDE entire Server Picker (Homeserver + bes.spa + Edit + i) ── */
.mx_ServerPicker {
  display: none !important;
}

/* ── HIDE forgot password ── */
.mx_Login_forgot,
.mx_AuthBody_forgot {
  display: none !important;
}

/* ── HIDE language selector ── */
.mx_AuthBody_language {
  display: none !important;
}

/* ── HIDE footer ── */
.mx_AuthFooter {
  display: none !important;
}

/* ── Input fields — dark, subtle border ── */
.mx_AuthBody .mx_Field {
  border: none !important;
  background: none !important;
  border-radius: 10px !important;
}
.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select,
.mx_AuthBody .mx_Field textarea {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  caret-color: #BCFF4F !important;
  transition: border-color 0.2s !important;
}
.mx_AuthBody .mx_Field input:focus,
.mx_AuthBody .mx_Field textarea:focus {
  border-color: rgba(188, 255, 79, 0.4) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(188, 255, 79, 0.06) !important;
}
.mx_AuthBody .mx_Field label {
  color: #545454 !important;
  background: transparent !important;
}
.mx_AuthBody .mx_Field input:focus + label,
.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
.mx_AuthBody .mx_Field_labelAlwaysTopLeft label {
  background-color: #111 !important;
  color: #BCFF4F !important;
}

/* ── Sign in button — BLACK with GREEN BORDER (site style) ── */
.mx_AuthBody .mx_Login_submit,
.mx_Login_submit {
  background: transparent !important;
  color: #BCFF4F !important;
  border: 1px solid rgba(188, 255, 79, 0.3) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  height: auto !important;
  padding: 14px 24px !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  letter-spacing: 0.03em !important;
}
.mx_AuthBody .mx_Login_submit:hover,
.mx_Login_submit:hover {
  background: rgba(188, 255, 79, 0.06) !important;
  border-color: #BCFF4F !important;
  box-shadow: 0 0 20px rgba(188, 255, 79, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* ── Links ── */
.mx_AuthBody a:link,
.mx_AuthBody a:visited,
.mx_AuthBody a:hover {
  color: #BCFF4F !important;
  text-decoration: none !important;
}

/* "New here? Create account" */
.mx_AuthBody_changeFlow {
  color: #545454 !important;
  margin-top: 16px !important;
}
.mx_AuthBody_changeFlow a {
  color: #BCFF4F !important;
}

/* ── Error messages ── */
.mx_Login_error,
.mx_Login_serverError {
  color: #ff4b55 !important;
  background: rgba(255, 75, 85, 0.06) !important;
  border: 1px solid rgba(255, 75, 85, 0.15) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

/* ── Server picker DIALOG (when "Edit" is clicked somehow) ── */
.mx_ServerPickerDialog {
  background: #1a1a1a !important;
  border: 1px solid rgba(188, 255, 79, 0.1) !important;
  border-radius: 12px !important;
}
.mx_ServerPickerDialog .mx_Dialog_content > p {
  color: #bcbcbc !important;
}
.mx_ServerPickerDialog .mx_Dialog_content > h2 {
  color: #fff !important;
}
.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
  background: transparent !important;
  color: #BCFF4F !important;
  border: 1px solid rgba(188, 255, 79, 0.3) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary:hover {
  background: rgba(188, 255, 79, 0.06) !important;
  border-color: #BCFF4F !important;
}
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
  border: none !important;
}
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 12px 16px !important;
}

/* ── Dialog overlay ── */
.mx_Dialog_background {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(12px) !important;
}
.mx_Dialog {
  background: #1a1a1a !important;
  border: 1px solid rgba(188, 255, 79, 0.1) !important;
  border-radius: 12px !important;
  color: #bcbcbc !important;
}
.mx_Dialog h2 {
  color: #fff !important;
}

/* ── All primary buttons — outline style ── */
.mx_AccessibleButton_kind_primary {
  background: transparent !important;
  color: #BCFF4F !important;
  border: 1px solid rgba(188, 255, 79, 0.3) !important;
  border-radius: 10px !important;
}
.mx_AccessibleButton_kind_primary:hover {
  background: rgba(188, 255, 79, 0.06) !important;
  border-color: #BCFF4F !important;
  box-shadow: 0 0 16px rgba(188,255,79,0.12) !important;
}
.mx_AccessibleButton_kind_primary_outline {
  background: transparent !important;
  border: 1px solid #545454 !important;
  color: #bcbcbc !important;
  border-radius: 10px !important;
}
.mx_AccessibleButton_kind_primary_outline:hover {
  border-color: #BCFF4F !important;
  color: #BCFF4F !important;
}
.mx_AccessibleButton_kind_link,
.mx_AccessibleButton_kind_link_inline,
.mx_AccessibleButton_kind_link_accent {
  color: #BCFF4F !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #545454; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Password visibility toggle ── */
.mx_Field_postfix {
  color: #545454 !important;
}
.mx_Field_postfix:hover {
  color: #BCFF4F !important;
}

/* ── Post-login pages ── */
.mx_Welcome h1 { color: #fff !important; }
.mx_SplashPage { background: #000 !important; }

/* ── Radio buttons in server picker ── */
input[type="radio"]:checked {
  accent-color: #BCFF4F !important;
}

/* ── Close button in dialogs ── */
.mx_Dialog_cancelButton {
  color: #bcbcbc !important;
}
.mx_Dialog_cancelButton:hover {
  color: #fff !important;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .mx_AuthBody {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px !important;
    min-height: 100vh !important;
    backdrop-filter: none !important;
  }
  .mx_AuthPage_modal {
    padding-top: 60px !important;
    min-height: auto !important;
    margin: 0 !important;
  }
  .mx_AuthPage_modal::before {
    top: 16px;
    width: 120px;
    height: 24px;
  }
}