/* DEVNOOD macOS Unified UI v13
 * Fine-tune centering and balanced spacing for settings/app-settings modals.
 */

/* keep modal shell perfectly centered */
body.macos-ui [data-modal]{
  align-items:center!important;
  justify-content:center!important;
}
body.macos-ui [data-modal-content],
body.macos-ui .app-settings-page .app-settings-panel{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* equal left/right lanes in titlebars so content doesn't lean right */
body.macos-ui #settingsModal .macos-titlebar,
body.macos-ui #appSettingsModal .macos-titlebar,
body.macos-ui #onlineModal .macos-titlebar{
  grid-template-columns:60px minmax(0,1fr) 60px!important;
}
body.macos-ui #settingsModal .macos-titlebar > .macos-window-controls,
body.macos-ui #appSettingsModal .macos-titlebar > .macos-window-controls,
body.macos-ui #onlineModal .macos-titlebar > .macos-window-controls{
  position:static!important;
  left:auto!important;
  justify-self:center!important;
  align-self:center!important;
  width:auto!important;
  min-width:0!important;
}
body.macos-ui #settingsModal .macos-titlebar > .macos-close,
body.macos-ui #appSettingsModal .macos-titlebar > .macos-close,
body.macos-ui #onlineModal .macos-titlebar > .macos-close{
  justify-self:center!important;
}

/* center the title groups */
body.macos-ui #settingsModal .macos-title-content{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.macos-ui #settingsModal .macos-title-content h3{
  width:fit-content!important;
  max-width:100%!important;
  margin:0 auto!important;
}

body.macos-ui #appSettingsModal .macos-title-content,
body.macos-ui .app-settings-page .app-settings-head{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.macos-ui #appSettingsModal .app-settings-title,
body.macos-ui .app-settings-page .app-settings-title{
  width:min(100%, 28rem)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.macos-ui #appSettingsModal .app-settings-title h1,
body.macos-ui #appSettingsModal .app-settings-title p,
body.macos-ui .app-settings-page .app-settings-title h1,
body.macos-ui .app-settings-page .app-settings-title p{
  text-align:left!important;
}

/* keep tabs and bodies symmetric */
body.macos-ui #settingsModal .settings-tabs,
body.macos-ui #appSettingsModal .app-settings-tabs,
body.macos-ui .app-settings-page .app-settings-tabs,
body.macos-ui #settingsModal form,
body.macos-ui #appSettingsModal .app-settings-body,
body.macos-ui .app-settings-page .app-settings-body{
  width:100%!important;
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* mobile balance */
@media (max-width: 767px){
  body.macos-ui #settingsModal .macos-titlebar,
  body.macos-ui #appSettingsModal .macos-titlebar,
  body.macos-ui #onlineModal .macos-titlebar{
    grid-template-columns:54px minmax(0,1fr) 54px!important;
  }
  body.macos-ui #appSettingsModal .app-settings-title,
  body.macos-ui .app-settings-page .app-settings-title{
    width:min(100%, 24rem)!important;
  }
}