:root {
  --ink: #18213a;
  --muted: #66708d;
  --line: #dfe4f2;
  --panel: rgba(255, 255, 255, 0.94);
  --violet: #6558d9;
  --violet-dark: #4337a5;
  --cyan: #12a9bd;
  --pink: #d75c9d;
  --shadow: 0 18px 45px rgba(48, 44, 105, 0.14);
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 8% 12%, rgba(101, 88, 217, 0.18), transparent 31%),
    radial-gradient(circle at 92% 4%, rgba(18, 169, 189, 0.15), transparent 29%),
    linear-gradient(135deg, #eef1fb 0%, #fbf9ff 46%, #ecf8fa 100%);
}

body {
  min-height: 100%;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(101, 88, 217, 0.18), transparent 31%),
    radial-gradient(circle at 92% 4%, rgba(18, 169, 189, 0.15), transparent 29%),
    linear-gradient(135deg, #eef1fb 0%, #fbf9ff 46%, #ecf8fa 100%);
  font-family: "Microsoft JhengHei UI", "PingFang TC", "Noto Sans CJK SC", "Microsoft YaHei UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
}

.main {
  background: transparent;
}

.main-p {
  min-height: 100%;
  margin-top: 16px;
  margin-bottom: 28px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.mui-bar {
  height: 44px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(105deg, #29245f 0%, #574ab5 48%, #147d99 100%);
  box-shadow: 0 5px 22px rgba(45, 37, 112, 0.25);
}

.mui-title {
  width: min(88%, 900px);
  margin: 0;
  overflow: hidden;
  color: #f7f8ff;
  font-family: "Bahnschrift SemiCondensed", "Microsoft JhengHei UI", "Microsoft YaHei UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mui-bar > img {
  position: absolute;
  right: 14px;
  width: 21px;
  cursor: pointer;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Completely new panoramic campaign treatment. */
.banner {
  width: min(1400px, calc(100vw - 28px));
  margin: 0 0 18px 50%;
  overflow: hidden;
  border: 1px solid rgba(151, 142, 255, 0.38);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(24, 24, 74, 0.28);
  transform: translateX(-50%);
}

.banner a {
  position: relative;
  display: block;
  aspect-ratio: 1400 / 235;
  overflow: hidden;
  color: #fff;
  background: #111c4c;
  text-decoration: none;
}

.banner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.banner:hover img {
  filter: saturate(1.08) brightness(1.04);
  transform: scale(1.018);
}

.banner-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 13, 45, 0.97) 0%, rgba(13, 27, 71, 0.88) 34%, rgba(16, 30, 75, 0.25) 64%, rgba(10, 12, 40, 0.06) 100%),
    linear-gradient(0deg, rgba(20, 11, 64, 0.32), transparent 55%);
}

.banner-shade::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 42px 100%;
  mask-image: linear-gradient(90deg, #000, transparent 65%);
}

.banner-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(24px, 5vw, 74px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(-50%);
}

.banner-eyebrow {
  margin-bottom: 4px;
  color: #8fe9f1;
  font-family: "Bahnschrift", "Segoe UI", sans-serif;
  font-size: clamp(9px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.34em;
}

.banner-copy strong {
  color: #fff;
  font-family: "Microsoft JhengHei UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  font-size: clamp(34px, 5.2vw, 78px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-shadow: 0 5px 22px rgba(41, 20, 112, 0.45);
}

.banner-url {
  margin-top: 8px;
  color: #d7d6ff;
  font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  font-size: clamp(15px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.banner-subtitle {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(9px, 1.15vw, 15px);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.banner-cta {
  position: absolute;
  z-index: 2;
  bottom: clamp(16px, 2vw, 28px);
  left: clamp(300px, 37vw, 520px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, rgba(111, 86, 224, 0.88), rgba(16, 169, 189, 0.88));
  box-shadow: 0 8px 24px rgba(26, 21, 97, 0.28);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
}

.banner-cta b {
  font-size: 16px;
  font-weight: 400;
  transition: transform 0.2s ease;
}

.banner:hover .banner-cta b {
  transform: translateX(4px);
}

.banner + .recommend-host {
  height: 0;
  line-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

nav {
  position: relative;
}

nav .recommend {
  position: fixed !important;
  z-index: 80 !important;
  right: 24px !important;
  bottom: 24px !important;
  top: auto !important;
  display: inline-flex !important;
  width: auto !important;
  height: 42px !important;
  padding: 0 18px 0 13px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(105deg, #6254d8, #0e9cb4) !important;
  box-shadow: 0 9px 25px rgba(48, 41, 137, 0.32) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

nav .recommend::before {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  content: "LV";
  color: #5146ba;
  background: #fff;
  font-family: "Bahnschrift", sans-serif;
  font-size: 10px;
  letter-spacing: 0;
}

nav .recommend:hover {
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(48, 41, 137, 0.4) !important;
  transform: translateY(-2px);
}

.issue {
  margin: 0 16px 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 25px rgba(56, 55, 108, 0.08);
}

.issue-item {
  border-color: var(--line);
  color: #29324e;
}

.issue-item:last-child {
  border-color: var(--line);
}

.issue-mi {
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(115deg, #6a59dc, #cc5da0);
  box-shadow: 0 6px 16px rgba(102, 81, 201, 0.28);
  text-shadow: none;
}

.issue-mi:hover {
  background: linear-gradient(115deg, #5847c6, #bc4a91);
}

.issue-list,
.issue-btns button {
  border-color: #cdd4e7;
  color: #29324e;
  background: #fff;
}

.issue-btns button:hover:not(:disabled) {
  color: #fff;
  background: var(--violet);
}

.issue-more {
  z-index: 5;
  border-color: #cdd4e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(38, 39, 79, 0.16);
}

.issue-more.show {
  display: block;
}

.issue-more li {
  cursor: pointer;
  text-align: center;
}

#qishu {
  color: var(--violet-dark);
  font-weight: 800;
}

.result {
  background: transparent;
}

.result-nav {
  margin: 0 16px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  color: #eaeaff;
  background: linear-gradient(100deg, #302b6e, #5148a8 55%, #147f99);
  font-family: "Microsoft JhengHei UI", "Microsoft YaHei UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.result-nav span {
  border-color: rgba(255, 255, 255, 0.14);
}

.result-active {
  color: #202548 !important;
  background: linear-gradient(120deg, #a5f0ee, #c9c4ff) !important;
  box-shadow: inset 0 -3px rgba(84, 70, 185, 0.25);
}

.result-table {
  margin: 0 16px 16px;
  overflow: hidden;
  border-color: var(--line);
  border-radius: 0 0 14px 14px;
  color: #49516c;
  background: #fff;
  box-shadow: 0 8px 24px rgba(56, 55, 108, 0.07);
}

.result-table,
.result-thead,
.result-tr,
.result-thead span,
.result-tr span,
.result-tr span i,
.result-tr span b,
.result-tr span p {
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI Variable", "Microsoft JhengHei UI", "Microsoft YaHei UI", sans-serif;
  font-style: normal;
}

.result-thead {
  height: 38px;
  line-height: 38px;
  color: #2e3555;
  background: linear-gradient(180deg, #f4f3ff, #ebeef8);
  font-weight: 700;
}

.result-thead span,
.result-tr {
  border-color: #e5e8f3;
}

.result-tr {
  height: 38px;
  line-height: 38px;
}

.result-tr span {
  box-sizing: border-box;
  overflow: hidden;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-tr:nth-child(odd) {
  background: #f8f8fe;
}

.result-tr:hover {
  background: #f0f5ff;
}

.center {
  position: relative;
  min-height: 260px;
}

.center-data {
  z-index: 2;
}

.center-diban {
  position: relative;
  z-index: 1;
}

.center-canvas {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 500px;
  height: 260px;
  cursor: crosshair;
  touch-action: none;
  transform: translateX(-50%);
}

.mipai.open {
  z-index: 99;
}

.mipai.open .mipai-bg {
  z-index: 10;
  background: rgba(19, 16, 49, 0.84);
}

.mipai.open .mi-index {
  z-index: 11;
}

.mi-index {
  width: 100%;
}

.forecast-card {
  padding: 38px 20px;
  text-align: center;
  background: linear-gradient(145deg, #fff, #f5f4ff);
}

.forecast-card h3 {
  margin: 0;
  color: #353060;
  font-size: 20px;
}

.forecast-card > p {
  color: #858ca4;
  font-size: 13px;
}

.forecast-values {
  display: flex;
  max-width: 660px;
  margin: 25px auto;
  justify-content: center;
  gap: 14px;
}

.forecast-values div {
  min-width: 145px;
  padding: 13px;
  border: 1px solid #dcd9f5;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(78, 67, 157, 0.07);
}

.forecast-values span {
  display: block;
  color: #9298aa;
  font-size: 13px;
}

.forecast-values b {
  display: block;
  margin-top: 5px;
  color: var(--violet);
  font-size: 28px;
}

.backtest {
  max-width: 660px;
  margin: auto;
  padding: 13px;
  border-left: 3px solid var(--cyan);
  color: #52617b;
  background: #eef9fb;
}

.backtest small {
  display: block;
  margin-top: 7px;
  color: #8592a8;
  font-size: 12px;
}

.forecast-next {
  background: #f8f8fe !important;
}

.forecast-hit {
  color: #d54888;
}

.forecast-ok {
  color: #6a59dc !important;
  font-size: 18px;
  font-weight: 800;
}

.forecast-no {
  color: #1399aa !important;
  font-size: 18px;
  font-weight: 800;
}

.forecast-note {
  padding: 15px;
  border-top: 1px solid #e5e8f3;
  color: #858ca4;
  font-size: 12px;
  text-align: center;
}

.seo-copy,
.crawler-content {
  max-width: none;
  margin: 0 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #66708a;
  background: linear-gradient(140deg, #fafaff, #f3fbfc);
}

.crawler-content {
  margin-bottom: 16px;
}

.seo-copy h2,
.crawler-content h1,
.crawler-content h2 {
  color: #33345f;
  font-family: "Microsoft JhengHei UI", "Microsoft YaHei UI", sans-serif;
}

.seo-copy h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.seo-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
}

.freshness {
  margin: 0 0 15px !important;
  padding: 10px 13px !important;
  border-left: 3px solid var(--violet);
  border-radius: 0 8px 8px 0;
  color: #4f5d7a !important;
  background: #efeffd;
  font-size: 13px;
}

.seo-links {
  display: flex;
  height: auto;
  margin: 0 0 15px;
  flex-wrap: wrap;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: normal;
}

.seo-links a,
.landing-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #d4d2f2;
  border-radius: 999px;
  color: #5549ba;
  background: #f3f2ff;
  text-decoration: none;
}

.site-footer {
  display: flex;
  height: auto !important;
  margin-top: 16px;
  padding: 26px 12px !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: 0 0 22px 22px;
  color: #e8ecff !important;
  background: linear-gradient(105deg, #29245f, #5148a8, #147d99) !important;
  line-height: normal !important;
}

.site-footer b,
.site-footer strong {
  color: #9df1f4;
  font-size: 15px;
}

.site-footer span,
.site-footer small {
  color: #cfd5ef;
  font-size: 12px;
}

.landing {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(101, 88, 217, 0.17), transparent 31%),
    radial-gradient(circle at 90% 5%, rgba(18, 169, 189, 0.14), transparent 27%),
    linear-gradient(135deg, #eef1fb, #fbf9ff 52%, #ecf8fa);
  font-family: "Microsoft JhengHei UI", "PingFang TC", "Microsoft YaHei UI", sans-serif;
}

.landing main {
  max-width: 860px;
  margin: 50px auto;
  padding: 40px 48px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--shadow);
}

.landing h1 {
  margin: 12px 0 20px;
  color: #343061;
  font-size: 28px;
}

.landing h2 {
  margin: 30px 0 9px;
  color: #48447a;
  font-size: 18px;
}

.landing p {
  color: #66708a;
  line-height: 1.9;
}

.crumb,
.crumb a {
  color: #8991a8;
  font-size: 13px;
  text-decoration: none;
}

@media (max-width: 800px) {
  html,
  body {
    background: #f3f5fb;
  }

  body {
    letter-spacing: 0;
  }

  .main {
    background: #f3f5fb;
  }

  .main-p {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .banner {
    width: 100%;
    margin: 0 0 12px;
    border-width: 0 0 1px;
    border-radius: 0;
    transform: none;
  }

  .banner-copy {
    left: 16px;
  }

  .banner-copy strong {
    font-size: clamp(25px, 8vw, 46px);
  }

  .banner-url {
    margin-top: 3px;
    font-size: clamp(12px, 3.6vw, 20px);
  }

  .banner-eyebrow,
  .banner-subtitle {
    display: none;
  }

  .banner-cta {
    right: 12px;
    bottom: 10px;
    left: auto;
    padding: 5px 10px;
    font-size: 10px;
  }

  .issue {
    margin: 0 8px 10px;
    border-radius: 12px;
  }

  .result-nav {
    margin: 0 8px;
  }

  .result-table {
    margin: 0 8px 12px;
  }

  .result-tr span {
    font-size: 13px;
  }

  .seo-copy,
  .crawler-content {
    margin: 0 8px;
    padding: 16px 14px;
  }

  .site-footer {
    border-radius: 0;
  }

  .mui-title {
    width: 86%;
    font-size: 12px;
    letter-spacing: 0.035em;
  }

  .landing main {
    margin: 18px 12px;
    padding: 28px 22px;
  }
}

@media (max-width: 600px) {
  nav .recommend {
    right: 14px !important;
    bottom: 18px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
  }

  nav .recommend::before {
    width: 29px;
    height: 29px;
    font-size: 11px;
  }

  .center {
    min-height: 208px;
  }

  .center-canvas {
    height: 208px;
  }

  .mi-index {
    max-width: 500px;
  }

  .forecast-values {
    gap: 7px;
  }

  .forecast-values div {
    min-width: 0;
    padding: 10px 4px;
    flex: 1;
  }

  .forecast-values b {
    font-size: 23px;
  }

  .forecast-card {
    padding: 28px 12px;
  }

  .landing main {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .landing h1 {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner img,
  nav .recommend,
  .banner-cta b {
    transition: none;
  }
}