html.proset-chat {
  --proset-navy: #1C1C1E;
  --proset-surface: #2C2C2E;
  --proset-border: #3C3C3E;
  --proset-primary: #00b4d8;
  --proset-gold: #f5c542;
  --proset-auth-side: #d8dde3;
}

html.proset-chat,
html.proset-chat body,
html.proset-chat .mx_AuthPage {
  background-color: var(--proset-navy) !important;
  background-image: none !important;
}

html.proset-chat .mx_AuthHeader,
html.proset-chat .mx_AuthHeaderLogo {
  color: #f4fbff;
}

html.proset-chat .mx_AuthHeader {
  background-color: var(--proset-auth-side) !important;
}

html.proset-chat .mx_AuthHeaderLogo,
html.proset-chat .proset-auth-logo-slot {
  display: block !important;
  flex: 0 0 84px !important;
  width: 84px !important;
  height: 84px !important;
  margin: 16px auto 20px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: url("/static/proset-logo.png?v=20260630-auth9") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

html.proset-chat .mx_AuthHeaderLogo img,
html.proset-chat .mx_AuthHeaderLogo svg {
  display: none !important;
}

html.proset-chat .mx_DefaultWelcome_logo,
html.proset-chat .proset-welcome-logo-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 84px !important;
  margin: 0 auto 24px !important;
}

html.proset-chat .mx_DefaultWelcome_logo img,
html.proset-chat .proset-welcome-logo-slot img.proset-logo-image {
  display: block !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
}

html.proset-chat .mx_AuthPage_modal {
  background-color: transparent !important;
  background-image: none !important;
}

html.proset-chat .mx_AuthPage_modalBlur {
  display: none !important;
}

html.proset-chat .mx_AuthBody h1,
html.proset-chat .mx_AuthBody h2,
html.proset-chat .mx_AuthPage_modalContent h1,
html.proset-chat .mx_AuthPage_modalContent h2 {
  font-size: 0 !important;
  line-height: 0 !important;
}

html.proset-chat .mx_AuthBody h1::before,
html.proset-chat .mx_AuthBody h2::before,
html.proset-chat .mx_AuthPage_modalContent h1::before,
html.proset-chat .mx_AuthPage_modalContent h2::before {
  content: "Proset";
  display: block;
  color: #111827;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

html.proset-chat .mx_AuthBody {
  border: 1px solid rgba(244, 251, 255, 0.14);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

html.proset-chat .proset-auth-logo {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: contain;
}

html.proset-chat a {
  color: var(--proset-primary);
}

html.proset-chat a:hover {
  color: var(--proset-gold);
}

html.proset-chat .mx_AuthFooter a,
html.proset-chat .mx_AuthFooter .mx_AccessibleButton,
html.proset-chat .links a {
  color: #ffffff !important;
}

html.proset-chat .mx_AuthFooter a:hover,
html.proset-chat .mx_AuthFooter .mx_AccessibleButton:hover,
html.proset-chat .links a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

html.proset-chat .mx_AuthBody_changeFlow,
html.proset-chat .mx_Register,
html.proset-chat .mx_MobileRegister_body,
html.proset-chat .mx_ServerPicker,
html.proset-chat .mx_ServerPickerDialog,
html.proset-chat .mx_Login_underlinedServerName,
html.proset-chat .mx_LoginForm_phone,
html.proset-chat .mx_CountryDropdown,
html.proset-chat .mx_PhoneNumbers_country,
html.proset-chat a[href*="/register"],
html.proset-chat a[href="#/register"],
html.proset-chat a[href*="mastodon.matrix.org"] {
  display: none !important;
}

html.proset-chat .mx_AuthPage_modal,
html.proset-chat .mx_AuthBody {
  border-radius: 8px;
}

html.proset-chat .mx_AuthBody input:focus,
html.proset-chat .mx_Field input:focus,
html.proset-chat .mx_Field select:focus,
html.proset-chat .mx_Field textarea:focus {
  border-color: var(--proset-primary);
  box-shadow: 0 0 0 1px var(--proset-primary);
}

html.proset-chat .mx_AccessibleButton_kind_primary,
html.proset-chat .mx_AccessibleButton_kind_primary_outline {
  border-radius: 8px;
}

html.proset-chat .mx_AccessibleButton_kind_primary {
  border-color: var(--proset-primary) !important;
  background-color: var(--proset-navy) !important;
  color: #ffffff !important;
}

html.proset-chat .mx_Login_submit,
html.proset-chat button.mx_Login_submit,
html.proset-chat button[type="submit"],
html.proset-chat [data-kind="primary"] {
  border-color: var(--proset-primary) !important;
  background-color: var(--proset-navy) !important;
  color: #ffffff !important;
}

html.proset-chat .mx_AccessibleButton_kind_primary:not(.mx_AccessibleButton_disabled):hover,
html.proset-chat .mx_AccessibleButton_kind_primary:not(.mx_AccessibleButton_disabled):focus,
html.proset-chat .mx_Login_submit:hover,
html.proset-chat .mx_Login_submit:focus,
html.proset-chat button[type="submit"]:hover,
html.proset-chat button[type="submit"]:focus,
html.proset-chat [data-kind="primary"]:hover,
html.proset-chat [data-kind="primary"]:focus {
  border-color: var(--proset-primary) !important;
  background-color: var(--proset-surface) !important;
  color: #ffffff !important;
}

/* Reddit footer link */
.proset-reddit-footer {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(10,22,40,0.85);
  border: 1px solid #1e3355;
  border-radius: 2rem;
  padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  text-decoration: none;
  color: #FF4500;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: system-ui, sans-serif;
  backdrop-filter: blur(6px);
  transition: opacity 0.2s;
}
.proset-reddit-footer:hover { opacity: 0.8; }
.proset-reddit-footer svg { flex-shrink: 0; }