/* 对齐固定碳弹窗：仅统一四个工具弹窗按钮边线，不覆盖hover动效。 */
html body #mainApp#mainApp :is(#coalTypeToolBox, #heatCalcToolBox, #hgiConvertToolBox, #cokeCharToolBox).loader-tool-box .btn {
  border: 1px solid var(--icbb-theme-line-strong) !important;
}

/* Free tools list buttons: sync Heat/HGI border logic to CokeChar baseline. */
html body #mainApp#mainApp :is(#btnShowHeatCalcTool, #btnShowHgiConvertTool, #btnShowCokeCharTool) {
  border: 1px solid var(--icbb-theme-line-strong) !important;
  box-shadow: none !important;
}

html body #mainApp#mainApp :is(#btnShowHeatCalcTool, #btnShowHgiConvertTool, #btnShowCokeCharTool):is(:hover, :focus-visible, :active, .icbb-click-active) {
  border: 1px solid var(--icbb-theme-line-strong) !important;
  box-shadow: none !important;
}

/* Final input clarity lock: keep all text-entry controls crisp and visually consistent. */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select),
html body #authShell#authShell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input),
html body #mainApp#mainApp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input, .dc-input, .modal-input, .tip-form-input, .save-select),
html body #tipBox#tipBox :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select),
html body .tip-box.tip-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select) {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--icbb-theme-line-strong) !important;
  border-radius: 11px !important;
  color: var(--icbb-theme-text) !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  background-clip: padding-box !important;
}

html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select):not(:disabled):not([readonly]):hover,
html body #authShell#authShell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input):not(:disabled):not([readonly]):hover,
html body #mainApp#mainApp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input, .dc-input, .modal-input, .tip-form-input, .save-select):not(:disabled):not([readonly]):hover,
html body #tipBox#tipBox :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select):not(:disabled):not([readonly]):hover,
html body .tip-box.tip-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select):not(:disabled):not([readonly]):hover {
  border-color: var(--icbb-theme-line-strong) !important;
  box-shadow: none !important;
}

html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select):is(:focus, :focus-visible),
html body #authShell#authShell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input):is(:focus, :focus-visible),
html body #mainApp#mainApp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input, .dc-input, .modal-input, .tip-form-input, .save-select):is(:focus, :focus-visible),
html body #tipBox#tipBox :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select):is(:focus, :focus-visible),
html body .tip-box.tip-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select):is(:focus, :focus-visible) {
  border-color: var(--icbb-theme-line-strong) !important;
  box-shadow: none !important;
  outline: 2px solid rgba(185, 220, 255, .34) !important;
  outline-offset: 1px !important;
}

html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select):is(:disabled, [readonly]),
html body #authShell#authShell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input):is(:disabled, [readonly]),
html body #mainApp#mainApp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .auth-input, .dc-input, .modal-input, .tip-form-input, .save-select):is(:disabled, [readonly]),
html body #tipBox#tipBox :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select):is(:disabled, [readonly]),
html body .tip-box.tip-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .modal-input, .tip-form-input, .save-select):is(:disabled, [readonly]) {
  background: #f6fbff !important;
  border-color: var(--icbb-theme-line-strong) !important;
  color: #7f97af !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
}

html body.auth-bg-active #authShell#authShell .auth-screen .auth-input.auth-input,
html body #authShell#authShell .auth-screen .auth-input.auth-input {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--icbb-theme-line-strong) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  background-clip: padding-box !important;
}

html body.auth-bg-active #authShell#authShell .auth-screen .auth-input.auth-input:not(:disabled):not([readonly]):hover,
html body #authShell#authShell .auth-screen .auth-input.auth-input:not(:disabled):not([readonly]):hover {
  border-color: var(--icbb-theme-line-strong) !important;
  box-shadow: none !important;
}

html body.auth-bg-active #authShell#authShell .auth-screen .auth-input.auth-input:is(:focus, :focus-visible),
html body #authShell#authShell .auth-screen .auth-input.auth-input:is(:focus, :focus-visible) {
  border-color: var(--icbb-theme-line-strong) !important;
  box-shadow: none !important;
  outline: 2px solid rgba(185, 220, 255, .34) !important;
  outline-offset: 1px !important;
}

/* Final tool dialog frame clarity lock: sharpen outlines without changing size. */
html body #mainApp#mainApp :is(#coalTypeToolBox, #heatCalcToolBox, #hgiConvertToolBox, #cokeCharToolBox).loader-tool-box :is(.coal-type-form, .coal-convert-form, .loader-section) {
  background: linear-gradient(#ffffff, #edf8ff) !important;
  border-color: #d7eaff !important;
  box-shadow: 0 8px 22px rgba(47, 155, 255, .08) !important;
}

html body #mainApp#mainApp :is(#coalTypeToolBox, #heatCalcToolBox, #hgiConvertToolBox, #cokeCharToolBox).loader-tool-box :is(input, select, button.btn, .btn) {
  border-color: var(--icbb-theme-line-strong) !important;
}

html body #mainApp#mainApp :is(#coalTypeToolBox, #heatCalcToolBox, #hgiConvertToolBox, #cokeCharToolBox).loader-tool-box :is(.coal-type-btn-wrap, .coal-convert-btn-wrap) .btn {
  border-color: var(--icbb-theme-line-strong) !important;
}

/* Auth single-card guard: keep login entry unified (account/scan switch within one card slot). */
html body.auth-bg-active #authShell#authShell {
  width: min(392px, calc(100vw - 32px)) !important;
  max-width: min(392px, calc(100vw - 32px)) !important;
  margin: clamp(74px, 13vh, 150px) clamp(70px, 8vw, 180px) 0 auto !important;
  display: block !important;
}

@media (max-width: 900px) {
  html body.auth-bg-active #authShell#authShell {
    margin: 20px auto 0 auto !important;
  }
}

html body.auth-bg-active #authShell#authShell > #authScreen,
html body.auth-bg-active #authShell#authShell > #authScanPanel {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-top: 50px !important;
  padding-bottom: 18px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

html body #authShell#authShell :is(#authScreen, #authScanPanel) .auth-title {
  margin-bottom: 10px !important;
}

html body #authShell#authShell :is(#authScreen, #authScanPanel) .auth-subtitle {
  margin-top: -8px !important;
  margin-bottom: 10px !important;
}

html body #authShell#authShell :is(#authScreen, #authScanPanel) .auth-tabs {
  margin-bottom: 10px !important;
}

html body #authShell#authShell :is(#authScreen, #authScanPanel) .auth-field {
  margin-bottom: 10px !important;
}

html body #authShell#authShell :is(#authScreen, #authScanPanel) .auth-session-hint {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

html body.auth-bg-active #authShell#authShell > #authScanPanel {
  display: none !important;
}

html body.auth-bg-active #authShell#authShell.auth-entry-scan > #authScanPanel {
  display: block !important;
}

html body.auth-bg-active #authShell#authShell.auth-entry-scan > #authScreen {
  display: none !important;
}

/* Hard fallback: no dual-card even when auth-bg-active class is missing. */
html body #authShell#authShell > #authScanPanel {
  display: none !important;
}

html body #authShell#authShell.auth-entry-scan > #authScanPanel {
  display: block !important;
}

html body #authShell#authShell.auth-entry-scan > #authScreen {
  display: none !important;
}

html body #authShell#authShell:not(.auth-entry-scan) > #authScreen {
  display: block !important;
}

/* Shrink login-related tip dialogs (e.g., forgot-password) for a more compact footprint. */
html body #tipBox#tipBox #tipMsg .auth-modal-title,
html body .tip-box.tip-box #tipMsg .auth-modal-title {
  margin-bottom: 8px !important;
  font-size: 26px !important;
}

html body #tipBox#tipBox #tipMsg .auth-field,
html body .tip-box.tip-box #tipMsg .auth-field {
  margin-bottom: 8px !important;
}

html body #tipBox#tipBox #tipMsg .auth-field-last,
html body .tip-box.tip-box #tipMsg .auth-field-last {
  margin-bottom: 10px !important;
}

html body #tipBox#tipBox #tipMsg .auth-label,
html body .tip-box.tip-box #tipMsg .auth-label {
  margin-bottom: 3px !important;
  font-size: 14px !important;
}

html body #tipBox#tipBox #tipMsg :is(.auth-input, .auth-input-row .auth-input),
html body .tip-box.tip-box #tipMsg :is(.auth-input, .auth-input-row .auth-input) {
  min-height: 36px !important;
  padding: 7px 10px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

html body #tipBox#tipBox #tipMsg .auth-inline-btn,
html body .tip-box.tip-box #tipMsg .auth-inline-btn {
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}

html body #tipBox#tipBox #tipMsg .auth-modal-actions,
html body .tip-box.tip-box #tipMsg .auth-modal-actions {
  gap: 8px !important;
}

html body #tipBox#tipBox #tipMsg .auth-modal-actions .btn,
html body .tip-box.tip-box #tipMsg .auth-modal-actions .btn {
  min-height: 34px !important;
  padding: 7px 14px !important;
  font-size: 14px !important;
}

/* Mobile post-login dialogs: portrait and landscape are locked separately. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html body #tipBox.tip-box,
  html body .tip-box#tipBox {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    width: min(520px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body #membershipGateOverlay {
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: auto !important;
  }

  html body #membershipGateOverlay > div {
    width: min(520px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    margin: auto !important;
    box-sizing: border-box !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html body #tipBox.tip-box,
  html body .tip-box#tipBox {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    width: min(520px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body #membershipGateOverlay {
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
    overflow: auto !important;
  }

  html body #membershipGateOverlay > div {
    width: min(520px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    margin: auto !important;
    box-sizing: border-box !important;
  }
}

/* Transport freight modal: keep visual language aligned with other blue tool dialogs. */
html body #mainApp#mainApp #criCsrToolBox.loader-tool-box {
  width: min(94vw, 980px) !important;
  max-width: 980px !important;
  border-radius: 14px !important;
  padding: 18px 20px 20px !important;
}

html body #mainApp#mainApp #criCsrToolBox .coal-convert-form {
  background: #f8fbff !important;
  border: 1px solid #cfe2f7 !important;
  border-radius: 14px !important;
}

@media (max-width: 700px) {
  html body #mainApp#mainApp #criCsrToolBox.loader-tool-box {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: calc(100vh - 18px) !important;
    padding: 14px 12px 14px !important;
    overflow-x: hidden !important;
  }

  html body #mainApp#mainApp #criCsrToolBox .coal-convert-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body #mainApp#mainApp #criCsrToolBox .coal-convert-form input,
  html body #mainApp#mainApp #criCsrToolBox .coal-convert-form select {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #mainApp#mainApp #criCsrToolBox .coal-convert-btn-wrap {
    gap: 8px !important;
  }

  html body #mainApp#mainApp #criCsrToolBox .coal-convert-btn-wrap .btn {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 42px !important;
  }
}

/* Mobile all-dialog centering lock: button popups, tools, reports, membership and attachment overlays. */
@media (orientation: portrait) and (max-width: 1024px) {
  html body body,
  html body.tip-modal-open {
    width: 100% !important;
  }

  html body #mask.mask.show,
  html body .mask#mask.show {
    position: fixed !important;
    inset: 0 !important;
  }

  html body #tipBox#tipBox.tip-box.show,
  html body .tip-box#tipBox.show,
  html body #mainApp#mainApp #formulaReportBox.loader-tool-box.show,
  html body #mainApp#mainApp .loader-tool-box.show,
  html body #mainApp#mainApp :is(#loaderToolBox, #coalTypeToolBox, #coalConvertToolBox, #heatCalcToolBox, #fixedCarbonToolBox, #moistureDeductToolBox, #hgiConvertToolBox, #cokeCharToolBox, #gCorrectToolBox, #deliveryCostToolBox, #criCsrToolBox, #blendFinenessToolBox, #washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #formulaReportBox).loader-tool-box.show {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    width: min(96vw, 620px) !important;
    max-width: calc(100vw - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))) !important;
    max-height: calc(100dvh - max(28px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body #mainApp#mainApp :is(#washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #deliveryCostToolBox, #loaderToolBox, #formulaReportBox).loader-tool-box.show {
    width: min(96vw, 900px) !important;
  }

  html body #membershipGateOverlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body #membershipGateOverlay > div {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 0 !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  html body #mask.mask.show,
  html body .mask#mask.show {
    position: fixed !important;
    inset: 0 !important;
  }

  html body #tipBox#tipBox.tip-box.show,
  html body .tip-box#tipBox.show,
  html body #mainApp#mainApp #formulaReportBox.loader-tool-box.show,
  html body #mainApp#mainApp .loader-tool-box.show,
  html body #mainApp#mainApp :is(#loaderToolBox, #coalTypeToolBox, #coalConvertToolBox, #heatCalcToolBox, #fixedCarbonToolBox, #moistureDeductToolBox, #hgiConvertToolBox, #cokeCharToolBox, #gCorrectToolBox, #deliveryCostToolBox, #criCsrToolBox, #blendFinenessToolBox, #washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #formulaReportBox).loader-tool-box.show {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    width: min(560px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - max(28px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body #mainApp#mainApp :is(#washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #deliveryCostToolBox, #loaderToolBox, #formulaReportBox).loader-tool-box.show {
    width: min(900px, calc(100vw - 28px)) !important;
  }

  html body #membershipGateOverlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body #membershipGateOverlay > div {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html body #tipBox#tipBox.tip-box.show,
  html body .tip-box#tipBox.show,
  html body #mainApp#mainApp #formulaReportBox.loader-tool-box.show,
  html body #mainApp#mainApp .loader-tool-box.show,
  html body #mainApp#mainApp :is(#loaderToolBox, #coalTypeToolBox, #coalConvertToolBox, #heatCalcToolBox, #fixedCarbonToolBox, #moistureDeductToolBox, #hgiConvertToolBox, #cokeCharToolBox, #gCorrectToolBox, #deliveryCostToolBox, #criCsrToolBox, #blendFinenessToolBox, #washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #formulaReportBox).loader-tool-box.show {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    width: min(96vw, calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 24px), 620px) !important;
    max-width: calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 24px) !important;
    max-height: calc(var(--icbb-mobile-dialog-visible-h, 100dvh) - 28px) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body #mainApp#mainApp :is(#washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #deliveryCostToolBox, #loaderToolBox, #formulaReportBox).loader-tool-box.show {
    width: min(96vw, calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 24px), 900px) !important;
  }

  html body #membershipGateOverlay > div {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 28px)) !important;
    max-width: calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 28px) !important;
    max-height: calc(var(--icbb-mobile-dialog-visible-h, 100dvh) - 28px) !important;
    margin: 0 !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html body #tipBox#tipBox.tip-box.show,
  html body .tip-box#tipBox.show,
  html body #mainApp#mainApp #formulaReportBox.loader-tool-box.show,
  html body #mainApp#mainApp .loader-tool-box.show,
  html body #mainApp#mainApp :is(#loaderToolBox, #coalTypeToolBox, #coalConvertToolBox, #heatCalcToolBox, #fixedCarbonToolBox, #moistureDeductToolBox, #hgiConvertToolBox, #cokeCharToolBox, #gCorrectToolBox, #deliveryCostToolBox, #criCsrToolBox, #blendFinenessToolBox, #washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #formulaReportBox).loader-tool-box.show {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    width: min(560px, calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 28px)) !important;
    max-width: calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 28px) !important;
    max-height: calc(var(--icbb-mobile-dialog-visible-h, 100dvh) - 20px) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body #mainApp#mainApp :is(#washPlantToolBox, #washIndicatorToolBox, #washLiteToolBox, #deliveryCostToolBox, #loaderToolBox, #formulaReportBox).loader-tool-box.show {
    width: min(900px, calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 28px)) !important;
  }

  html body #membershipGateOverlay > div {
    position: fixed !important;
    top: var(--icbb-mobile-dialog-center-y, 50dvh) !important;
    left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 28px)) !important;
    max-width: calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 28px) !important;
    max-height: calc(var(--icbb-mobile-dialog-visible-h, 100dvh) - 20px) !important;
    margin: 0 !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
}

html body #mainApp#mainApp :is(#loaderToolBox#loaderToolBox, #coalTypeToolBox#coalTypeToolBox, #coalConvertToolBox#coalConvertToolBox, #heatCalcToolBox#heatCalcToolBox, #fixedCarbonToolBox#fixedCarbonToolBox, #moistureDeductToolBox#moistureDeductToolBox, #hgiConvertToolBox#hgiConvertToolBox, #cokeCharToolBox#cokeCharToolBox, #gCorrectToolBox#gCorrectToolBox, #deliveryCostToolBox#deliveryCostToolBox, #criCsrToolBox#criCsrToolBox, #blendFinenessToolBox#blendFinenessToolBox, #washPlantToolBox#washPlantToolBox, #washIndicatorToolBox#washIndicatorToolBox, #washLiteToolBox#washLiteToolBox, #formulaReportBox#formulaReportBox).loader-tool-box.show {
  position: fixed !important;
  top: var(--icbb-mobile-dialog-center-y, 50vh) !important;
  left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

html body #tipBox#tipBox.tip-box.show,
html body #membershipGateOverlay #membershipGateOverlayCard,
html body #membershipGateOverlay > div {
  top: var(--icbb-mobile-dialog-center-y, 50vh) !important;
  left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
}

html body #mainApp#mainApp #coalTypeToolBox#coalTypeToolBox.loader-tool-box.show,
html body #mainApp#mainApp #deliveryCostToolBox#deliveryCostToolBox.loader-tool-box.show,
html body #mainApp#mainApp #heatCalcToolBox#heatCalcToolBox.loader-tool-box.show,
html body #mainApp#mainApp #coalConvertToolBox#coalConvertToolBox.loader-tool-box.show,
html body #mainApp#mainApp #fixedCarbonToolBox#fixedCarbonToolBox.loader-tool-box.show,
html body #mainApp#mainApp #moistureDeductToolBox#moistureDeductToolBox.loader-tool-box.show,
html body #mainApp#mainApp #hgiConvertToolBox#hgiConvertToolBox.loader-tool-box.show,
html body #mainApp#mainApp #cokeCharToolBox#cokeCharToolBox.loader-tool-box.show,
html body #mainApp#mainApp #gCorrectToolBox#gCorrectToolBox.loader-tool-box.show,
html body #mainApp#mainApp #criCsrToolBox#criCsrToolBox.loader-tool-box.show,
html body #mainApp#mainApp #blendFinenessToolBox#blendFinenessToolBox.loader-tool-box.show {
  position: fixed !important;
  top: var(--icbb-mobile-dialog-center-y, 50vh) !important;
  left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

html body #fixedCarbonToolBox#fixedCarbonToolBox.loader-tool-box.show,
html body #hgiConvertToolBox#hgiConvertToolBox.loader-tool-box.show,
html body #cokeCharToolBox#cokeCharToolBox.loader-tool-box.show {
  position: fixed !important;
  top: var(--icbb-mobile-dialog-center-y, 50vh) !important;
  left: var(--icbb-mobile-dialog-center-x, 50vw) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  width: min(96vw, calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 24px), 560px) !important;
  max-width: calc(var(--icbb-mobile-dialog-visible-w, 100vw) - 24px) !important;
  max-height: calc(var(--icbb-mobile-dialog-visible-h, 100vh) - 28px) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

/* Header avatar anchor: nudge slightly left on desktop and mobile. */
html body #headerUserMenuWrap.header-user-menu-wrap {
  right: calc(32px + env(safe-area-inset-right, 0px)) !important;
}

@media (max-width: 768px) {
  html body #headerUserMenuWrap.header-user-menu-wrap {
    right: max(22px, env(safe-area-inset-right, 0px)) !important;
  }
}