:root {
  --g5-violet: #7657ff;
  --g5-pink: #ff4f91;
  --g5-night: #141323;
  --g5-panel: #211f36;
  color-scheme: dark;
}
html { background: #0c0b16; }
body {
  max-width: 780px;
  color: #efedff;
  background:
    radial-gradient(circle at 90% 4%, rgba(118,87,255,.24), transparent 19rem),
    radial-gradient(circle at 4% 28%, rgba(255,79,145,.13), transparent 22rem),
    #141323;
  box-shadow: 0 0 50px #000;
}
.static-snapshot {
  padding-top: 0;
  padding-bottom: 28px;
}
.index-header {
  position: relative !important;
  height: auto !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(159,139,255,.35);
  background: rgba(20,19,35,.9) !important;
  backdrop-filter: blur(16px);
}
.brand-header { padding: 18px 16px !important; background: linear-gradient(110deg, rgba(118,87,255,.3), rgba(255,79,145,.16)) !important; }
.brand-kicker { color: #b7abff !important; }
.brand-title { color: #fff !important; text-shadow: 0 0 20px rgba(118,87,255,.55); }
.brand-tags span { border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.08) !important; color: #fff !important; }
.nav { background: #171526 !important; color: #f6f3ff; }
.nav.local-draw, .index-header .nav { border-color: rgba(118,87,255,.32) !important; }
.box, .tzlb, .kkjj, .home-author-latest {
  margin: 12px !important;
  overflow: hidden;
  border: 1px solid rgba(151,130,255,.27) !important;
  border-radius: 18px !important;
  background: rgba(33,31,54,.92) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26);
}
.list-title, .tab, .new-KJ-TabBox-box-tit, .tzlb-head {
  border: 0 !important;
  background: linear-gradient(90deg, #5b42d7, #a83d83) !important;
  color: #fff !important;
}
.tab a, .tab button { color: #dcd6ff !important; }
.tab .cur, .tab .active { color: #fff !important; background: rgba(255,255,255,.13) !important; }
.new-KJ-TabBox-box, .new-KJ-TabBox-box-con, .new-KJ-TabBox-box-foot { background: #211f36 !important; color: #f3f0ff !important; }
.home-author-latest-list, .post-list, .home-author-latest-row, .post-list li { background: transparent !important; color: #e6e1fa !important; border-color: rgba(151,130,255,.2) !important; }
.home-author-latest a, .post-list a, .suffix { color: #efedff !important; }
.zg, .wr, .kj-font-red { color: #ff78aa !important; }
.local-float, #myBtn, #share, #refresh { background: linear-gradient(135deg, #7657ff, #ff4f91) !important; border-color: #292442 !important; }
.local-modal .container { background: #211f36 !important; color: #fff !important; }
@media (min-width: 760px) {
  body { max-width: 1040px; }
  .static-snapshot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .index-header, .static-snapshot > .box:first-of-type, .static-snapshot > .local-modal { grid-column: 1 / -1; }
}

/* 星港智彩品牌头部：头图负责氛围，渐变遮罩负责文案可读性 */
.index-header {
  background:
    linear-gradient(90deg, rgba(5, 18, 42, .97) 0%, rgba(5, 18, 42, .78) 38%, rgba(5, 18, 42, .14) 100%),
    url('/assets/media/xingang-god-header.png') center right / cover no-repeat !important;
  border-bottom-color: rgba(127, 233, 255, .36) !important;
}
.brand-header {
  position: relative;
  justify-content: flex-start !important;
  gap: 11px;
  min-height: 78px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: linear-gradient(90deg, rgba(5, 18, 42, .6), rgba(8, 22, 50, .08)) !important;
}
.brand-logo {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 5px 14px rgba(48, 201, 255, .24));
}
.header .brand-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.brand-copy {
  position: relative;
  z-index: 1;
}
.brand-kicker { color: #a9eefe !important; letter-spacing: .08em; }
.brand-title {
  letter-spacing: .08em !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .42), 0 0 24px rgba(127, 233, 255, .24) !important;
}
.brand-subtitle {
  display: block;
  margin-top: 3px;
  color: rgba(238, 248, 255, .66);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .34em;
}
.brand-tags span {
  border-color: rgba(127, 233, 255, .56) !important;
  background: rgba(7, 27, 56, .64) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(1, 8, 24, .22) !important;
}
.tab span {
  cursor: pointer;
  width: calc(50% - 2px);
  text-align: center;
  border-radius: 5px;
  background: #df6565 !important;
  line-height: 45px;
}
@media (max-width: 420px) {
  .brand-header { gap: 8px; }
  .brand-logo,
  .header .brand-logo { width: 46px; height: 46px; }
  .brand-subtitle { font-size: 7px; letter-spacing: .24em; }
}