/* 2026.08.20-4 · 完整测算页标题美学系统：术数门楣、十八章印与动态面板抬头。 */
body.classic-shell #mainContent > [id^="view"] {
  --classic-title-accent: #d9bd6b;
}
body.classic-shell #viewZiwei { --classic-title-accent: #b99ad7; }
body.classic-shell #viewZodiac { --classic-title-accent: #8fc7e8; }
body.classic-shell #viewMatch,
body.classic-shell #viewYuanfen { --classic-title-accent: #d697a7; }
body.classic-shell #viewDate,
body.classic-shell #viewGua,
body.classic-shell #viewQimen,
body.classic-shell #viewLiuren { --classic-title-accent: #d8bd70; }
body.classic-shell #viewShengxiao,
body.classic-shell #viewFengshui { --classic-title-accent: #87b9a4; }
body.classic-shell #viewNaming,
body.classic-shell #viewDict { --classic-title-accent: #c7ae7a; }
body.classic-shell #viewTarot,
body.classic-shell #viewMbti,
body.classic-shell #viewCeshi { --classic-title-accent: #a99ad8; }
body.classic-shell #viewCheckin,
body.classic-shell #viewSaved { --classic-title-accent: #8eaaa7; }

body.classic-shell .top-nav-shell .nav-overflow .classic-nav-title {
  display: grid !important;
  grid-column: 1 / -1;
  grid-template-columns: 44px minmax(250px, max-content) minmax(90px, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 9px 2px 14px !important;
  border: 0 !important;
  background: none !important;
  text-align: left;
}
body.classic-shell .top-nav-shell .classic-nav-title > span {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--read-sans);
  letter-spacing: normal;
}
body.classic-shell .top-nav-shell .classic-nav-title .classic-nav-title__seal {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--read-gold) 66%, transparent);
  border-radius: 13px 13px 13px 4px;
  color: #f0d994;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(145deg, rgba(213,179,98,.19), rgba(61,103,98,.14));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.2);
  font: 700 18px/1 var(--read-serif);
}
body.classic-shell .top-nav-shell .classic-nav-title .classic-nav-title__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
body.classic-shell .top-nav-shell .classic-nav-title__copy small {
  display: block;
  color: #b8a46c !important;
  font: 750 9px/1.2 var(--read-sans);
  letter-spacing: .18em;
}
body.classic-shell .top-nav-shell .classic-nav-title__copy strong {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #efe9dc;
  font: 680 18px/1.3 var(--read-serif);
  letter-spacing: .08em;
}
body.classic-shell .top-nav-shell .classic-nav-title__copy strong b {
  padding: 3px 7px;
  border: 1px solid rgba(213,183,107,.22);
  border-radius: 999px;
  color: #baa977;
  background: rgba(213,183,107,.06);
  font: 650 9px/1.2 var(--read-sans);
  letter-spacing: .08em;
}
body.classic-shell .top-nav-shell .classic-nav-title__copy em {
  color: var(--read-secondary);
  font: 500 11px/1.35 var(--read-sans);
  letter-spacing: .02em;
}
body.classic-shell .top-nav-shell .classic-nav-title .classic-nav-title__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(218,187,106,.58), rgba(112,172,158,.28) 48%, transparent);
}
body.classic-shell.completing-journey .nav-overflow__head > span::after {
  display: none !important;
  content: none !important;
}

body.classic-shell #mainContent > [id^="view"] > .classic-view-title {
  position: relative;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 3px 16px;
  box-sizing: border-box;
  width: 100%;
  margin: 20px 0 25px !important;
  padding: 18px 21px !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--classic-title-accent) 28%, rgba(255,255,255,.045));
  border-radius: 18px 18px 18px 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--classic-title-accent) 9%, transparent), transparent 46%),
    linear-gradient(145deg, rgba(11,21,29,.96), rgba(6,14,21,.9)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 20px 46px rgba(0,0,0,.17);
  text-align: left !important;
}
body.classic-shell #mainContent > [id^="view"] > .classic-view-title::before {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--classic-title-accent) 62%, transparent);
  border-radius: 15px 15px 15px 5px;
  color: color-mix(in srgb, var(--classic-title-accent) 86%, white);
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.14), transparent 33%),
    color-mix(in srgb, var(--classic-title-accent) 10%, rgba(8,17,24,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.18);
  content: attr(data-title-mark);
  font: 700 21px/1 var(--read-serif);
}
body.classic-shell #mainContent > [id^="view"] > .classic-view-title::after {
  grid-column: 2;
  grid-row: 1;
  color: color-mix(in srgb, var(--classic-title-accent) 78%, #b9c1bf);
  content: attr(data-title-en);
  font: 760 9.5px/1.25 var(--read-sans);
  letter-spacing: .16em;
}
body.classic-shell #mainContent > [id^="view"] > .classic-view-title .header-ornament {
  display: none !important;
}
body.classic-shell #mainContent > [id^="view"] > .classic-view-title h1 {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  color: #f1ede4 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font: 680 clamp(21px, 2vw, 28px)/1.32 var(--read-serif) !important;
  letter-spacing: .08em !important;
  text-align: left !important;
  text-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}
body.classic-shell #mainContent > [id^="view"] > .classic-view-title h1::after {
  display: block;
  flex: 1;
  max-width: 360px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--classic-title-accent) 60%, transparent), transparent);
  content: "";
}
body.classic-shell #mainContent > [id^="view"] > .classic-view-title .subtitle {
  grid-column: 2;
  grid-row: 3;
  margin: 0 !important;
  color: #9fa9a7 !important;
  font: 500 12.5px/1.45 var(--read-sans) !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

body.classic-shell #mainContent .classic-title-ready {
  display: grid !important;
  grid-template-columns: 39px minmax(118px, max-content) minmax(36px, 1fr);
  align-items: center;
  justify-content: stretch !important;
  gap: 11px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 20px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  color: inherit !important;
  background: none !important;
  font-size: 0 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  opacity: 1 !important;
}
body.classic-shell #mainContent .classic-title-ready::before,
body.classic-shell #mainContent .classic-title-ready::after {
  display: none !important;
  content: none !important;
}
body.classic-shell #mainContent .classic-panel-title__seal {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--classic-title-accent) 52%, rgba(255,255,255,.08));
  border-radius: 11px 11px 11px 4px;
  color: color-mix(in srgb, var(--classic-title-accent) 86%, white) !important;
  background: color-mix(in srgb, var(--classic-title-accent) 9%, rgba(8,17,24,.86));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
  font: 700 15px/1 var(--read-serif) !important;
}
body.classic-shell #mainContent .classic-panel-title__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
body.classic-shell #mainContent .classic-panel-title__copy small {
  color: color-mix(in srgb, var(--classic-title-accent) 73%, #969f9d) !important;
  font: 750 8px/1.15 var(--read-sans) !important;
  letter-spacing: .14em !important;
}
body.classic-shell #mainContent .classic-panel-title__copy strong {
  color: #e9e5dc !important;
  font: 680 16px/1.3 var(--read-serif) !important;
  letter-spacing: .08em !important;
  white-space: normal;
}
body.classic-shell #mainContent .classic-panel-title__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--classic-title-accent) 52%, transparent), transparent);
}

body.classic-shell[data-theme="light"] #mainContent > [id^="view"] > .classic-view-title,
body.classic-shell[data-theme="day"] #mainContent > [id^="view"] > .classic-view-title,
body.classic-shell[data-theme="paper"] #mainContent > [id^="view"] > .classic-view-title {
  border-color: color-mix(in srgb, var(--classic-title-accent) 34%, rgba(52,62,67,.12));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--classic-title-accent) 12%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255,253,247,.97), rgba(244,240,230,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 18px 38px rgba(52,45,32,.08);
}
body.classic-shell[data-theme="light"] .classic-view-title h1,
body.classic-shell[data-theme="day"] .classic-view-title h1,
body.classic-shell[data-theme="paper"] .classic-view-title h1,
body.classic-shell[data-theme="light"] .classic-panel-title__copy strong,
body.classic-shell[data-theme="day"] .classic-panel-title__copy strong,
body.classic-shell[data-theme="paper"] .classic-panel-title__copy strong {
  color: #293431 !important;
}
body.classic-shell[data-theme="light"] .classic-view-title .subtitle,
body.classic-shell[data-theme="day"] .classic-view-title .subtitle,
body.classic-shell[data-theme="paper"] .classic-view-title .subtitle {
  color: #68736f !important;
}

@media (max-width: 720px) {
  body.classic-shell .top-nav-shell .nav-overflow .classic-nav-title {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 52px;
    gap: 10px;
    padding: 7px 1px 11px !important;
  }
  body.classic-shell .top-nav-shell .classic-nav-title .classic-nav-title__seal {
    width: 36px;
    height: 36px;
    border-radius: 11px 11px 11px 4px;
    font-size: 16px;
  }
  body.classic-shell .top-nav-shell .classic-nav-title__copy small { font-size: 7.5px; }
  body.classic-shell .top-nav-shell .classic-nav-title__copy strong { font-size: 15px; }
  body.classic-shell .top-nav-shell .classic-nav-title__copy em { display: none; }
  body.classic-shell .top-nav-shell .classic-nav-title .classic-nav-title__rule { display: none; }

  body.classic-shell #mainContent > [id^="view"] > .classic-view-title {
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 2px 12px;
    margin: 14px 0 18px !important;
    padding: 14px 13px !important;
    border-radius: 15px 15px 15px 5px;
  }
  body.classic-shell #mainContent > [id^="view"] > .classic-view-title::before {
    width: 41px;
    height: 41px;
    border-radius: 12px 12px 12px 4px;
    font-size: 18px;
  }
  body.classic-shell #mainContent > [id^="view"] > .classic-view-title::after {
    font-size: 7.5px;
    letter-spacing: .11em;
  }
  body.classic-shell #mainContent > [id^="view"] > .classic-view-title h1 {
    gap: 9px;
    font-size: 19px !important;
    letter-spacing: .05em !important;
  }
  body.classic-shell #mainContent > [id^="view"] > .classic-view-title .subtitle {
    font-size: 11px !important;
  }
  body.classic-shell #mainContent .classic-title-ready {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
  }
  body.classic-shell #mainContent .classic-panel-title__seal {
    width: 32px;
    height: 32px;
    border-radius: 10px 10px 10px 4px;
    font-size: 14px !important;
  }
  body.classic-shell #mainContent .classic-panel-title__copy small { font-size: 7px !important; }
  body.classic-shell #mainContent .classic-panel-title__copy strong { font-size: 14px !important; }
  body.classic-shell #mainContent .classic-panel-title__rule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.classic-shell .classic-nav-title__seal,
  body.classic-shell .classic-view-title,
  body.classic-shell .classic-panel-title__seal { transition: none !important; }
}