/* 手机全宽 + 平板/桌面居中限宽（电脑上看平板样式） */
:root {
  --app-max-width: 480px;
  --app-shell-gap: 12px;
  --app-view-max-height: 920px;
  --app-desktop-bg: #e4e4e1;
}

/* ===== 壳页面（index / decode） ===== */
.view {
  width: 100%;
  max-width: var(--app-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  body.view-input,
  body.view-result {
    padding: 24px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(24px + env(safe-area-inset-left, 0px));
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
    background: var(--app-desktop-bg);
  }

  .view {
    height: min(
      calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      var(--app-view-max-height)
    );
    max-height: min(
      calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      var(--app-view-max-height)
    );
  }
}

/* ===== 排盘页（仅独立打开，embed=1 时不生效） ===== */
html.app-standalone body {
  padding-left: max(var(--app-shell-gap), env(safe-area-inset-left, 0px));
  padding-right: max(var(--app-shell-gap), env(safe-area-inset-right, 0px));
}

html.app-standalone .app-chart-shell {
  width: 100%;
  max-width: var(--app-max-width);
  margin-left: auto;
  margin-right: auto;
}

html.app-standalone #bazi-scale-wrap,
html.app-standalone #ziwei-scale-wrap {
  max-width: var(--app-max-width);
  margin-left: auto;
  margin-right: auto;
}

html.app-standalone #form {
  width: 100%;
  max-width: var(--app-max-width);
  margin-left: auto;
  margin-right: auto;
}

html.app-standalone #paper {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
}

@media (min-width: 768px) {
  html.app-standalone body {
    background: var(--app-desktop-bg);
    padding-top: 24px;
    padding-bottom: 24px;
  }
}