@import url("/brand/palette.css?v=20261002-palette-1");

:root {
  color-scheme: light;
  --page-bg: var(--wx-bg);
  --panel-bg: var(--wx-panel);
  --panel-border: var(--wx-line);
  --text: var(--wx-text);
  --muted: var(--wx-muted);
  --link: var(--wx-link);
  --line: var(--wx-line);
  --brand: var(--wx-primary);
  --brand-hover: var(--wx-hover);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 52px;
}

body {
  background-color: var(--page-bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

body,
body * {
  box-sizing: content-box;
}

.top-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.theme-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: 12px/26px "Microsoft YaHei", sans-serif;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.theme-toggle b {
  font-size: inherit;
}

.webbox_list,
.comment,
.words {
  background-color: var(--panel-bg);
  border-color: var(--panel-border);
}

.webbox_list li a,
.words .words_box .words_list a,
.comment a {
  color: var(--link);
}

.logo-web-title {
  color: var(--muted);
}

.words .words_box,
.words .words_box .words_list a {
  border-color: var(--line);
}

.top,
.navbar li,
.webbox_title div,
#nav-plane ul,
#shortcut-box a,
#footer {
  background-color: var(--brand);
}

.hoverBg:hover,
.word-ad li:hover,
.webbox_list li:hover {
  background-color: var(--brand-hover);
}

html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] .comment,
html[data-theme="dark"] .webbox_list,
html[data-theme="dark"] .words,
html[data-theme="dark"] .ck-slide,
html[data-theme="dark"] .ck-slide-wrapper li {
  color: var(--text);
}

html[data-theme="dark"] .words .words_box .words_list a span {
  color: #cbd5e1;
}

/* Legacy advertisement colors remain readable; explicit admin colors still win. */
html[data-theme="dark"] .words .hei { color: var(--wx-text); }
html[data-theme="dark"] .words .hong { color: #ff9ea5; }
html[data-theme="dark"] .words .lan { color: #9fbcff; }
html[data-theme="dark"] .words .lv { color: #79dbad; }
html[data-theme="dark"] .words .fen { color: #ffb3ed; }
html[data-theme="dark"] .words .zi { color: #d6b3ff; }
html[data-theme="dark"] .words .huang { color: #ffe080; }
html[data-theme="dark"] .words .hui { color: var(--wx-muted); }

html[data-theme="dark"] .comment font[color="#008000"] { color: #5fda7c !important; }
html[data-theme="dark"] .comment font[color="#FF0000"] { color: #ff6b6b !important; }
html[data-theme="dark"] .comment font[color="#0000FF"] { color: #77a7ff !important; }
html[data-theme="dark"] .comment font[color="#800080"] { color: #d98cdd !important; }
html[data-theme="dark"] .comment font[color="#FF00FF"] { color: #ff76df !important; }
html[data-theme="dark"] .comment font[color="#FFA500"] { color: #ffc15a !important; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; }
}

@media (max-width: 1099px) {
  body,
  body * {
    box-sizing: border-box;
  }

  body {
    font-size: 13px;
    min-width: 0;
    overflow-x: hidden;
  }

  .wrap {
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
    width: calc(100% - 24px);
  }

  .top {
    height: 52px;
    line-height: 52px;
  }

  .top > .wrap {
    align-items: center;
    display: flex;
    height: 52px;
    justify-content: space-between;
  }

  .top .left,
  .top .right {
    float: none;
  }

  .top .left {
    align-items: center;
    display: flex;
    min-width: 0;
  }

  .logo {
    flex: 0 0 56px;
    height: 48px;
    margin-right: 6px;
    width: 56px;
  }

  .pc_introduce {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .navbar {
    height: auto;
    margin-top: 60px;
  }

  .navbar ul {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .navbar li,
  .navbar li a {
    float: none;
    margin: 0;
    width: auto;
  }

  .navbar .navinfo {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin: 0;
    padding: 5px 8px;
  }

  .navbar .navinfo div {
    float: none;
    line-height: 28px;
    text-indent: 0;
  }

  .navbar .navinfo div a {
    display: inline;
    font-size: 15px;
    line-height: inherit;
  }

  .hotbox {
    display: grid;
    gap: 8px 4px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 0 12px;
    width: auto;
  }

  .logo-web-list {
    float: none;
    height: 86px;
    margin: 0;
    min-width: 0;
    width: auto;
  }

  .logo-web-list a {
    height: 86px;
    width: 100%;
  }

  .logo-web-img {
    margin: 0 auto;
  }

  .logo-web-title {
    width: 100%;
  }

  .word-ad {
    display: grid;
    float: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    width: 100%;
  }

  .word-ad li,
  .word-ad li a {
    margin: 0;
    width: auto;
  }

  .word-ad li {
    border: 1px solid var(--page-bg);
    height: 40px;
  }

  .word-ad li a {
    line-height: 38px;
  }

  .ck-slide {
    clear: both;
    margin-top: 10px;
    width: 100%;
  }

  .webbox_list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 12px 8px;
    width: 100%;
  }

  .webbox_list li,
  .webbox_list li a {
    float: none;
    width: auto;
  }

  .webbox_list li {
    min-width: 0;
  }

  .webbox_list li a {
    overflow: hidden;
    padding-right: 4px;
    text-indent: 27px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .words {
    width: calc(100% - 24px);
  }

  .words .words_box,
  .words .words_box .words_list {
    width: 100%;
  }

  .words .words_box .words_list a {
    width: 50%;
  }

  .comment {
    line-height: 1.65;
    overflow-wrap: anywhere;
    padding: 14px;
  }

  .footmain {
    align-items: center;
    display: flex;
    height: auto;
    justify-content: space-between;
    padding: 18px 0;
  }

  .footlogo {
    float: none;
  }

  .copyright {
    float: none;
    height: auto;
    line-height: 24px;
    text-indent: 0;
  }
}

@media (max-width: 620px) {
  .pc_introduce {
    max-width: 122px;
  }

  .theme-toggle {
    padding: 0 9px;
  }

  .hotbox {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .webbox_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    font-size: 12px;
  }

  .words .words_box .words_list a {
    width: 100%;
  }

  .page-contact .comment br {
    line-height: 0.8;
  }

  .footlogo {
    width: 150px;
  }

  .footlogo img {
    max-width: 145px;
  }
}

@media (max-width: 360px) {
  .pc_introduce {
    display: none;
  }

  .hotbox {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .webbox_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Brand colors shared by desktop and mobile. */
.word-ad li, .logo-web-img { background:var(--wx-primary); }
.webbox_title p { border-left-color:var(--wx-primary); }
.webbox_title .apply { color:var(--wx-link); }
.navbar .navinfo, .navbar .navinfo div { color:var(--wx-muted); }
.member-entry { color:var(--wx-text)!important; }
.member-entry a { color:var(--wx-link)!important; }
.member-entry span { color:var(--wx-muted)!important; }
.page-home [data-managed-category] { background:var(--wx-bg)!important; }
#nav-plane ul li a:hover, #nav-plane ul li.active a { background:var(--wx-hover); }
html[data-theme="dark"] .words .words_box .words_list a:hover { background:var(--wx-soft); }

.logo-web-list a:hover .logo-web-title { color:var(--wx-link); }

/* Shared explicit controls keep mouse, keyboard and touch interactions available. */
[hidden] { display: none !important; }
[data-managed-category] { scroll-margin-top: 65px; }
.top-actions > a { display: inline-block; }
.floor-nav-toggle,
.site-scroll-top {
  position: fixed;
  z-index: 2001;
  right: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--wx-control);
  border-radius: 8px;
  background: var(--wx-primary);
  color: #fff;
  font: 14px/1.4 "Microsoft YaHei", sans-serif;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 8px #0003;
}
.floor-nav-toggle { display: none; bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); }
#scrollUp.site-scroll-top { bottom: max(18px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); font-size: 24px; }
.floor-nav-toggle:focus-visible,
.site-scroll-top:focus-visible,
.site-link-info-trigger:focus-visible,
.site-link-description button:focus-visible { outline: 3px solid var(--wx-focus); outline-offset: 2px; }
.site-link-info-trigger {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--wx-control);
  border-radius: 50%;
  background: var(--wx-panel);
  color: var(--wx-link);
  font: bold 16px/22px Georgia, serif;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.site-link-description {
  position: fixed;
  z-index: 2002;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--wx-line);
  border-radius: 10px;
  background: var(--wx-panel);
  color: var(--wx-text);
  box-shadow: 0 8px 40px #0006;
}
.site-link-description h2 { margin: 0 0 10px; font-size: 18px; }
.site-link-description p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.site-link-description button { min-height: 36px; padding: 0 14px; border: 1px solid var(--wx-control); border-radius: 6px; background: var(--wx-primary); color: #fff; cursor: pointer; }
/* Keep the entire client artwork inside a stable slot on every screen. */
.ck-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  height: auto;
  overflow: visible;
  background: var(--panel-bg);
}
.ck-slide ul.ck-slide-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 199;
}
.ck-slide-wrapper > li,
html body .ck-slide-wrapper > li.a4-front-admin-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--panel-bg);
}
html body .ck-slide-wrapper > li.a4-front-admin-item { display: block; }
html body .ck-slide .ck-slide-wrapper > li > a[data-managed-link-id],
html body .ck-slide .ck-slide-wrapper > li > span[data-managed-link-id],
html body .ck-slide .ck-slide-wrapper .a4-front-admin-wrap.is-banner,
html body .ck-slide .ck-slide-wrapper .a4-front-admin-wrap.is-banner > a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.ck-slide-wrapper li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Admin tools must not become an extra line above the image. */
html body .ck-slide-wrapper li.a4-front-admin-item > button.a4-front-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  margin: 0;
}
/* The 50px icon plus its 4px frame uses the same box model on phones and desktops. */
.logo-web-img { box-sizing: content-box; width: 50px; height: 50px; }
.logo-web-img img { display: block; width: 50px; height: 50px; border-radius: 0; object-fit: contain; object-position: center; }
html body li.logo-web-list.a4-front-admin-item { display: block; }
html body li.logo-web-list.a4-front-admin-item > button.a4-front-delete { position: absolute; top: 0; left: 0; right: auto; margin: 0; }
/* All categories stay reachable in short desktop windows as well as phones. */
#nav-plane {
  --nav-top: max(calc(var(--site-header-height, 52px) + 10px), calc(50vh - 200px));
  top: var(--nav-top);
  margin-top: 0;
  width: 62px;
  max-height: calc(100vh - var(--nav-top) - 16px);
  max-height: calc(100dvh - var(--nav-top) - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#nav-plane li a { display: block; width: auto; }
@media (max-width: 1279px) {
  .floor-nav-toggle { display: block; }
  #nav-plane {
    display: none;
    top: auto;
    bottom: max(124px, calc(env(safe-area-inset-bottom) + 116px));
    right: max(12px, env(safe-area-inset-right));
    left: auto;
    z-index: 2001;
    width: 230px;
    max-width: calc(100vw - 24px);
    max-height: min(60vh, 420px);
    margin: 0;
    overflow: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px #0004;
  }
  #nav-plane.is-open { display: block; }
  #nav-plane ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 6px; }
  #nav-plane li a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 40px; padding: 4px 2px; line-height: 1.4; overflow-wrap: anywhere; }
}

/* Shared managed banners and the standalone search page use the same mobile/night palette. */
.shared-top-banners { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-block:14px; }
.shared-top-banners:empty { display:none; }
.shared-top-banners a { display:block; min-width:0; }
.shared-top-banners img { display:block; width:100%; height:auto; }
.search-page { box-sizing:border-box; margin-block:20px; padding:16px; background:var(--wx-panel); border:1px solid var(--wx-line); border-radius:8px; }
@media(max-width:600px) { .shared-top-banners { grid-template-columns:1fr; } .search-page { padding:10px; } }