/* 现代化主题：保留旧功能结构，只重塑视觉层级和触控体验。 */
:root {
  --玄底: #f3efe3;
  --玄墨: #172522;
  --墨栏: #1e211d;
  --墨栏浅: #3b3429;
  --木钮: #6f4630;
  --朱砂: #d4432f;
  --金线: #d9ad5b;
  --纸白: rgba(255, 252, 240, 0.9);
  --雾线: rgba(19, 52, 48, 0.16);
  --阴影: 0 18px 46px rgba(11, 48, 44, 0.18);
}

body.ui-mobile-viewport {
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0.46), rgba(236, 228, 210, 0.26)),
    url("assets/ink-landscape-bg.png") center top / cover fixed,
    #eee6d5;
  color: var(--玄墨);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif !important;
}

#header {
  height: 44px;
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(26, 28, 25, 0.98), rgba(58, 48, 37, 0.96) 48%, rgba(24, 25, 22, 0.98)),
    var(--墨栏) !important;
  border-bottom: 1px solid rgba(217, 173, 91, 0.42) !important;
  box-shadow: 0 12px 28px rgba(35, 34, 27, 0.24);
  backdrop-filter: blur(10px);
}

#header .ui-title {
  height: 44px;
  margin: 0 96px !important;
  color: #fff;
  font-size: 17px !important;
  line-height: 44px !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

#HOMEBOTTON,
#SAVEBUTTON {
  top: 6px !important;
  border: 1px solid rgba(245, 226, 174, 0.42) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #8c4a32, #5c2e24) !important;
  box-shadow: 0 6px 14px rgba(49, 30, 19, 0.28) !important;
}

.ui-body-a,
.ui-content,
#PAGE1CONT {
  background: transparent !important;
  text-shadow: none !important;
}

#page_0,
#page_1,
#page_2 {
  background: transparent !important;
  box-shadow: none !important;
}

#page_0 form .ui-content > li,
#page_0 form .ui-content > li + li,
#page_2 table,
.ui-collapsible-contain {
  border: 1px solid rgba(93, 75, 45, 0.18) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.86), rgba(247, 239, 220, 0.78)),
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.72), transparent 28%) !important;
  box-shadow: 0 18px 46px rgba(55, 47, 32, 0.18);
  backdrop-filter: blur(7px);
}

#page_0 form .ui-content > li {
  padding: 18px !important;
}

.style2,
.style3,
.style4,
.style5 {
  color: #20332f !important;
  font-family: inherit !important;
  text-shadow: none !important;
}

#page_0 form,
#page_0 form td,
#page_0 form span,
#page_0 form label,
#page_0 form div {
  color: #20332f !important;
  text-shadow: none !important;
}

select,
input[type="text"],
textarea {
  min-height: 30px;
  border: 1px solid rgba(10, 61, 57, 0.28) !important;
  border-radius: 5px;
  background: rgba(255, 255, 248, 0.96) !important;
  color: #152725 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--朱砂);
}

.ui-btn,
button,
#bottomNav > div > div {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ui-btn {
  border: 1px solid rgba(245, 226, 174, 0.32) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #7a4b31, #4a3024) !important;
  box-shadow: 0 8px 18px rgba(49, 36, 24, 0.22) !important;
}

.ui-btn-b {
  background: linear-gradient(180deg, #6c6250, #3b3429) !important;
}

.ui-btn:hover,
#bottomNav > div > div:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(58, 39, 24, 0.28) !important;
}

.ui-btn .style3,
.ui-btn .ui-btn-text,
.ui-btn-b .style3,
.ui-btn-b .ui-btn-text {
  color: #fff !important;
}

#page_0 form .ui-btn,
#page_0 form .ui-btn span,
#page_0 form .ui-btn div {
  color: #fff !important;
}

#page_0 font[color] {
  color: #8d3225 !important;
  font-weight: 700;
}

#TABLEINPUT {
  margin-top: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(20, 27, 25, 0.82);
  box-shadow: 0 10px 24px rgba(48, 39, 25, 0.2);
}

#TABLEINPUT img {
  display: block;
  width: 100% !important;
}

#outboard,
#outboard1,
#SAVEPAN,
#SAVEYIXING {
  border-radius: 9px;
  background: rgba(255, 253, 245, 0.92);
  color: var(--玄墨);
  box-shadow: inset 0 0 0 1px var(--雾线);
}

#outboard table,
#outboard1 table {
  background: var(--纸白);
  color: var(--玄墨);
}

#page_1 button {
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #fdfefe, #dfeeea) !important;
  color: #143331 !important;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0, 57, 54, 0.12);
}

#page_1 button:hover {
  background: linear-gradient(180deg, #ffffff, #eef7f4) !important;
}

#outboard {
  margin-top: 2px !important;
  padding: 10px !important;
}

.ui-collapsible-heading {
  margin-top: 10px !important;
}

:is(#PAGE1CONT, #page_2) .ui-collapsible-contain {
  width: 100% !important;
  margin-inline: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

:is(#PAGE1CONT, #page_2) .ui-collapsible-heading {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

:is(#PAGE1CONT, #page_2) .ui-collapsible-heading .ui-btn-inner,
:is(#PAGE1CONT, #page_2) .ui-collapsible-content,
:is(#PAGE1CONT, #page_2) .ui-collapsible-content2 {
  width: 100% !important;
  box-sizing: border-box;
}

.ui-collapsible-content,
.ui-collapsible-content2 {
  border-radius: 0 0 9px 9px;
  background: rgba(255, 255, 255, 0.92) !important;
}

#bottomNav {
  border: 1px solid rgba(223, 194, 128, 0.38) !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(50, 44, 34, 0.94), rgba(24, 25, 22, 0.96)),
    var(--墨栏) !important;
  box-shadow: 0 -14px 34px rgba(36, 31, 22, 0.24) !important;
  backdrop-filter: blur(12px);
}

#bottomNav > div > div {
  border: 1px solid rgba(224, 185, 99, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(97, 69, 42, 0.72), rgba(44, 38, 30, 0.82)),
    rgba(42, 36, 30, 0.9) !important;
}

#bottomNav img {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22));
}

#bottomNav span {
  color: #fff !important;
  text-shadow: none !important;
}

@media (min-width: 1024px) {
  #page_0 form .ui-content > li {
    max-width: 820px !important;
  }

  #page_0 form .ui-content > li:first-child {
    margin-top: 50px !important;
  }

  #bottomNav {
    border-radius: 10px 10px 0 0 !important;
  }
}

@media (max-width: 480px) {
  #header .ui-title {
    margin: 0 74px !important;
    font-size: 15px !important;
  }

  #page_0 form .ui-content > li {
    padding: 12px !important;
  }

  select,
  input[type="text"],
  textarea {
    min-height: 28px;
  }
}