/* 姓名列格 · 皮肤
   米黄 = 页面硬编码原版，不加任何覆盖
   data-skin=tianqing | zhuni 才覆盖 */

/* 切换器自用变量（米黄页上也要能显示切换条） */
:root, html[data-skin="mihuang"], html:not([data-skin]) {
  --paper: #FFF8E7;
  --paper-tint: #fff8d8;
  --surface: #ffffff;
  --ink: #222222;
  --muted: #555555;
  --muted-2: #888888;
  --line: #dddddd;
  --accent: #4a90e2;
  --link: #6b8799; /* 菜单字：灰蓝，不再用艳蓝 */
  --bar-border: #e5dba0;
  --highlight: #fff8d8;
  --yun-bg: #fff8e0;
  --tab-active: #335577;
  --radius: 6px;
}

/* —— 天青：汝窑烟雨青 —— */
html[data-skin="tianqing"] {
  --paper: #e6eef1;
  --paper-tint: #d5e3e8;
  --surface: #f3f7f9;
  --ink: #1c2c34;
  --muted: #5a6f78;
  --muted-2: #7a8e96;
  --line: #b8ccd3;
  --line-strong: #9bb4bd;
  --accent: #4a7d8c;
  --accent-hover: #3a6673;
  --pine: #3d6d7a;
  --link: #3d6d7a;
  --wx: #07c160;
  --wx-hover: #06ad56;
  --danger: #b33a32;
  --ok: #2d6a4f;
  --warn: #8a5a1f;
  --bar-border: #a8c0c8;
  --highlight: #dce8ec;
  --yun-bg: #dfe9ed;
  --tab-active: #3d6d7a;
  --focus-ring: rgba(74,125,140,.22);
}

/* —— 朱泥：暖灰石面 + 朱砂钮 —— */
html[data-skin="zhuni"] {
  --paper: #f1ebe4;
  --paper-tint: #e6ddd3;
  --surface: #faf7f3;
  --ink: #2a221c;
  --muted: #6a5a4e;
  --muted-2: #8a7a6e;
  --line: #d2c4b6;
  --line-strong: #b9a898;
  --accent: #b8432f;
  --accent-hover: #963625;
  --pine: #6b4a3a;
  --link: #6b4a3a;
  --wx: #07c160;
  --wx-hover: #06ad56;
  --danger: #b33a32;
  --ok: #2d6a4f;
  --warn: #8a5a1f;
  --bar-border: #cbb9a8;
  --highlight: #ebe2d8;
  --yun-bg: #ebe3d9;
  --tab-active: #6b4a3a;
  --focus-ring: rgba(184,67,47,.2);
}

html { color-scheme: light; }

/* 只覆盖非米黄 */
html[data-skin="tianqing"] body,
html[data-skin="zhuni"] body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
html[data-skin="tianqing"] a,
html[data-skin="zhuni"] a { color: var(--pine); }
html[data-skin="tianqing"] a:hover,
html[data-skin="zhuni"] a:hover { color: var(--accent); }
html[data-skin="tianqing"] fieldset,
html[data-skin="zhuni"] fieldset {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-skin="tianqing"] legend,
html[data-skin="zhuni"] legend { color: var(--muted) !important; }
html[data-skin="tianqing"] input[type=text],
html[data-skin="tianqing"] input[type=number],
html[data-skin="tianqing"] input[type=search],
html[data-skin="tianqing"] input[type=password],
html[data-skin="tianqing"] input[type=email],
html[data-skin="tianqing"] select,
html[data-skin="tianqing"] textarea,
html[data-skin="zhuni"] input[type=text],
html[data-skin="zhuni"] input[type=number],
html[data-skin="zhuni"] input[type=search],
html[data-skin="zhuni"] input[type=password],
html[data-skin="zhuni"] input[type=email],
html[data-skin="zhuni"] select,
html[data-skin="zhuni"] textarea {
  border-color: var(--line-strong) !important;
  background: var(--surface);
  color: var(--ink);
}
html[data-skin="tianqing"] input:focus,
html[data-skin="tianqing"] select:focus,
html[data-skin="tianqing"] textarea:focus,
html[data-skin="zhuni"] input:focus,
html[data-skin="zhuni"] select:focus,
html[data-skin="zhuni"] textarea:focus {
  outline: none;
  border-color: var(--pine) !important;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
html[data-skin="tianqing"] button:not(.ghost):not(.mini):not(.wx):not(.wx-quick):not(.danger):not(.logout):not(.btn):not(.back):not(.num-search-hit):not(.tab):not(.parse-ge-btn),
html[data-skin="zhuni"] button:not(.ghost):not(.mini):not(.wx):not(.wx-quick):not(.danger):not(.logout):not(.btn):not(.back):not(.num-search-hit):not(.tab):not(.parse-ge-btn) {
  background: var(--accent) !important;
  color: #fff !important;
}
html[data-skin="tianqing"] button:not(.ghost):not(.mini):not(.wx):not(.wx-quick):not(.danger):not(.logout):not(.btn):not(.back):not(.num-search-hit):not(.tab):not(.parse-ge-btn):hover,
html[data-skin="zhuni"] button:not(.ghost):not(.mini):not(.wx):not(.wx-quick):not(.danger):not(.logout):not(.btn):not(.back):not(.num-search-hit):not(.tab):not(.parse-ge-btn):hover {
  background: var(--accent-hover) !important;
}
html[data-skin="tianqing"] button.ghost,
html[data-skin="tianqing"] button.mini:not([style*="background"]),
html[data-skin="tianqing"] .btn:not(.btn-primary):not(.btn-danger),
html[data-skin="tianqing"] h1 .back,
html[data-skin="tianqing"] .logout,
html[data-skin="zhuni"] button.ghost,
html[data-skin="zhuni"] button.mini:not([style*="background"]),
html[data-skin="zhuni"] .btn:not(.btn-primary):not(.btn-danger),
html[data-skin="zhuni"] h1 .back,
html[data-skin="zhuni"] .logout {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
}
/* 带内联色的 mini（扩展高亮/删除红/模拟蓝等）保留原色，不被皮肤浅底盖掉 */
html[data-skin="tianqing"] button.mini[style*="background"],
html[data-skin="zhuni"] button.mini[style*="background"] {
  border-color: transparent !important;
}
html[data-skin="tianqing"] button.ghost:hover,
html[data-skin="tianqing"] button.mini:not([style*="background"]):hover,
html[data-skin="tianqing"] .logout:hover,
html[data-skin="zhuni"] button.ghost:hover,
html[data-skin="zhuni"] button.mini:not([style*="background"]):hover,
html[data-skin="zhuni"] .logout:hover {
  background: var(--paper-tint) !important;
}
html[data-skin="tianqing"] .btn-primary,
html[data-skin="zhuni"] .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent-hover) !important;
}
html[data-skin="tianqing"] button.wx,
html[data-skin="tianqing"] button.wx-quick,
html[data-skin="zhuni"] button.wx,
html[data-skin="zhuni"] button.wx-quick { background: var(--wx) !important; color: #fff !important; border: none !important; }
html[data-skin="tianqing"] #userBar,
html[data-skin="zhuni"] #userBar {
  background: var(--surface) !important;
  border: 1px solid var(--bar-border) !important;
}
html[data-skin="tianqing"] .tabs,
html[data-skin="zhuni"] .tabs { background: var(--paper-tint) !important; }
html[data-skin="tianqing"] .tab.active,
html[data-skin="zhuni"] .tab.active {
  color: var(--pine) !important;
  border-bottom-color: var(--pine) !important;
  background: var(--surface) !important;
}
html[data-skin="tianqing"] #themeBar,
html[data-skin="zhuni"] #themeBar { background: var(--paper-tint) !important; }
html[data-skin="tianqing"] th,
html[data-skin="zhuni"] th { background: var(--paper-tint) !important; }
html[data-skin="tianqing"] #loginBox,
html[data-skin="zhuni"] #loginBox { background: var(--surface) !important; }
html[data-skin="tianqing"] #output,
html[data-skin="zhuni"] #output { background: var(--surface) !important; border-color: var(--line) !important; }

/* 全家局行块 / 空格 / 存档条 */
.family-row {
  background: var(--yun-bg, #fffbe6) !important;
  border-color: var(--bar-border, #e5dba0) !important;
}
.family-row .row-header { border-bottom-color: var(--bar-border, #e5dba0) !important; }
.family-row .row-header .label { color: var(--link, #6b8799) !important; }
.member-card.member-empty { background: var(--paper, #FFF8E7) !important; }
.member-input {
  background: var(--surface, #fff) !important;
  border-color: var(--line, #ddd) !important;
}
#archiveBar, #archiveHistory {
  background: var(--surface, #fff) !important;
  border-color: var(--bar-border, #e5dba0) !important;
}

/* 菜单链接：米黄灰蓝；天青/朱泥跟皮肤 */
#userBar a,
h1 a[href="/"],
h1 a[href="/index.html"],
a.nav-link { color: var(--link, #6b8799); }
#userBar a:hover,
h1 a[href="/"]:hover,
a.nav-link:hover { color: var(--accent, #4a90e2); }

/* 我的解析：快切条 / 规则名底色 / 六格八运 */
#parseTabNav,
.parse-tab-nav {
  background: var(--yun-bg, #fffbe6) !important;
  border-color: var(--bar-border, #e5dba0) !important;
  /* 有溢出才出滚动条（宽屏全显示时不占位）；溢出时条本身常显，不靠悬停才出现 */
  overflow-x: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #aab #e8e4d4;
}
#parseTabNav::-webkit-scrollbar,
.parse-tab-nav::-webkit-scrollbar {
  height: 7px;
  display: block;
}
#parseTabNav::-webkit-scrollbar-track,
.parse-tab-nav::-webkit-scrollbar-track {
  background: #e8e4d4;
  border-radius: 4px;
}
#parseTabNav::-webkit-scrollbar-thumb,
.parse-tab-nav::-webkit-scrollbar-thumb {
  background: #aab;
  border-radius: 4px;
}
#parseTabNav::-webkit-scrollbar-thumb:hover,
.parse-tab-nav::-webkit-scrollbar-thumb:hover {
  background: #889;
}
#parseTabNav a[data-tab],
.parse-tab-nav a[data-tab] {
  background: var(--surface, #fff);
  border-color: var(--line, #ccc);
  color: var(--ink, #333);
}
#parseTabNav a[data-tab].active,
.parse-tab-nav a[data-tab].active {
  background: var(--tab-active, #335577) !important;
  border-color: var(--tab-active, #335577) !important;
  color: #fff !important;
  font-weight: 700;
}
/* 我的解析：六格筛选条 */
#parseGeNav,
.parse-ge-nav {
  background: var(--yun-bg, #fffbe6) !important;
  border-color: var(--bar-border, #e5dba0) !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #aab #e8e4d4;
}
#parseGeNav::-webkit-scrollbar,
.parse-ge-nav::-webkit-scrollbar { height: 7px; display: block; }
#parseGeNav::-webkit-scrollbar-track,
.parse-ge-nav::-webkit-scrollbar-track { background: #e8e4d4; border-radius: 4px; }
#parseGeNav::-webkit-scrollbar-thumb,
.parse-ge-nav::-webkit-scrollbar-thumb { background: #aab; border-radius: 4px; }
.parse-ge-btn {
  display: inline-block;
  padding: .28rem .65rem;
  border: 1px solid var(--line-strong, var(--line, #ccc)) !important;
  border-radius: 14px;
  font-size: .85rem;
  background: var(--surface, #fff) !important;
  color: var(--ink, #333) !important;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 1.3;
  box-shadow: none;
  font-weight: 500;
}
.parse-ge-btn:hover {
  border-color: var(--tab-active, #335577) !important;
  background: var(--paper-tint, #fff8d8) !important;
  color: var(--ink, #333) !important;
}
/* 选中：实心底 + 白字 + 外圈，米黄/天青/朱泥都能一眼看出 */
.parse-ge-btn.active {
  background: var(--tab-active, #335577) !important;
  border-color: var(--tab-active, #335577) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--focus-ring, rgba(51, 85, 119, .28)), 0 1px 3px rgba(0, 0, 0, .14);
}
.parse-ge-btn .parse-ge-val {
  font-weight: 600;
  opacity: .9;
  margin-left: .15rem;
}
.parse-ge-btn.active .parse-ge-val { opacity: 1; color: #fff !important; }
.parse-ge-btn.parse-ge-cross {
  border-style: dashed !important;
  color: var(--muted, #666) !important;
  background: var(--surface, #fff) !important;
}
.parse-ge-btn.parse-ge-cross.active {
  background: var(--ok, #2d6a4f) !important;
  border-color: var(--ok, #2d6a4f) !important;
  border-style: solid !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--focus-ring, rgba(45, 106, 79, .28));
}
/* 米黄未设 data-skin 时也给焦点环变量，选中更醒目 */
:root, html[data-skin="mihuang"], html:not([data-skin]) {
  --focus-ring: rgba(51, 85, 119, .28);
}
html[data-skin="tianqing"] .parse-ge-btn.active {
  background: var(--pine, #3d6d7a) !important;
  border-color: var(--pine, #3d6d7a) !important;
}
html[data-skin="zhuni"] .parse-ge-btn.active {
  background: var(--accent, #b8432f) !important;
  border-color: var(--accent, #b8432f) !important;
}
.parse-hl,
b.parse-hl {
  background: var(--highlight, #fff8d8) !important;
  color: #000;
  font-weight: 700;
  padding: 0 .2rem;
  border-radius: 2px;
}
#yunContainer > div,
.yun-box {
  background: var(--yun-bg, #fff8e0) !important;
  border-color: var(--bar-border, #e5dba0) !important;
}
html[data-skin="tianqing"] #parseContainer > div[id^="module-"],
html[data-skin="zhuni"] #parseContainer > div[id^="module-"] {
  border-color: var(--bar-border) !important;
}
html[data-skin="tianqing"] #parseContainer > div[id^="module-"][style*="background:#fff"],
html[data-skin="zhuni"] #parseContainer > div[id^="module-"] {
  background: var(--surface) !important;
}

/* 切换器：挂在 h1 同行最右，无「配色」字 */
h1.has-skin-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  flex-wrap: wrap;
}
h1.has-skin-switch > a:first-child {
  flex: 0 1 auto;
  min-width: 0;
}
#skinSwitch {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
}
#skinSwitch .skin-btns {
  display: inline-flex;
  gap: .15rem;
  background: var(--paper-tint, #fff8d8);
  border: 1px solid var(--line, #ddd);
  border-radius: 999px;
  padding: .12rem;
}
#skinSwitch .skin-btn {
  appearance: none;
  border: none !important;
  background: transparent !important;
  color: var(--muted, #555) !important;
  font-size: .78rem;
  padding: .22rem .55rem !important;
  border-radius: 999px;
  cursor: pointer;
  margin: 0 !important;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}
#skinSwitch .skin-btn:hover {
  color: var(--ink, #222) !important;
  background: var(--surface, #fff) !important;
}
#skinSwitch .skin-btn.active {
  background: var(--accent, #4a90e2) !important;
  color: #fff !important;
}
@media (max-width: 520px) {
  h1.has-skin-switch { gap: .35rem .5rem; }
  #skinSwitch .skin-btn { padding: .18rem .4rem !important; font-size: .7rem; }
}
@media (max-width: 380px) {
  #skinSwitch .skin-btn { padding: .16rem .32rem !important; font-size: .66rem; }
}