/* DARK OKEY TEST | Menu UX system, 2026-10-24.
   Only menus, dialogs, cards and controls. Game tables & gameplay untouched. */
html body dialog.darkCentralMenu.darkMenuRefined{
  box-sizing:border-box!important;position:fixed!important;
  width:min(445px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 28px)!important;
  min-width:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  padding:0!important;margin:auto!important;
  border-radius:15px!important;border:1px solid #b6c8bc!important;
  color:#213b30!important;background:#f3f7f2!important;
  box-shadow:0 22px 70px #071b18b0!important;
  color-scheme:light;
  scrollbar-width:thin!important;overscroll-behavior:contain!important;
}
html body dialog.darkCentralMenu.darkMenuRefined::backdrop{background:#071b1cbd!important;backdrop-filter:blur(3px)!important}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuHead{
  box-sizing:border-box!important;position:sticky!important;top:0!important;z-index:5!important;
  min-height:58px!important;display:flex!important;align-items:center!important;
  gap:10px!important;padding:9px 13px!important;margin:0!important;
  background:#234539!important;border-bottom:1px solid #497460!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuHead h2{
  flex:1 1 auto!important;min-width:0!important;
  color:#fffef5!important;text-shadow:none!important;
  font-size:19px!important;line-height:1.2!important;letter-spacing:normal!important;
  font-weight:850!important;margin:0!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuHead button{
  flex:0 0 36px!important;min-width:36px!important;width:36px!important;height:36px!important;
  max-height:36px!important;min-height:36px!important;
  display:grid!important;place-items:center!important;
  font:800 23px/1 system-ui!important;
  padding:0!important;margin:0!important;
  border-radius:9px!important;border:1px solid #688c79!important;
  background:#365c4c!important;color:#fff!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuHead button[hidden]{display:none!important}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuContent{
  box-sizing:border-box!important;
  padding:12px 14px 16px!important;
  background:#f3f7f2!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  overflow-x:hidden!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuGroup{
  box-sizing:border-box!important;background:transparent!important;box-shadow:none!important;
  padding:0!important;margin:0 0 13px!important;border:0!important;
  display:flex!important;flex-direction:column!important;gap:5px!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuGroup h3{
  padding:0 5px 5px!important;margin:4px 0 2px!important;
  font:850 10px/1.25 system-ui!important;
  color:#547263!important;text-transform:uppercase!important;
  letter-spacing:.11em!important;text-shadow:none!important;
  border-bottom:1px solid #d4e0d6!important;
}
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem{
  box-sizing:border-box!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  display:grid!important;
  grid-template-columns:29px minmax(0,1fr) 16px!important;
  align-items:center!important;justify-content:stretch!important;
  gap:9px!important;min-height:43px!important;height:auto!important;
  padding:8px 10px!important;margin:0!important;
  border-radius:9px!important;border:1px solid #ccdbce!important;
  background:#fff!important;color:#294436!important;
  box-shadow:0 1px 2px #1439220c!important;
  text-align:left!important;
  white-space:normal!important;
  font:700 13px/1.3 system-ui!important;
}
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem:hover{
  background:#e8f3e9!important;border-color:#91b69d!important;
}
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem:active{
  background:#dbeade!important;
}
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem:focus-visible,
html body dialog.darkSecurityHub :is(button,input,select):focus-visible{
  outline:3px solid #429470!important;outline-offset:2px!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuIcon{
  display:grid!important;place-items:center!important;
  width:29px!important;min-width:29px!important;height:28px!important;
  padding:0!important;margin:0!important;
  flex:none!important;border:1px solid #dbe8dc!important;
  border-radius:7px!important;background:#ecf5ed!important;
  color:#2b6249!important;font-size:17px!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuLabel{
  display:block!important;min-width:0!important;width:auto!important;
  color:#253f32!important;opacity:1!important;text-shadow:none!important;
  line-height:1.3!important;font-size:13px!important;font-weight:750!important;
  letter-spacing:normal!important;overflow-wrap:normal!important;
  word-break:normal!important;white-space:normal!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuArrow{
  width:16px!important;text-align:center!important;min-width:0!important;
  color:#577565!important;font-size:17px!important;opacity:1!important;
}
html body dialog.darkCentralMenu.darkMenuRefined :is(.darkBotGameConfig, .darkBotGameConfig *){
  min-width:0!important;max-width:100%!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkBotGameConfig button.darkMenuItem{
  font-size:11px!important;gap:4px!important;
  grid-template-columns:20px minmax(0,1fr) 13px!important;padding:8px 6px!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkBotGameConfig .darkMenuIcon{
  min-width:20px!important;width:20px!important;font-size:12px!important;
}
html body dialog.darkCentralMenu.darkMenuRefined :is(input[type=text],select,textarea){
  border:1px solid #acc4b6!important;border-radius:8px!important;
  background:#fff!important;color:#213c2f!important;
  font-size:13px!important;line-height:1.3!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuGroup>p{
  color:#416456!important;font:500 12px/1.45 system-ui!important;
  margin:4px 0 10px!important;opacity:1!important;
}
/* One coherent, compact Membership and Login dashboard */
html body dialog.darkSecurityDialog.darkSecurityHub{
  box-sizing:border-box!important;
  width:min(730px,calc(100vw - 26px))!important;
  max-width:calc(100vw - 26px)!important;max-height:calc(100dvh - 26px)!important;
  padding:22px!important;
  border:1px solid #b9d0bd!important;border-radius:16px!important;
  background:#f4f8f4!important;color:#263f31!important;
  box-shadow:0 22px 80px #0008!important;
  color-scheme:light!important;
  overflow-x:hidden!important;overflow-y:auto!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub::backdrop{background:#071d19c2!important}
html body dialog.darkSecurityDialog.darkSecurityHub h2{
  padding:0!important;margin:0 46px 6px 0!important;
  color:#214737!important;font-size:24px!important;line-height:1.25!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .darkSecurityClose{
  position:absolute!important;top:14px!important;right:14px!important;
  width:36px!important;height:36px!important;
  min-height:36px!important;min-width:36px!important;
  padding:0!important;margin:0!important;
  font:800 23px/1 system-ui!important;
  color:#315b42!important;background:#e5eee6!important;
  border:1px solid #b6cdb8!important;border-radius:9px!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubExplainer{
  display:block!important;color:#536b5d!important;
  margin:0 0 13px!important;padding:0!important;
  font:500 13px/1.45 system-ui!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityIntro{
  margin:0 0 10px!important;color:#246c48!important;font-size:12px!important;
  min-height:0!important;line-height:1.4!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubCard{
  box-sizing:border-box!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;gap:4px 13px!important;
  width:100%!important;min-width:0!important;
  min-height:64px!important;height:auto!important;max-height:none!important;
  padding:11px 13px!important;margin:0!important;
  background:#fff!important;color:#294b39!important;
  border:1px solid #c8d9cc!important;border-radius:10px!important;
  box-shadow:none!important;text-align:left!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubCard :is(strong,.securityControlWords strong){
  color:#214b37!important;font-size:14px!important;
  font-weight:800!important;line-height:1.3!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubCard :is(span,.securityControlWords span){
  color:#526b5d!important;opacity:1!important;
  font-size:12px!important;line-height:1.4!important;
  overflow-wrap:break-word!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityControlWords{
  grid-column:1!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;min-width:0!important;gap:4px!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubSwitchControl{
  grid-column:2!important;margin:0!important;min-width:53px!important;
  padding:0!important;align-self:center!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubCard select{
  grid-column:2!important;max-width:170px!important;min-width:115px!important;
  width:auto!important;min-height:39px!important;
  margin:0!important;padding:8px!important;
  background:#f2f7f2!important;color:#274432!important;
  border:1px solid #a9c1ae!important;border-radius:8px!important;
  font-size:12px!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub button.securityHubCard{
  cursor:pointer!important;grid-template-columns:minmax(0,1fr) 18px!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub button.securityHubCard>strong,
html body dialog.darkSecurityDialog.darkSecurityHub button.securityHubCard>span{
  grid-column:1!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub button.securityHubCard i{
  grid-column:2!important;grid-row:1 / 3!important;
  position:static!important;inset:auto!important;
  color:#3e7351!important;font-size:22px!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub button.securityHubCard:hover{
  background:#e7f4e8!important;border-color:#7db796!important;
}
/* Site settings forms: replace giant toggles by comfortable, readable rows */
html body #darkSiteDialog.darkFocusedSettings:not(.darkAuthorityDialog):not(.darkColorStudioDialog){
  width:min(780px,calc(100vw - 24px))!important;
  padding:19px 20px 8px!important;
  background:#f5f8f4!important;color:#233f32!important;
}
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSettingsPanel{
  background:#fff!important;border:1px solid #ceded1!important;
  padding:12px!important;
}
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteFields{
  gap:8px!important;
}
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteFields .toggle{
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;min-height:48px!important;
  padding:9px 12px!important;border:1px solid #d0ded2!important;
  border-radius:9px!important;background:#fbfdfa!important;color:#244633!important;
}
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteFields label{
  color:#304d3e!important;font-size:13px!important;
}
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteFields input:not([type=checkbox]),
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteFields select,
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteFields textarea{
  min-height:40px!important;padding:9px 11px!important;
  background:#fff!important;color:#253c2e!important;border:1px solid #c5d7c8!important;
  border-radius:8px!important;
  box-sizing:border-box!important;max-width:100%!important;
}
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteActions{
  background:#f5f8f4!important;color:#304c3b!important;
  padding:10px 0 8px!important;
}
html body #darkSiteDialog.darkFocusedSettings:not(.darkColorStudioDialog) .darkSiteActions button{
  min-height:39px!important;padding:8px 15px!important;
  border-radius:9px!important;
}
/* Keep registration approval entries compact and easy to scan */
html body dialog.darkRegistrationDialog{
  width:min(730px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  padding:18px!important;overflow-y:auto!important;overflow-x:hidden!important;
  border-radius:15px!important;
}
html body dialog.darkRegistrationDialog article{
  min-height:0!important;padding:12px!important;margin:8px 0!important;
  border-radius:10px!important;
}
html body dialog.darkRegistrationDialog article p{
  margin:5px 0!important;line-height:1.5!important;
  font-size:12px!important;overflow-wrap:anywhere!important;
}
html body dialog.darkRegistrationDialog article button{
  min-height:37px!important;padding:8px 13px!important;
  border-radius:8px!important;margin:5px 5px 0 0!important;
}
/* Generic personal settings: reduce exaggerated tiles without altering structure */
html body dialog.userSettingsBackdrop .userSettingsModal .membershipPlanCard,
html body dialog.userSettingsBackdrop .userSettingsModal .darkDashboardQuick>div{
  min-height:0!important;padding:11px!important;border-radius:10px!important;
}
html body dialog.userSettingsBackdrop .userSettingsModal .userSettingsNav>button{
  min-height:42px!important;padding:8px 9px!important;
  border-radius:9px!important;
}
@media(max-width:650px){
 html body dialog.darkCentralMenu.darkMenuRefined{
  width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;
  max-height:calc(100dvh - 16px)!important;
 }
 html body dialog.darkCentralMenu.darkMenuRefined .darkMenuContent{
  padding:10px!important;
 }
 html body dialog.darkSecurityDialog.darkSecurityHub{
  padding:16px 12px!important;
 }
 html body dialog.darkSecurityDialog.darkSecurityHub .securityHubCard{
  padding:11px!important;gap:7px!important;min-height:62px!important;
 }
 html body dialog.darkSecurityDialog.darkSecurityHub .securityHubCard select{
  min-width:102px!important;max-width:116px!important;
 }
 html body #darkSiteDialog.darkFocusedSettings:not(.darkAuthorityDialog):not(.darkColorStudioDialog){
  width:calc(100vw - 12px)!important;padding:13px!important;
 }
}

/* One source of truth for registration toggles: Membership & Login hub.
   Legacy inputs stay in form for revision-based persistence but are not rendered. */
html body #darkSiteDialog.darkSiteDialog [data-site-setting-key="registrationOpen"],
html body #darkSiteDialog.darkSiteDialog [data-site-setting-key="registrationApprovalRequired"],
html body #darkSiteDialog.darkSiteDialog [data-site-setting-key="robotVerificationMode"]{
 display:none!important;
}

/* Prevent the old dashboard flex sizing from stretching every registration toggle
   into giant equal-height cards. These are intrinsically sized form rows. */
html body dialog.darkSecurityDialog.darkSecurityHub{
 display:block!important;height:auto!important;min-height:0!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid{
 display:flex!important;
 flex-direction:column!important;
 flex:0 0 auto!important;
 align-items:stretch!important;
 align-content:flex-start!important;
 width:100%!important;height:auto!important;
 min-height:0!important;max-height:none!important;
 grid-auto-rows:auto!important;
 gap:9px!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid>.securityHubCard{
 flex:0 0 auto!important;
 align-self:stretch!important;
 height:auto!important;min-height:62px!important;
 max-height:none!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid>.securityControlRow{
 display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-rows:auto!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid>.securityControlRow>.securityControlWords{
 display:flex!important;flex-direction:column!important;
 grid-column:1!important;grid-row:1!important;
 width:auto!important;height:auto!important;
}
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid>.securityControlRow>:is(label.securityHubSwitchControl,select){
 grid-column:2!important;grid-row:1!important;align-self:center!important;
}

html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid>.securityControlRow .securityControlWords>strong,
html body dialog.darkSecurityDialog.darkSecurityHub .securityHubGrid>.securityControlRow .securityControlWords>span{
 flex:0 0 auto!important;flex-basis:auto!important;
 width:100%!important;min-width:0!important;height:auto!important;
 min-height:0!important;max-height:none!important;
 display:block!important;align-self:stretch!important;
 white-space:normal!important;overflow-wrap:normal!important;
 line-height:1.4!important;
}

/* The old focused settings rule was constraining Color Studio to 650px.
   Color Studio owns a wide workspace instead of inheriting the small form width. */
html body #darkSiteDialog.darkSiteDialog.darkFocusedSettings.darkColorStudioDialog:not(.darkAuthorityDialog){
 box-sizing:border-box!important;
 display:block!important;
 width:min(1360px,calc(100vw - 18px))!important;
 max-width:calc(100vw - 18px)!important;
 min-width:0!important;
 max-height:calc(100dvh - 18px)!important;
 height:auto!important;
 overflow-y:auto!important;
 overflow-x:hidden!important;
 padding:15px 18px 0!important;
}
html body #darkSiteDialog.darkFocusedSettings.darkColorStudioDialog .darkSettingsLayout,
html body #darkSiteDialog.darkFocusedSettings.darkColorStudioDialog .darkSettingsPanelWrap,
html body #darkSiteDialog.darkFocusedSettings.darkColorStudioDialog .darkSettingsPanel{
 width:100%!important;
 min-width:0!important;
 max-width:100%!important;
 height:auto!important;
 display:block!important;
 overflow:visible!important;
 padding:0!important;
 margin:0!important;
}
html body #darkSiteDialog.darkFocusedSettings.darkColorStudioDialog .darkColorStudioLayout{
 width:100%!important;
 min-width:0!important;
 max-width:100%!important;
}
@media(max-width:650px){
 html body #darkSiteDialog.darkSiteDialog.darkFocusedSettings.darkColorStudioDialog:not(.darkAuthorityDialog){
  width:calc(100vw - 8px)!important;
  max-width:calc(100vw - 8px)!important;
  max-height:calc(100dvh - 8px)!important;
  padding:12px 10px 0!important;
 }
}

/* A founder's chosen menu palette is applied through variables, while actual
   menu item text automatically meets readable foreground/background contrast. */
html body dialog.darkCentralMenu.darkMenuRefined,
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuContent{
 background:var(--dark-ui-menu-bg,#f3f7f2)!important;
}
html body dialog.darkCentralMenu.darkMenuRefined .darkMenuGroup h3{
 color:var(--dark-ui-menu-group-fg,#547263)!important;
 border-bottom-color:color-mix(in srgb,var(--dark-ui-menu-group-fg,#547263) 25%,transparent)!important;
}
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem{
 background:var(--dark-ui-menu-card-bg,#ffffff)!important;
 color:var(--dark-ui-menu-item-fg,#253f32)!important;
}
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem .darkMenuLabel,
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem .darkMenuArrow{
 color:var(--dark-ui-menu-item-fg,#253f32)!important;
}
html body dialog.darkCentralMenu.darkMenuRefined button.darkMenuItem:hover{
 background:var(--dark-ui-menu-hover-bg,#e8f3e9)!important;
}