/* 网页版三端适配：只覆盖布局，不改旧奇门起局逻辑。 */
:root {
  --奇门页面宽度: 100%;
  --奇门导航高度: 124px;
  --奇门边距: 10px;
  --奇门边框色: #087a76;
  --奇门纸面: #f7fbf9;
}
html {
  min-width: 0 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.ui-mobile-viewport {
  min-width: 0 !important;
  margin: 0;
  overflow-x: hidden;
  background: #e8f0ee;
  color: #1b2b2a;
}
select,
input,
textarea,
button {
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px !important;
}
#header,
#page_0,
#page_1,
#page_2,
#bottomNav {
  width: min(100%, var(--奇门页面宽度)) !important;
  max-width: var(--奇门页面宽度) !important;
  box-sizing: border-box;
}
#header,
#page_0,
#page_1,
#page_2,
#bottomNav {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
}
#header {
  z-index: 1200;
  border-left: 0 !important;
  border-right: 0 !important;
}
#page_0,
#page_1,
#page_2 {
  padding-top: 48px;
  overflow-x: hidden;
  border-right: 0 !important;
  border-left: 0 !important;
}
.ui-content,
#PAGE1CONT {
  padding-right: var(--奇门边距) !important;
  padding-bottom: calc(var(--奇门导航高度) + 18px) !important;
  padding-left: var(--奇门边距) !important;
}
#page_0 form .ui-content > li > table,
#page_0 form .ui-content > li > table table {
  width: 100% !important;
  table-layout: fixed;
}
#page_0 td,
#page_2 td {
  vertical-align: top;
  word-break: break-word;
}
#page_0 select {
  width: min(100%, 136px) !important;
}
#TABLEINPUT img,
#bottomNav img {
  max-width: 100%;
  height: auto;
}
#outboard,
#outboard1,
#SAVEPAN,
#SAVEYIXING {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#outboard table,
#outboard1 table,
#SAVEPAN table,
#SAVEYIXING table {
  max-width: 100%;
}
#outboard td,
#outboard th,
#outboard1 td,
#outboard1 th {
  word-break: keep-all;
}
#page_1 button {
  min-height: 38px;
  white-space: nowrap;
}
#bottomNav {
  margin: 0 auto !important;
  border-radius: 8px 8px 0 0 !important;
}
#bottomNav > div {
  display: flex;
  gap: 2px;
  padding: 0 4px;
}
#bottomNav > div > div {
  min-width: 0;
  border-radius: 6px !important;
}
#bottomNav img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
}
#bottomNav span {
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.password-box,
#chdPwdOverlay > div,
#xlrPwdOverlay > div,
#daoliPwdOverlay > div,
#bazhaiPwdOverlay > div {
  width: min(92vw, 360px) !important;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  :root {
    --奇门导航高度: 112px;
    --奇门边距: 6px;
  }
  .style3 {
    font-size: 16px !important;
  }
  #page_0,
  #page_1,
  #page_2 {
    padding-top: 42px;
  }
  #page_0 form .ui-content > li {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  /* 旧 APK 首页用表格硬分两列，手机上会挤出竖排单位，这里只重排显示层。 */
  #page_0 form .ui-content > li:first-child > table,
  #page_0 form .ui-content > li:first-child > table > tbody {
    display: block;
    width: 100% !important;
  }

  #page_0 form .ui-content > li:first-child > table > tbody > tr:first-child {
    display: grid;
    width: 100% !important;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  #page_0 form .ui-content > li:first-child > table > tbody > tr:first-child > td {
    display: block;
    width: auto !important;
    text-align: left !important;
  }
  #page_0 form .ui-content > li:first-child > table > tbody > tr:first-child > td + td {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  #page_0 form .ui-content > li:first-child label[style*="position:absolute"] {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    margin-top: 8px;
    margin-left: 8px;
  }
  #page_0 select {
    width: min(100%, 132px) !important;
  }
  #bottomNav {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  #bottomNav img {
    width: 34px !important;
    height: 34px !important;
  }
  #bottomNav span {
    font-size: 11px !important;
  }
  #page_1 button {
    width: 19% !important;
    padding-right: 0;
    padding-left: 0;
    font-size: 12px !important;
  }
}
@media (max-width: 360px) {
  #page_0 form .ui-content > li:first-child > table > tbody > tr:first-child {
    display: block;
  }
  #page_0 form .ui-content > li:first-child > table > tbody > tr:first-child > td + td {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(93, 75, 45, 0.16);
  }
}
@media (min-width: 481px) and (max-width: 1023px) {
  :root {
    --奇门页面宽度: 760px;
    --奇门导航高度: 126px;
    --奇门边距: 14px;
  }
  #page_0 select {
    width: min(100%, 132px) !important;
  }
  #bottomNav img {
    width: 46px !important;
    height: 46px !important;
  }
}
@media (min-width: 1024px) {
  :root {
    --奇门页面宽度: 980px;
    --奇门导航高度: 86px;
    --奇门边距: 18px;
  }
  body.ui-mobile-viewport {
    background: linear-gradient(180deg, #dfeae7 0%, #f5f8f6 45%, #dfeae7 100%);
  }
  #page_0,
  #page_1,
  #page_2 {
    min-height: calc(100vh - 20px);
    background: #009393;
    box-shadow: 0 10px 32px rgba(7, 69, 66, 0.18);
  }
  #bottomNav:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    padding: 6px !important;
  }
  #bottomNav > div {
    display: contents !important;
  }
  #bottomNav img {
    width: 38px !important;
    height: 38px !important;
  }
  #bottomNav span {
    font-size: 12px !important;
  }
  #page_0 form .ui-content > li {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }
}
