/* Ethan Lab · Sprint 5B
*
* 复用 styles.css 的 --gold/--red/--bg 等色 token；本表只新增 lab 板块独有的元素。
* 元素配色：木绿 / 火红 / 土金 / 金灰 / 水蓝
*/
:root,
:root[data-theme="dark"] {
--lab-wood: #5FB374;
--lab-fire: #D4342A;
--lab-earth: #c9a227;
--lab-metal: #B5B5B5;
--lab-water: #5F9EB3;
--lab-good: #5FB374;
--lab-bad: #D4342A;
--lab-neutral:#8B7A5C;
--lab-bg: #0E0406;
--lab-bg-elev:#1A0A0C;
--lab-bg-card:#23100F;
--lab-border: rgba(212, 175, 55, 0.22);
--lab-border-strong: rgba(212, 175, 55, 0.55);
--lab-gold: #c9a227;
--lab-gold-dim:#8B7A3B;
--lab-ivory: #F5E9D3;
--lab-text-dim:#C4B491;
--lab-text-mute:#8C7A5E;
--lab-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
--lab-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
/* ═══════════════════════════════════════════════════════
Light theme · 米白 + 深棕 + 金色 · 宣纸质感
仅 override 颜色 token，所有现有规则一键继承
═════════════════════════════════════════════════════ */
:root[data-theme="light"] {
/* 五行深调（浅底可读）*/
--lab-wood: #1a7a2e;
--lab-fire: #c0392b;
--lab-earth: #b8860b;
--lab-metal: #6b7280;
--lab-water: #1a5a8b;
--lab-good: #1a7a2e;
--lab-bad: #c0392b;
--lab-neutral:#6b4c2a;
--lab-bg: #faf6ec; /* 宣纸米黄 */
--lab-bg-elev:#fffdf6;
--lab-bg-card:#ffffff;
--lab-border: rgba(184, 134, 11, 0.30);
--lab-border-strong: rgba(184, 134, 11, 0.65);
--lab-gold: #b8860b; /* 深金 */
--lab-gold-dim:#a07309;
--lab-ivory: #2c1a0e; /* 深棕墨（取代浅色 ivory）*/
--lab-text-dim:#6b4c2a;
--lab-text-mute:#a08060;
}
/* 跟随系统：无显式 data-theme 时，根据 prefers-color-scheme: light 也走浅色 token */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme="light"]) {
--lab-wood: #1a7a2e;
--lab-fire: #c0392b;
--lab-earth: #b8860b;
--lab-metal: #6b7280;
--lab-water: #1a5a8b;
--lab-good: #1a7a2e;
--lab-bad: #c0392b;
--lab-neutral:#6b4c2a;
--lab-bg: #faf6ec;
--lab-bg-elev:#fffdf6;
--lab-bg-card:#ffffff;
--lab-border: rgba(184, 134, 11, 0.30);
--lab-border-strong: rgba(184, 134, 11, 0.65);
--lab-gold: #b8860b;
--lab-gold-dim:#a07309;
--lab-ivory: #2c1a0e;
--lab-text-dim:#6b4c2a;
--lab-text-mute:#a08060;
}
}
/* Light mode 替换 body 暗调红渐变背景为暖金宣纸渐变 */
:root[data-theme="light"] body.lab-page,
:root:not([data-theme="dark"]) body.lab-page {
background-image:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(184, 134, 11, 0.08) 0%, rgba(250, 246, 236, 0) 60%),
radial-gradient(ellipse 60% 40% at 20% 110%, rgba(184, 134, 11, 0.06) 0%, rgba(250, 246, 236, 0) 70%),
radial-gradient(ellipse 50% 30% at 85% 90%, rgba(44, 26, 14, 0.05) 0%, rgba(250, 246, 236, 0) 70%);
}
/* Light mode · 覆盖剩余硬编码暗色 rgba（modal / match-card / match-visual） */
:root[data-theme="light"] .lab-modal-overlay { background: rgba(44, 26, 14, 0.45); }
:root[data-theme="light"] .lab-modal-card {
background: var(--modal-bg, linear-gradient(160deg, #ffffff 0%, #faf6ec 100%));
border-color: rgba(184, 134, 11, 0.45);
}
:root[data-theme="light"] .lab-modal-card select,
:root[data-theme="light"] .lab-modal-card input[type="text"] {
background: #faf6ec;
border-color: rgba(184, 134, 11, 0.35);
color: #2c1a0e;
}
:root[data-theme="light"] .lab-modal-card select:focus,
:root[data-theme="light"] .lab-modal-card input[type="text"]:focus {
background: #ffffff;
border-color: rgba(184, 134, 11, 0.7);
}
:root[data-theme="light"] .lab-match-card {
background: linear-gradient(160deg, rgba(184, 134, 11, 0.08) 0%, #ffffff 100%);
}
:root[data-theme="light"] .lab-match-visual {
background: linear-gradient(160deg, #ffffff 0%, #faf6ec 100%);
}
:root[data-theme="light"] .lab-match-interp {
background: rgba(184, 134, 11, 0.06);
border-left-color: rgba(184, 134, 11, 0.35);
}
/* Lab banner default */
:root[data-theme="light"] .lab-banner {
background: linear-gradient(135deg, #ffffff 0%, #faf6ec 100%);
border-color: rgba(184, 134, 11, 0.45);
color: #2c1a0e;
}
/* Lab match preset banner */
:root[data-theme="light"] .lab-match-preset-banner,
:root[data-theme="light"] .lab-match-preset-result {
color: #2c1a0e;
}
/* Universe cells subtle border in light */
:root[data-theme="light"] .lab-universe-cell {
filter: brightness(0.94);
}
/* Footer & general muted text */
:root[data-theme="light"] .lab-footer,
:root[data-theme="light"] .lab-footer a { color: #6b4c2a; }
/* Asset / archive cards bg */
:root[data-theme="light"] .lab-archive-card,
:root[data-theme="light"] .lab-asset-card,
:root[data-theme="light"] .lab-asset-natal-grid {
background: #ffffff;
border-color: rgba(184, 134, 11, 0.30);
}
:root[data-theme="light"] .lab-archive-card-quality,
:root[data-theme="light"] .lab-archive-card-date {
color: #2c1a0e;
}
/* Light mode · 主 header（styles.css 默认深底）覆盖为浅色宣纸调 */
:root[data-theme="light"] body.lab-page header.site,
:root:not([data-theme="dark"]) body.lab-page header.site {
background: rgba(250, 246, 236, 0.95);
border-bottom: 1px solid rgba(184, 134, 11, 0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
:root[data-theme="light"] body.lab-page header.site .logo,
:root:not([data-theme="dark"]) body.lab-page header.site .logo {
color: #b8860b;
}
:root[data-theme="light"] body.lab-page header.site .logo small,
:root:not([data-theme="dark"]) body.lab-page header.site .logo small {
color: #a08060;
}
:root[data-theme="light"] body.lab-page header.site .nav-links > li > a,
:root[data-theme="light"] body.lab-page header.site .nav-dropdown-trigger,
:root:not([data-theme="dark"]) body.lab-page header.site .nav-links > li > a,
:root:not([data-theme="dark"]) body.lab-page header.site .nav-dropdown-trigger {
color: #2c1a0e;
}
:root[data-theme="light"] body.lab-page header.site .nav-links > li > a:hover,
:root[data-theme="light"] body.lab-page header.site .nav-dropdown-trigger:hover,
:root[data-theme="light"] body.lab-page header.site .nav-links > li > a[aria-current="page"],
:root:not([data-theme="dark"]) body.lab-page header.site .nav-links > li > a:hover,
:root:not([data-theme="dark"]) body.lab-page header.site .nav-dropdown-trigger:hover,
:root:not([data-theme="dark"]) body.lab-page header.site .nav-links > li > a[aria-current="page"] {
color: #b8860b;
}
:root[data-theme="light"] body.lab-page header.site .nav-links > li > a[aria-current="page"],
:root:not([data-theme="dark"]) body.lab-page header.site .nav-links > li > a[aria-current="page"] {
border-bottom-color: rgba(184, 134, 11, 0.7);
}
:root[data-theme="light"] body.lab-page header.site .nav-links > li.nav-cta > a {
color: #b8860b;
border: 1px solid rgba(184, 134, 11, 0.5);
padding: 4px 12px;
border-radius: 3px;
}
:root[data-theme="light"] body.lab-page header.site .nav-dropdown-menu {
background: linear-gradient(160deg, #ffffff 0%, #faf6ec 100%);
border-color: rgba(184, 134, 11, 0.35);
}
:root[data-theme="light"] body.lab-page header.site .nav-dropdown-menu a {
color: #2c1a0e;
}
:root[data-theme="light"] body.lab-page header.site .nav-dropdown-menu a:hover {
background: rgba(184, 134, 11, 0.10);
color: #b8860b;
}
:root[data-theme="light"] body.lab-page header.site .nav-dropdown-sep {
border-top-color: rgba(184, 134, 11, 0.25);
}
:root[data-theme="light"] body.lab-page header.site .nav-dropdown-sep a {
color: #b8860b;
}
/* ═══════════════════════════════════════════════════════
Light mode · WCAG AA 对比度修复
═════════════════════════════════════════════════════ */
/* ─── Sector Rotation Radar SVG ─── */
/* 网格圈：浅灰 → 深金描边 */
:root[data-theme="light"] .lab-sr-radar circle[fill="none"],
:root:not([data-theme="dark"]) .lab-sr-radar circle[fill="none"] {
stroke: #c9a227 !important;
stroke-opacity: 0.35;
}
/* 板块标签文字：浅 ivory → 深棕墨 #3a2a10 + 加粗 */
:root[data-theme="light"] .lab-sr-radar text,
:root:not([data-theme="dark"]) .lab-sr-radar text {
fill: #3a2a10 !important;
font-weight: 600;
}
/* spoke-end dot stroke：#0E0406 → 白底，让点不被吃掉 */
:root[data-theme="light"] .lab-sr-radar circle[stroke="#0E0406"],
:root:not([data-theme="dark"]) .lab-sr-radar circle[stroke="#0E0406"] {
stroke: #ffffff !important;
}
/* 中心十字标记的点：浅金 → 深棕 */
:root[data-theme="light"] .lab-sr-radar circle[fill^="rgba(212"],
:root:not([data-theme="dark"]) .lab-sr-radar circle[fill^="rgba(212"] {
fill: #6b4c2a !important;
}
/* ─── Personal Match Hook 文字对比度 ─── */
/* 卡片副标题"建立你的命格档案"等 */
:root[data-theme="light"] .lab-match-hook .lab-match-card-sub,
:root[data-theme="light"] .lab-match-hook .lab-match-card-saved-meta,
:root[data-theme="light"] .lab-match-hook .lab-match-sub,
:root:not([data-theme="dark"]) .lab-match-hook .lab-match-card-sub,
:root:not([data-theme="dark"]) .lab-match-hook .lab-match-card-saved-meta,
:root:not([data-theme="dark"]) .lab-match-hook .lab-match-sub {
color: #6b4c2a;
}
/* Disclaimer 注脚（小字） */
:root[data-theme="light"] .lab-match-hook .lab-match-card-disclaimer,
:root[data-theme="light"] .lab-match-hook .lab-match-disclaimer,
:root[data-theme="light"] .lab-match-disclaimer,
:root:not([data-theme="dark"]) .lab-match-hook .lab-match-card-disclaimer,
:root:not([data-theme="dark"]) .lab-match-hook .lab-match-disclaimer,
:root:not([data-theme="dark"]) .lab-match-disclaimer {
color: #8b6a3e;
}
/* 卡片标题保持金色但加深 */
:root[data-theme="light"] .lab-match-hook .lab-match-card-title,
:root:not([data-theme="dark"]) .lab-match-hook .lab-match-card-title {
color: #b8860b;
}
/* 修改档案链接 */
:root[data-theme="light"] .lab-match-edit-link,
:root:not([data-theme="dark"]) .lab-match-edit-link { color: #6b4c2a; }
:root[data-theme="light"] .lab-match-edit-link-val,
:root:not([data-theme="dark"]) .lab-match-edit-link-val { color: #2c1a0e; }
/* Sector Rotation summary / list 文字 */
:root[data-theme="light"] #lab-sr-summary,
:root[data-theme="light"] #lab-sr-top3,
:root[data-theme="light"] #lab-sr-bottom3,
:root:not([data-theme="dark"]) #lab-sr-summary,
:root:not([data-theme="dark"]) #lab-sr-top3,
:root:not([data-theme="dark"]) #lab-sr-bottom3 {
color: #3a2a10;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="dark"]):not([data-theme="light"]) body.lab-page {
background-image:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(139, 26, 26, 0.35) 0%, rgba(14, 4, 6, 0) 60%),
radial-gradient(ellipse 60% 40% at 20% 110%, rgba(160, 40, 44, 0.14) 0%, rgba(14, 4, 6, 0) 70%),
radial-gradient(ellipse 50% 30% at 85% 90%, rgba(212, 175, 55, 0.06) 0%, rgba(14, 4, 6, 0) 70%);
}
}
body.lab-page {
background: var(--lab-bg);
color: var(--lab-ivory);
font-family: var(--lab-font-sans);
min-height: 100vh;
line-height: 1.7;
background-image:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(139, 26, 26, 0.35) 0%, rgba(14, 4, 6, 0) 60%),
radial-gradient(ellipse 60% 40% at 20% 110%, rgba(160, 40, 44, 0.14) 0%, rgba(14, 4, 6, 0) 70%),
radial-gradient(ellipse 50% 30% at 85% 90%, rgba(212, 175, 55, 0.06) 0%, rgba(14, 4, 6, 0) 70%);
background-attachment: fixed;
}
/* Lab nav 完全继承 styles.css 的 header.site nav 规则
（max-width: var(--max-w)=1440px / padding: 0 var(--s-3)=24px / flex / space-between）
确保 Home 与 Lab 页 nav 视觉完全一致；此 block 仅留作 hook */
body.lab-page .logo {
color: var(--lab-gold);
text-decoration: none;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.06em;
}
body.lab-page .logo small {
color: var(--lab-gold-dim);
font-size: 11px;
margin-left: 8px;
letter-spacing: 0.16em;
}
body.lab-page .nav-links {
list-style: none;
display: flex;
gap: 24px;
margin: 0;
padding: 0;
align-items: center;
}
body.lab-page .nav-links a {
color: var(--lab-text-dim);
text-decoration: none;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: color 0.2s;
}
body.lab-page .nav-links a:hover,
body.lab-page .nav-links a[aria-current="page"] { color: var(--lab-gold); }
body.lab-page .nav-links .nav-cta a {
border: 1px solid rgba(201, 168, 76, 0.5);
padding: 7px 16px;
color: #C9A84C;
border-radius: 4px;
}
/* ─── Entry page ─────────────────────────────────────── */
.lab-entry {
max-width: 820px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.lab-hero { text-align: center; margin-bottom: 64px; }
.lab-seal {
width: 64px; height: 64px;
margin: 0 auto 18px;
background: radial-gradient(circle at 30% 30%, #E8483A 0%, #D4342A 40%, #8B1A1A 85%);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: rgba(255, 230, 200, 0.95);
font-size: 20px; font-weight: 900;
letter-spacing: 1px;
box-shadow: 0 6px 24px rgba(212, 52, 42, 0.4), inset 0 2px 4px rgba(255,200,150,0.15);
}
.lab-h1 {
font-size: 38px;
font-weight: 800;
margin-bottom: 14px;
background: linear-gradient(135deg, var(--lab-ivory) 0%, #E8C96E 50%, var(--lab-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lab-tagline { font-size: 16px; color: var(--lab-text-dim); margin-bottom: 8px; }
.lab-handle { font-size: 13px; color: var(--lab-gold-dim); font-family: var(--lab-font-mono); letter-spacing: 0.1em; }
.lab-h2 {
font-size: 16px;
font-weight: 700;
color: var(--lab-gold);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 18px;
padding-bottom: 8px;
border-bottom: 1px solid var(--lab-border);
}
.lab-belief { margin-bottom: 56px; }
.lab-belief-list {
list-style: none;
padding: 0;
counter-reset: belief;
}
.lab-belief-list li {
counter-increment: belief;
padding: 14px 0 14px 48px;
position: relative;
border-bottom: 1px solid rgba(58, 21, 24, 0.5);
font-size: 14px;
color: var(--lab-text-dim);
}
.lab-belief-list li::before {
content: counter(belief);
position: absolute;
left: 0; top: 14px;
width: 32px; height: 32px;
border: 1px solid var(--lab-border-strong);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--lab-gold);
font-family: var(--lab-font-mono);
font-size: 14px;
}
.lab-belief-list li strong {
color: var(--lab-ivory);
display: block;
margin-bottom: 4px;
}
.lab-today-preview { text-align: center; margin-bottom: 56px; }
.lab-preview-card {
background: var(--lab-bg-elev);
border: 1px solid var(--lab-border);
border-radius: 10px;
padding: 28px 20px;
margin-bottom: 18px;
min-height: 120px;
}
.lab-preview-loading { color: var(--lab-text-mute); font-size: 14px; }
.lab-cta-primary {
display: inline-block;
padding: 12px 28px;
background: linear-gradient(135deg, var(--lab-gold) 0%, #8B7A3B 100%);
color: var(--lab-bg);
text-decoration: none;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 13px;
border-radius: 4px;
transition: transform 0.2s, box-shadow 0.2s;
}
.lab-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3); }
.lab-disclaimer {
text-align: center;
font-size: 11px;
color: var(--lab-text-mute);
padding: 24px;
border-top: 1px solid var(--lab-border);
margin-top: 64px;
}
/* ─── /lab/today/ page ─────────────────────────────────── */
.lab-today-main {
max-width: 1440px;
margin: 0 auto;
/* nav 与 Home 对齐后高度 ~50px，留 30px 视觉缓冲 */
padding: 80px 32px 64px;
}
/* Banner */
.lab-banner {
background: rgba(212, 52, 42, 0.12);
border: 1px solid rgba(212, 52, 42, 0.45);
border-radius: 8px;
padding: 14px 20px;
margin: 16px auto 24px;
max-width: 1440px;
color: #F0B4A0;
font-size: 14px;
text-align: center;
}
.lab-banner.lab-banner-error {
background: rgba(212, 52, 42, 0.22);
color: #FFC8B0;
}
/* Section */
.lab-section {
background: var(--lab-bg-elev);
border: 1px solid var(--lab-border);
border-radius: 12px;
padding: 28px 32px;
margin-bottom: 32px;
}
.lab-section-header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--lab-border);
}
.lab-section-title {
font-size: 16px;
font-weight: 700;
color: var(--lab-gold);
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0;
}
.lab-section-stamp {
font-size: 11px;
color: var(--lab-text-mute);
font-family: var(--lab-font-mono);
letter-spacing: 0.08em;
}
/* ─── /lab/asset/{SYMBOL}/ page ───────────────────────── */
.lab-asset-main { padding-top: 80px; }
.lab-asset-crumb {
font-size: 12px;
color: var(--lab-text-mute);
letter-spacing: 0.06em;
margin-bottom: 16px;
display: flex;
gap: 8px;
align-items: center;
}
.lab-asset-crumb a { color: var(--lab-gold); text-decoration: none; }
.lab-asset-crumb a:hover { text-decoration: underline; }
.lab-asset-crumb-sep { color: var(--lab-border); }
/* Hero */
.lab-asset-hero { padding: 28px 32px; }
.lab-asset-hero-wrap {
display: grid;
grid-template-columns: 84px 1fr auto;
gap: 24px;
align-items: center;
}
.lab-asset-elem-badge {
width: 84px; height: 84px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-family: "Songti SC", "STSong", serif;
font-weight: 900;
font-size: 52px;
color: var(--lab-ivory);
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
background: #3a3530;
box-shadow: 0 0 24px rgba(212, 175, 55, 0.18);
}
.lab-asset-elem-badge[data-element="木"] { background: #27ae60; }
.lab-asset-elem-badge[data-element="火"] { background: #c0392b; }
.lab-asset-elem-badge[data-element="土"] { background: #c9a227; color: #2a1e08; }
.lab-asset-elem-badge[data-element="金"] { background: #95a5a6; color: #1a1e22; }
.lab-asset-elem-badge[data-element="水"] { background: #2980b9; }
.lab-asset-badge-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.lab-asset-badge-source {
font-size: 10px;
color: var(--lab-text-mute);
letter-spacing: 0.18em;
text-transform: none;
font-family: var(--lab-font-sans);
white-space: nowrap;
}
/* 板块属性 vs 本命五行 区分：section 标题旁的小字注释 */
.lab-section-note {
font-family: var(--lab-font-sans);
font-size: 11px;
font-weight: 400;
color: var(--lab-text-mute);
letter-spacing: 0.04em;
margin-left: 10px;
text-transform: none;
}
.lab-asset-symbol {
font-family: var(--lab-font-mono);
font-size: 44px;
font-weight: 800;
color: var(--lab-ivory);
letter-spacing: 0.04em;
margin: 0;
line-height: 1.0;
}
.lab-asset-name-cn {
font-size: 14px;
color: var(--lab-text-dim);
margin: 6px 0 4px;
}
.lab-asset-sector-line {
font-size: 13px;
color: var(--lab-text-mute);
letter-spacing: 0.04em;
margin: 0;
}
.lab-asset-dot { color: var(--lab-border); margin: 0 6px; }
.lab-asset-price-block { text-align: right; }
.lab-asset-price {
font-family: var(--lab-font-mono);
font-size: 28px;
font-weight: 700;
color: var(--lab-gold);
line-height: 1;
}
.lab-asset-change {
font-family: var(--lab-font-mono);
font-size: 14px;
font-weight: 700;
margin-top: 6px;
}
.lab-asset-change[data-direction="up"] { color: var(--lab-good); }
.lab-asset-change[data-direction="down"] { color: var(--lab-bad); }
.lab-asset-score-pill {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin-top: 10px;
padding: 4px 12px;
border: 1px solid var(--lab-border-strong);
border-radius: 16px;
background: var(--lab-bg-card);
font-family: var(--lab-font-mono);
font-size: 13px;
}
.lab-asset-score-label { color: var(--lab-text-mute); font-family: var(--lab-font-sans); letter-spacing: 0.08em; font-size: 11px; }
.lab-asset-score-val { font-weight: 700; }
.lab-asset-score-val[data-direction="up"] { color: var(--lab-good); }
.lab-asset-score-val[data-direction="down"] { color: var(--lab-bad); }
/* ── 模块3: 大运信号灯（hero 右下） ─────────────── */
.lab-asset-dayun-badge {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-top: 8px;
padding: 4px 12px;
border-radius: 16px;
font-family: var(--lab-font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
border: 1px solid transparent;
transition: transform 0.2s ease;
cursor: help;
}
.lab-asset-dayun-badge .lab-asset-dayun-arrow { font-size: 14px; line-height: 1; }
.lab-asset-dayun-badge[data-kind="thriving"] {
background: rgba(95, 179, 116, 0.16);
color: var(--lab-good);
border-color: rgba(95, 179, 116, 0.45);
animation: dayun-pulse 1.8s ease-in-out infinite;
}
.lab-asset-dayun-badge[data-kind="neutral"] {
background: rgba(212, 175, 55, 0.14);
color: var(--lab-gold);
border-color: rgba(212, 175, 55, 0.40);
}
.lab-asset-dayun-badge[data-kind="adverse"] {
background: rgba(212, 52, 42, 0.12);
color: var(--lab-bad);
border-color: rgba(212, 52, 42, 0.35);
opacity: 0.85;
}
@keyframes dayun-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(95, 179, 116, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(95, 179, 116, 0); }
}
/* Natal */
.lab-asset-genesis {
font-size: 13px;
color: var(--lab-text-dim);
margin: 0 0 16px;
letter-spacing: 0.02em;
}
.lab-asset-pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 20px;
}
/* 外壳：仅承载标签 + flip wrap，无背景（背景下沉到 face） */
.lab-asset-pillar {
text-align: center;
position: relative;
transition: transform 0.2s ease;
}
.lab-asset-pillar-label {
font-size: 11px;
color: var(--lab-text-mute);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 8px;
}
/* 模块1: 3D 翻牌 ─────────────────────────────────── */
.lab-asset-pillar-flip-wrap {
perspective: 1000px;
height: 160px;
position: relative;
}
.lab-asset-pillar-flipper {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
/* 初始背面朝前 (rotateY 180) → 动画到正面 (rotateY 0) */
transform: rotateY(180deg);
animation: pillar-flip 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
/* animation-delay 通过 inline style 注入 stagger 0 / 0.3 / 0.6 / 0.9s */
}
@keyframes pillar-flip {
from { transform: rotateY(180deg); }
to { transform: rotateY(0deg); }
}
.lab-asset-pillar-face {
position: absolute;
inset: 0;
border-radius: 10px;
border: 1px solid var(--lab-border);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
}
.lab-asset-pillar-front {
background: var(--lab-bg-card);
transform: rotateY(0deg);
}
.lab-asset-pillar-back {
background: linear-gradient(140deg, #1a1410 0%, #251c14 100%);
color: var(--lab-gold);
transform: rotateY(180deg);
border-color: rgba(212, 175, 55, 0.35);
text-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}
.lab-bagua-trigram {
font-size: 56px;
line-height: 1;
letter-spacing: 0.02em;
}
.lab-bagua-name {
font-family: "Songti SC", "STSong", serif;
font-size: 14px;
margin-top: 8px;
letter-spacing: 0.1em;
opacity: 0.85;
}
.lab-pillar-stem, .lab-pillar-branch {
font-family: "Songti SC", "STSong", serif;
font-size: 32px;
font-weight: 700;
line-height: 1.08;
}
.lab-pillar-branch { margin-top: 2px; }
.lab-asset-pillar-elem {
font-size: 13px;
font-weight: 700;
margin-top: 8px;
letter-spacing: 0.1em;
}
/* 五行色：前面的天干 / 地支 / 属性字 都按 data-element 取色 */
.lab-asset-pillar[data-element="木"] .lab-asset-pillar-front { color: #5FB374; border-color: rgba(95, 179, 116, 0.45); }
.lab-asset-pillar[data-element="火"] .lab-asset-pillar-front { color: #E8554B; border-color: rgba(232, 85, 75, 0.45); }
.lab-asset-pillar[data-element="土"] .lab-asset-pillar-front { color: var(--lab-gold); border-color: rgba(212, 175, 55, 0.45); }
.lab-asset-pillar[data-element="金"] .lab-asset-pillar-front { color: #B5B5B5; border-color: rgba(181, 181, 181, 0.45); }
.lab-asset-pillar[data-element="水"] .lab-asset-pillar-front { color: #5F9EB3; border-color: rgba(95, 158, 179, 0.45); }
.lab-asset-pillar-elem { opacity: 0.85; }
/* 日柱：金色加边 + 持续浮动 */
.lab-asset-pillar-daymaster .lab-asset-pillar-front {
box-shadow: 0 0 0 2px var(--lab-gold) inset, 0 0 24px rgba(212, 175, 55, 0.18);
background: rgba(212, 175, 55, 0.04);
}
.lab-asset-pillar-daymaster .lab-asset-pillar-flip-wrap {
animation: pillar-float 3.6s ease-in-out infinite;
animation-delay: 1.6s; /* 等翻牌结束后开始飘 */
}
@keyframes pillar-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* hover：整张牌轻微上浮 + 阴影加深（不与 flip 冲突） */
.lab-asset-pillar:hover { transform: translateY(-4px); }
.lab-asset-pillar:hover .lab-asset-pillar-front {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
.lab-asset-pillar-daymaster:hover .lab-asset-pillar-front {
box-shadow: 0 0 0 2px var(--lab-gold) inset, 0 8px 28px rgba(212, 175, 55, 0.35);
}
/* ── 模块1.5: 五行能量环形图 ──────────────────────── */
.lab-asset-natal-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
.lab-asset-natal-left { min-width: 0; }
.lab-asset-donut-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.lab-asset-donut { display: block; }
.lab-asset-donut-arc {
/* 初始 stroke-dasharray="0 C"，transition 在 JS 里激活 */
transition: none;
}
.lab-asset-donut-arc.is-dom {
filter: drop-shadow(0 0 4px currentColor);
animation: donut-dom-pulse 2.4s ease-in-out infinite;
animation-delay: 1.6s;
}
@keyframes donut-dom-pulse {
0%, 100% { filter: drop-shadow(0 0 3px currentColor); }
50% { filter: drop-shadow(0 0 10px currentColor); }
}
.lab-asset-donut-center-label {
fill: var(--lab-text-mute);
font-size: 11px;
letter-spacing: 0.16em;
font-family: var(--lab-font-sans);
}
.lab-asset-donut-center-val {
font-family: "Songti SC", "STSong", serif;
font-size: 32px;
font-weight: 700;
}
.lab-asset-natal-meta { font-size: 14px; color: var(--lab-text-dim); }
.lab-asset-natal-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.lab-asset-natal-label {
font-size: 11px;
letter-spacing: 0.18em;
color: var(--lab-text-mute);
text-transform: uppercase;
}
.lab-asset-natal-strong { font-size: 18px; font-family: "Songti SC", serif; }
.lab-asset-natal-elem-list { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lab-asset-natal-elem-chip {
display: inline-block;
padding: 4px 10px;
border: 1px solid var(--lab-border);
border-radius: 12px;
font-size: 12px;
color: var(--lab-text-dim);
font-family: var(--lab-font-mono);
}
.lab-asset-natal-elem-chip[data-is-dom="true"] {
border-color: var(--lab-gold);
color: var(--lab-gold);
font-weight: 700;
}
.lab-asset-natal-elem-chip[data-is-miss="true"] {
border-color: rgba(212, 52, 42, 0.45);
color: #E8554B;
opacity: 0.85;
}
.lab-asset-natal-narrative {
margin-top: 16px;
font-size: 13px;
line-height: 1.7;
color: var(--lab-text-dim);
padding: 14px 16px;
background: rgba(212, 175, 55, 0.04);
border-left: 2px solid var(--lab-gold);
border-radius: 4px;
}
.lab-asset-natal-empty p {
font-size: 13px;
color: var(--lab-text-mute);
line-height: 1.7;
padding: 18px;
background: var(--lab-bg-card);
border: 1px dashed var(--lab-border-strong);
border-radius: 6px;
}
/* Today overlay */
.lab-asset-overlay-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 8px;
padding: 18px 22px;
margin-bottom: 16px;
}
.lab-asset-overlay-row {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.lab-asset-overlay-label {
font-size: 11px;
letter-spacing: 0.18em;
color: var(--lab-text-mute);
text-transform: uppercase;
}
.lab-asset-overlay-val {
font-family: "Songti SC", serif;
font-size: 22px;
font-weight: 700;
color: var(--lab-ivory);
}
.lab-asset-overlay-unit {
font-size: 13px;
color: var(--lab-text-mute);
margin-left: 4px;
font-family: var(--lab-font-mono);
font-weight: 400;
}
.lab-asset-match-label {
display: inline-block;
margin-left: 12px;
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
font-family: var(--lab-font-sans);
vertical-align: middle;
}
.lab-asset-match-label[data-label="顺位"] { background: rgba(95, 179, 116, 0.18); color: var(--lab-good); }
.lab-asset-match-label[data-label="次顺"] { background: rgba(95, 179, 116, 0.10); color: var(--lab-good); }
.lab-asset-match-label[data-label="中性"] { background: rgba(255, 255, 255, 0.08); color: var(--lab-text-mute); }
.lab-asset-match-label[data-label="次逆"] { background: rgba(232, 85, 75, 0.10); color: var(--lab-bad); }
.lab-asset-match-label[data-label="逆位"] { background: rgba(232, 85, 75, 0.18); color: var(--lab-bad); }
.lab-asset-overlay-narrative {
font-size: 14px;
line-height: 1.7;
color: var(--lab-text-dim);
margin: 0;
}
/* Trend placeholder */
.lab-asset-trend {
background: var(--lab-bg-card);
border: 1px dashed var(--lab-border-strong);
border-radius: 6px;
padding: 28px 24px;
text-align: center;
}
.lab-asset-trend-placeholder {
font-size: 13px;
color: var(--lab-text-mute);
margin: 0;
line-height: 1.7;
}
/* CTA */
.lab-asset-cta-section { text-align: center; padding: 32px; }
.lab-asset-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--lab-gold) 0%, #B5953A 100%);
color: var(--lab-bg);
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.12em;
transition: transform 0.15s, box-shadow 0.2s;
}
.lab-asset-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
}
.lab-asset-cta-arrow { font-size: 18px; }
.lab-asset-disclaimer {
font-size: 11px;
color: var(--lab-text-mute);
margin-top: 12px;
}
/* ── 模块2: 大运时间轴 ─────────────────────────────────── */
.lab-asset-dayun-scroll {
overflow-x: auto;
overflow-y: visible;
margin: 0 -24px 20px;
padding: 4px 24px 12px;
scrollbar-width: thin;
scrollbar-color: var(--lab-border-strong) transparent;
}
.lab-asset-dayun-scroll::-webkit-scrollbar { height: 6px; }
.lab-asset-dayun-scroll::-webkit-scrollbar-thumb { background: var(--lab-border-strong); border-radius: 3px; }
.lab-asset-dayun-track {
display: flex;
gap: 8px;
align-items: stretch;
min-width: max-content;
}
.lab-asset-dayun-block {
flex: 0 0 auto;
width: 96px;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 8px;
padding: 10px 8px;
text-align: center;
position: relative;
font-family: var(--lab-font-sans);
opacity: 0;
transform: translateX(-12px);
animation: dayun-block-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
cursor: default;
transition: transform 0.2s ease, border-color 0.2s ease;
}
@keyframes dayun-block-in {
to { opacity: 1; transform: translateX(0); }
}
.lab-asset-dayun-block:hover { transform: translateY(-2px); }
.lab-asset-dayun-block-label {
font-size: 10px;
color: var(--lab-text-mute);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 6px;
min-height: 14px;
}
.lab-asset-dayun-block-gz {
font-family: "Songti SC", "STSong", serif;
font-size: 22px;
font-weight: 700;
line-height: 1.05;
color: var(--lab-ivory);
}
.lab-asset-dayun-block-elem {
font-size: 11px;
margin-top: 4px;
letter-spacing: 0.08em;
opacity: 0.85;
}
.lab-asset-dayun-block-bar {
height: 4px;
margin: 8px 0 6px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
}
.lab-asset-dayun-block-year {
font-family: var(--lab-font-mono);
font-size: 10px;
color: var(--lab-text-mute);
letter-spacing: 0.02em;
}
/* 五行颜色给文字 + bar */
.lab-asset-dayun-block[data-element="木"] .lab-asset-dayun-block-elem { color: #5FB374; }
.lab-asset-dayun-block[data-element="火"] .lab-asset-dayun-block-elem { color: #E8554B; }
.lab-asset-dayun-block[data-element="土"] .lab-asset-dayun-block-elem { color: var(--lab-gold); }
.lab-asset-dayun-block[data-element="金"] .lab-asset-dayun-block-elem { color: #B5B5B5; }
.lab-asset-dayun-block[data-element="水"] .lab-asset-dayun-block-elem { color: #5F9EB3; }
.lab-asset-dayun-block[data-element="木"] .lab-asset-dayun-block-bar { background: rgba(95, 179, 116, 0.4); }
.lab-asset-dayun-block[data-element="火"] .lab-asset-dayun-block-bar { background: rgba(232, 85, 75, 0.4); }
.lab-asset-dayun-block[data-element="土"] .lab-asset-dayun-block-bar { background: rgba(212, 175, 55, 0.4); }
.lab-asset-dayun-block[data-element="金"] .lab-asset-dayun-block-bar { background: rgba(181, 181, 181, 0.4); }
.lab-asset-dayun-block[data-element="水"] .lab-asset-dayun-block-bar { background: rgba(95, 158, 179, 0.4); }
/* 当前大运：金边 + glow（用 ::after 单独承载脉冲，避免与 entry animation 冲突） */
.lab-asset-dayun-block[data-state="current"] {
border-color: var(--lab-gold);
background: rgba(212, 175, 55, 0.08);
}
.lab-asset-dayun-block[data-state="current"]::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 8px;
pointer-events: none;
box-shadow: 0 0 0 1px var(--lab-gold) inset, 0 0 18px rgba(212, 175, 55, 0.35);
animation: dayun-current-glow 2.4s ease-in-out infinite;
animation-delay: 1.2s;
}
@keyframes dayun-current-glow {
0%, 100% { box-shadow: 0 0 0 1px var(--lab-gold) inset, 0 0 14px rgba(212, 175, 55, 0.30); }
50% { box-shadow: 0 0 0 1px var(--lab-gold) inset, 0 0 24px rgba(212, 175, 55, 0.60); }
}
.lab-asset-dayun-block[data-state="current"] .lab-asset-dayun-block-label {
color: var(--lab-gold);
font-weight: 700;
}
.lab-asset-dayun-block[data-state="current"] .lab-asset-dayun-block-bar {
background: var(--lab-gold);
height: 6px;
}
/* 过去大运：半透明 */
.lab-asset-dayun-block[data-state="past"] {
opacity: 0.45;
filter: saturate(0.6);
}
.lab-asset-dayun-block[data-state="past"]:hover { opacity: 0.7; }
/* 得令大运（未来 + 五行得今日令）：bar 亮 */
.lab-asset-dayun-block[data-favored="true"][data-state="future"] .lab-asset-dayun-block-bar {
height: 6px;
box-shadow: 0 0 8px currentColor;
}
.lab-asset-dayun-block[data-favored="true"][data-state="future"] .lab-asset-dayun-block-gz {
color: var(--lab-ivory);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}
/* 逆运大运（官杀 + 未来）：稍暗 */
.lab-asset-dayun-block[data-adverse="true"][data-state="future"] {
opacity: 0.7;
}
/* 创世节点：竖线起点 */
.lab-asset-dayun-genesis {
width: 72px;
background: transparent;
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 14px;
}
.lab-asset-dayun-genesis::after {
content: '';
position: absolute;
right: -4px;
top: 24px;
bottom: 24px;
width: 1px;
background: linear-gradient(180deg, rgba(212, 175, 55, 0.8) 0%, rgba(212, 175, 55, 0.1) 100%);
}
.lab-asset-dayun-block-sym {
color: var(--lab-gold);
font-size: 24px;
line-height: 1;
margin-bottom: 8px;
}
.lab-asset-dayun-genesis .lab-asset-dayun-block-label { color: var(--lab-gold); font-weight: 700; }
/* 当前大运详情卡 */
.lab-asset-dayun-detail-card {
background: linear-gradient(180deg, rgba(212, 175, 55, 0.08) 0%, var(--lab-bg-card) 100%);
border: 1px solid var(--lab-gold);
border-radius: 10px;
padding: 18px 20px;
}
.lab-asset-dayun-detail-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 10px;
}
.lab-asset-dayun-detail-label {
font-size: 11px;
color: var(--lab-gold);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.lab-asset-dayun-detail-gz {
font-family: "Songti SC", "STSong", serif;
font-size: 26px;
color: var(--lab-ivory);
letter-spacing: 0.04em;
}
.lab-asset-dayun-detail-meta {
font-size: 13px;
color: var(--lab-text-dim);
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 6px;
}
.lab-asset-dayun-detail-sep { color: var(--lab-border-strong); margin: 0 2px; }
.lab-asset-dayun-detail-signal {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 14px;
font-size: 13px;
font-weight: 700;
font-family: var(--lab-font-mono);
margin-bottom: 10px;
letter-spacing: 0.04em;
}
.lab-asset-dayun-detail-signal[data-kind="thriving"] {
background: rgba(95, 179, 116, 0.16);
color: var(--lab-good);
border: 1px solid rgba(95, 179, 116, 0.45);
}
.lab-asset-dayun-detail-signal[data-kind="neutral"] {
background: rgba(212, 175, 55, 0.12);
color: var(--lab-gold);
border: 1px solid rgba(212, 175, 55, 0.40);
}
.lab-asset-dayun-detail-signal[data-kind="adverse"] {
background: rgba(212, 52, 42, 0.10);
color: var(--lab-bad);
border: 1px solid rgba(212, 52, 42, 0.35);
}
.lab-asset-dayun-detail-narrative {
font-size: 13px;
color: var(--lab-text);
line-height: 1.7;
margin: 0;
}
@media (max-width: 760px) {
.lab-asset-hero-wrap { grid-template-columns: 64px 1fr; }
.lab-asset-elem-badge { width: 64px; height: 64px; font-size: 38px; }
.lab-asset-symbol { font-size: 32px; }
.lab-asset-price-block { grid-column: 1 / -1; text-align: left; margin-top: 12px; }
.lab-asset-pillars { grid-template-columns: repeat(2, 1fr); }
.lab-asset-overlay-card { grid-template-columns: 1fr; }
/* 模块1: 移动端 3D 翻牌保留，环形图改为下方堆叠 */
.lab-asset-natal-grid { grid-template-columns: 1fr; gap: 16px; }
.lab-asset-donut-wrap { order: -1; }
.lab-asset-pillar-flip-wrap { height: 140px; }
.lab-bagua-trigram { font-size: 44px; }
.lab-pillar-stem, .lab-pillar-branch { font-size: 26px; }
/* 模块2: 移动端时间轴变窄 */
.lab-asset-dayun-block { width: 80px; padding: 8px 6px; }
.lab-asset-dayun-block-gz { font-size: 18px; }
}
/* reduced-motion: 关闭翻牌动画 + 浮动 + 环形脉冲 */
@media (prefers-reduced-motion: reduce) {
.lab-asset-pillar-flipper { animation: none; transform: rotateY(0deg); }
.lab-asset-pillar-daymaster .lab-asset-pillar-flip-wrap { animation: none; }
.lab-asset-donut-arc.is-dom { animation: none; }
.lab-asset-donut-arc { transition: none !important; }
/* 宇宙图：关闭所有持续动效，仅保留 hover scale */
.lab-universe-elem-big,
.lab-universe-cell,
.lab-universe-cell.energy-pulse,
.lab-universe-cell.energy-pulse .lab-universe-elem-big,
.lab-universe-rel-chip { animation: none !important; }
.lab-universe-cell.energy-pulse::after { animation: none !important; display: none; }
.lab-universe-elem-big { transform: none !important; }
/* 升级动效：reduced-motion 只保留动效2(得令爆发) 且幅度减半，关闭动效1/3 的位移 */
.lab-universe-cell.uv-wave-on,
.lab-universe-cell.uv-spin-on,
.lab-universe-cell.uv-spin-dom {
transform: none !important;
filter: none !important;
box-shadow: none !important;
}
.lab-universe-cell.uv-wave-on .lab-universe-elem-big { transform: none !important; }
.lab-universe-relations.uv-spin-flash .lab-universe-rel-chip { animation: none !important; }
.lab-universe-cell[data-kind="good"].uv-burst { animation: uv-burst-pop-soft .6s ease; }
.lab-universe-cell[data-kind="good"].uv-burst::after { animation: none !important; display: none; }
.lab-universe-cell[data-kind="bad"].uv-burst { transform: none !important; opacity: 0.85; }
@keyframes uv-burst-pop-soft {
0% { transform: scale(1); }
40% { transform: scale(1.04); border-color: rgba(255,255,255,.7); }
100% { transform: scale(1); }
}
}
/* 移动端：保留 ①汉字浮动 ②得令光晕 + 动效2(得令爆发)，关闭动效1/3（省电）*/
@media (max-width: 640px) {
.lab-universe-cell[data-kind="bad"],
.lab-universe-cell[data-kind="neutral"] {
animation: lab-universe-pop 480ms cubic-bezier(0.18, 0.9, 0.32, 1.18) backwards;
}
/* CSS 安全网：即使 JS 漏判，移动端也不出现动效1/3 的位移 */
.lab-universe-cell.uv-wave-on,
.lab-universe-cell.uv-spin-on,
.lab-universe-cell.uv-spin-dom {
transform: none !important;
filter: none !important;
box-shadow: none !important;
}
.lab-universe-cell.uv-wave-on .lab-universe-elem-big { transform: none !important; }
.lab-universe-relations.uv-spin-flash .lab-universe-rel-chip { animation: none !important; }
}
/* ─── Section 0 · WUXING UNIVERSE (treemap heatmap) ───── */
.lab-universe-section {
background: linear-gradient(180deg, var(--lab-bg-elev) 0%, var(--lab-bg) 100%);
}
.lab-universe-meta {
font-size: 13px;
color: var(--lab-text-dim);
letter-spacing: 0.04em;
margin: 0 0 8px;
}
/* 生克四关系简报 */
.lab-universe-relations {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin: 0 0 14px;
font-size: 13px;
letter-spacing: 0.02em;
font-weight: 600;
}
.lab-universe-rel-chip {
display: inline-flex;
align-items: baseline;
gap: 2px;
padding: 2px 8px;
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.lab-universe-rel-chip[data-kind="good"] { border-color: rgba(95, 179, 116, 0.35); }
.lab-universe-rel-chip[data-kind="bad"] { border-color: rgba(232, 85, 75, 0.35); }
.lab-universe-rel-chip[data-kind="neutral"] { opacity: 0.65; }
.lab-universe-rel-arrow { font-weight: 800; }
.lab-universe-rel-chip[data-kind="good"] .lab-universe-rel-arrow { color: #5FB374; }
.lab-universe-rel-chip[data-kind="bad"] .lab-universe-rel-arrow { color: #E8554B; }
.lab-universe-rel-chip[data-kind="neutral"] .lab-universe-rel-arrow { color: var(--lab-text-mute); }
.lab-universe-rel-sep { color: var(--lab-border); margin: 0 2px; opacity: 0.5; }
/* 顶部状态栏：得令/生扶绿光脉冲，被克/失位暗红慢闪 */
.lab-universe-rel-chip[data-kind="good"] {
animation: uv-relchip-good 2.4s ease-in-out infinite;
}
@keyframes uv-relchip-good {
0%, 100% { box-shadow: 0 0 3px 0 rgba(95, 179, 116, 0.3); }
50% { box-shadow: 0 0 12px 2px rgba(95, 179, 116, 0.75); }
}
.lab-universe-rel-chip[data-kind="bad"] {
animation: uv-relchip-bad 4.5s ease-in-out infinite;
}
@keyframes uv-relchip-bad {
0%, 100% { opacity: 0.62; box-shadow: 0 0 2px 0 rgba(232, 85, 75, 0.2); }
50% { opacity: 1; box-shadow: 0 0 9px 1px rgba(168, 40, 35, 0.55); }
}
.lab-universe {
position: relative;
width: 100%;
height: 420px;
background: #050304;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.06) inset;
}
.lab-universe-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--lab-text-mute);
font-size: 13px;
letter-spacing: 0.14em;
}
/* 元素 → glow color 变量 + 八卦背景图 */
.lab-universe-cell[data-element="木"] {
--glow: rgba(39, 174, 96, 0.9);
--elem-text: var(--lab-ivory);
/* 震卦 ☳: 阴阴阳 (上→下) */
background-image: url('data:image/svg+xml;utf8,');
}
.lab-universe-cell[data-element="火"] {
--glow: rgba(192, 57, 43, 0.9);
--elem-text: #FFE6D6;
/* 离卦 ☲: 阳阴阳 */
background-image: url('data:image/svg+xml;utf8,');
}
.lab-universe-cell[data-element="土"] {
--glow: rgba(201, 162, 39, 0.9);
--elem-text: #2a1e08;
/* 坤卦 ☷: 阴阴阴 */
background-image: url('data:image/svg+xml;utf8,');
}
.lab-universe-cell[data-element="金"] {
--glow: rgba(149, 165, 166, 0.9);
--elem-text: #1a1e22;
/* 兑卦 ☱: 阴阳阳 */
background-image: url('data:image/svg+xml;utf8,');
}
.lab-universe-cell[data-element="水"] {
--glow: rgba(41, 128, 185, 0.9);
--elem-text: #DCEEFB;
/* 坎卦 ☵: 阴阳阴 */
background-image: url('data:image/svg+xml;utf8,');
}
.lab-universe-cell {
position: absolute;
overflow: hidden;
box-sizing: border-box;
border: 2px solid #050304;
border-radius: 3px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center 18%;
background-size: 60% auto;
/* filter/opacity transition 挂在基类上 → 即使 .uv-spinning 被移除，
回归 [data-status] 滤镜也走 0.3s 平滑过渡（修复轮盘退场黑块闪烁根因） */
transition: transform 0.18s, z-index 0s 0.18s,
filter 0.3s ease, opacity 0.3s ease;
transform-origin: center;
outline: none;
/* base pop-in；得令/失令 选择器后面会额外叠加动画 */
animation: lab-universe-pop 480ms cubic-bezier(0.18, 0.9, 0.32, 1.18) backwards;
}
@keyframes lab-universe-pop {
0% { transform: scale(0.55); opacity: 0; }
60% { transform: scale(1.03); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* 得令系列：glow-pulse 呼吸动画（pop 480ms 后接 glow 无限循环） */
.lab-universe-cell[data-kind="good"] {
animation:
lab-universe-pop 480ms cubic-bezier(0.18, 0.9, 0.32, 1.18) backwards,
glow-pulse 2s ease-in-out 480ms infinite;
}
/* ② 得令呼吸光晕（加强）：12px → 32px → 12px（得令色 --glow） */
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 12px 2px var(--glow, transparent); }
50% { box-shadow: 0 0 32px 8px var(--glow, transparent),
0 0 0 1px var(--glow, transparent) inset; }
}
/* ③ 失令微闪烁：0.82 → 0.95 → 0.82（慢速若隐若现） */
.lab-universe-cell[data-kind="bad"] {
animation:
lab-universe-pop 480ms cubic-bezier(0.18, 0.9, 0.32, 1.18) backwards,
dim-flicker 3.3s ease-in-out 480ms infinite;
}
@keyframes dim-flicker {
0%, 100% { opacity: 0.82; }
50% { opacity: 0.95; }
}
/* ④ 平势轻微脉冲：0.9 → 1.0 → 0.9（极慢，有生气不抢眼） */
.lab-universe-cell[data-kind="neutral"] {
animation:
lab-universe-pop 480ms cubic-bezier(0.18, 0.9, 0.32, 1.18) backwards,
uv-mid-pulse 4.2s ease-in-out 480ms infinite;
}
@keyframes uv-mid-pulse {
0%, 100% { opacity: 0.9; }
50% { opacity: 1; }
}
/* ── 定时能量波（JS 每 8s 给 4-6 个得令块加 .energy-pulse）── */
.lab-universe-cell.energy-pulse {
transform: scale(1.05);
transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
z-index: 6;
}
.lab-universe-cell.energy-pulse::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 4px;
border: 2px solid rgba(255, 255, 255, 0.92);
box-shadow: 0 0 24px 6px var(--glow, rgba(255, 255, 255, 0.6));
pointer-events: none;
z-index: 7;
animation: uv-energy-ring 0.8s ease-out forwards;
}
@keyframes uv-energy-ring {
0% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 0; }
}
.lab-universe-cell.energy-pulse .lab-universe-elem-big {
animation: uv-char-zoom 0.4s ease-out;
}
@keyframes uv-char-zoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* ── hover 联动（JS 给同/相生/相克块加 class）── */
.lab-universe.uv-hovering .lab-universe-cell {
transition: opacity 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}
.lab-universe-cell.uv-rel-same {
box-shadow: 0 0 0 2px var(--glow, #fff), 0 0 16px 3px var(--glow, #fff);
z-index: 4;
}
.lab-universe-cell.uv-rel-sheng { filter: brightness(1.14) saturate(1.12); }
.lab-universe-cell.uv-rel-ke { opacity: 0.55; }
/* ══ 三种循环冲击动效（JS 每 ~3s 轮换，class toggle + Promise 时序）══ */
/* 动效1 · 能量涌潮：木→火→土→金→水 依次点亮 */
.lab-universe-cell.uv-wave-on {
transform: scale(1.06);
box-shadow: 0 0 30px 9px var(--glow, #fff), 0 0 0 1px var(--glow, #fff) inset;
z-index: 6;
transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.28s ease;
}
.lab-universe-cell.uv-wave-on .lab-universe-elem-big {
transform: scale(1.15) !important;
transition: transform 0.28s ease;
}
/* 动效2 · 得令爆发：得令涌现 + 扩散光环，失令退缩 */
.lab-universe-cell[data-kind="good"].uv-burst {
animation: uv-burst-pop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
z-index: 6;
}
@keyframes uv-burst-pop {
0% { transform: scale(1); border-color: #050304; }
40% { transform: scale(1.08); border-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 26px 7px var(--glow, #fff); }
100% { transform: scale(1); border-color: #050304; }
}
.lab-universe-cell[data-kind="good"].uv-burst::after {
content: ""; position: absolute; inset: -2px; border-radius: 4px;
border: 2px solid var(--glow, #fff); pointer-events: none; z-index: 7;
animation: uv-burst-ring 0.8s ease-out forwards;
}
@keyframes uv-burst-ring {
0% { transform: scale(1); opacity: 0.95; }
100% { transform: scale(2); opacity: 0; }
}
.lab-universe-cell[data-kind="bad"].uv-burst {
transform: scale(0.96);
opacity: 0.7;
transition: transform 0.35s ease, opacity 0.35s ease;
}
/* 动效3 · 五行轮盘（修复黑块闪烁）：
进入 .uv-spinning 态后——
·非激活组：filter:none 中和 [data-status] 深滤镜(brightness0.4/grayscale0.7) +
统一柔和暗淡 opacity:0.5（≥0.4，永不动背景色，永不露黑底）
·激活/主导组：纯 brightness 提亮 + glow，不改背景色
·进退场均靠 base cell 的 filter/opacity 0.3s transition 平滑，杜绝瞬切黑块
选择器靠 .uv-spinning 祖先抬权重(0,0,3~4,0) 干净盖过 [data-status](0,0,2,0)，无需 !important */
.lab-universe.uv-spinning .lab-universe-cell {
filter: none;
opacity: 0.5;
}
.lab-universe.uv-spinning .lab-universe-cell.uv-spin-on {
filter: brightness(1.3) saturate(1.25);
opacity: 1;
box-shadow: 0 0 22px 5px var(--glow, #fff);
z-index: 5;
}
.lab-universe.uv-spinning .lab-universe-cell.uv-spin-dom {
filter: brightness(1.35) saturate(1.3);
opacity: 1;
box-shadow: 0 0 26px 7px var(--glow, #fff);
z-index: 5;
}
.lab-universe-relations.uv-spin-flash .lab-universe-rel-chip {
animation: uv-relchip-flash 0.5s ease-in-out;
}
@keyframes uv-relchip-flash {
0%, 100% { box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.2); }
50% { box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.7); }
}
/* 平：静止（仅 pop） */
.lab-universe-cell:hover,
.lab-universe-cell:focus-visible {
transform: scale(1.04);
z-index: 5;
transition: transform 0.18s, z-index 0s;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 8px 28px rgba(0, 0, 0, 0.7);
animation-play-state: paused;
}
/* 状态滤镜（与 sector heatmap 一致） */
.lab-universe-cell[data-status="大得令"] { filter: brightness(1.35) saturate(1.45); }
.lab-universe-cell[data-status="得令"] { filter: brightness(1.18) saturate(1.25); }
.lab-universe-cell[data-status="次得令"] { filter: brightness(1.05) saturate(1.10); }
.lab-universe-cell[data-status="平"] { filter: brightness(0.85) saturate(0.85); }
.lab-universe-cell[data-status="次失令"] { filter: brightness(0.65) saturate(0.6) grayscale(0.2); }
.lab-universe-cell[data-status="失令"] { filter: brightness(0.5) saturate(0.4) grayscale(0.5); }
.lab-universe-cell[data-status="大失令"] { filter: brightness(0.4) saturate(0.25) grayscale(0.7); }
/* 3 层结构 */
.lab-universe-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 6px;
pointer-events: none;
}
.lab-universe-elem-big {
/* 五行汉字 = 装饰性背景元素：小、淡、移到右上角，脱离 flex 流
→ .lab-universe-inner 改为只居中 [币名 + 状态行]，币名成视觉主角 */
position: absolute;
top: 3px;
right: 5px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 0.9;
color: var(--elem-text, #ffffff);
opacity: 0.5;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
pointer-events: none;
font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
/* ① 汉字持续浮动（周期/相位由 JS 按 cell index 写入 CSS 变量错开） */
animation: uv-char-float var(--uv-fdur, 4s) cubic-bezier(0.45, 0, 0.55, 1)
var(--uv-fdelay, 0s) infinite;
will-change: transform;
}
@keyframes uv-char-float {
0%, 100% { transform: translateY(-6px); }
50% { transform: translateY(6px); }
}
.lab-universe-asset {
/* 代币名 = 视觉主角：大、粗、亮、强阴影确保任意底色上清晰，居中压住装饰汉字 */
position: relative;
z-index: 1;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.05;
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.88), 0 0 3px rgba(0, 0, 0, 0.5);
margin-top: 0;
}
.lab-universe-status-row {
display: inline-flex;
align-items: baseline;
gap: 5px;
line-height: 1;
font-family: var(--lab-font-mono);
margin-top: 1px;
}
.lab-universe-status-label {
padding: 1px 5px;
border-radius: 3px;
font-weight: 700;
letter-spacing: 0.04em;
font-family: var(--lab-font-sans);
}
.lab-universe-status-label[data-kind="good"] { color: #1a3a23; background: rgba(160, 240, 188, 0.85); }
.lab-universe-status-label[data-kind="bad"] { color: #ffd8d0; background: rgba(232, 85, 75, 0.65); }
.lab-universe-status-label[data-kind="neutral"] { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.1); }
.lab-universe-status-score {
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.lab-universe-cell[data-element="土"] .lab-universe-status-score,
.lab-universe-cell[data-element="金"] .lab-universe-status-score {
color: rgba(20, 14, 8, 0.95);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}
/* Cell 内容显隐策略（由 JS 在 cell 上写 data-* 属性驱动，避免字符串匹配陷阱）：
- data-tiny="true"：极小 cell，只显示币名（隐藏元素字 + 状态行）
- data-no-elem-big="true"：中等小 cell，显示币名 + 状态（隐藏元素字）
- 都为 false：完整三层显示
注：50 资产模式下 w<45 || h<38 视为 tiny；w 45-75 视为 no-elem-big；w≥75 完整。
15 资产模式下 w<60 视为 tiny；其余完整。 */
.lab-universe-cell[data-tiny="true"] .lab-universe-elem-big,
.lab-universe-cell[data-tiny="true"] .lab-universe-status-row,
.lab-universe-cell[data-no-elem-big="true"] .lab-universe-elem-big {
display: none;
}
/* Tooltip popover — position: fixed so coords match viewport getBoundingClientRect()
(避免 tip 与 cell 处于不同 positioning context 的坐标系冲突) */
/* tooltip 恒为深色浮层 —— 文字/边框用固定浅色字面量，不吃主题变量
（主题变量在 light 模式翻深 → 深字深底不可读，故此处脱离变量） */
.lab-universe-tip {
position: fixed;
z-index: 9999;
background: rgba(44, 26, 14, 0.94);
border: 1px solid #c9a227;
border-radius: 6px;
padding: 10px 12px;
pointer-events: none;
font-size: 12px;
color: #f5e9d3;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
}
.lab-universe-tip[hidden] { display: none; }
.lab-universe-tip-head {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 6px;
font-size: 13px;
}
.lab-universe-tip-sep { color: rgba(245, 233, 211, 0.5); }
.lab-universe-tip-price {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
font-family: var(--lab-font-mono);
font-size: 12px;
color: #f5e9d3;
}
.lab-universe-tip-price-val { font-weight: 700; color: #e8c66a; }
.lab-universe-tip-rank { color: rgba(245, 233, 211, 0.6); font-size: 11px; }
.lab-universe-tip-quote {
color: rgba(245, 233, 211, 0.86);
font-size: 12px;
line-height: 1.55;
margin-bottom: 4px;
}
.lab-universe-tip-status {
font-size: 11px;
color: rgba(245, 233, 211, 0.65);
font-family: var(--lab-font-mono);
letter-spacing: 0.08em;
}
/* Legend */
.lab-universe-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin: 12px 0 0;
font-size: 11px;
color: var(--lab-text-mute);
letter-spacing: 0.04em;
}
.lab-universe-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: 3px;
vertical-align: middle;
}
.lab-universe-legend-sep { color: var(--lab-border); margin: 0 2px; }
.lab-universe-legend-note { color: var(--lab-text-mute); }
@media (max-width: 760px) {
.lab-universe { height: 280px; }
.lab-universe-asset { font-size: 13px; }
.lab-universe-elem { font-size: 10px; }
.lab-universe-score { font-size: 11px; }
}
/* MarketDay header */
.lab-md-header {
display: flex;
gap: 18px;
align-items: baseline;
margin-bottom: 22px;
flex-wrap: wrap;
}
.lab-md-date {
font-family: var(--lab-font-mono);
font-size: 18px;
color: var(--lab-ivory);
letter-spacing: 0.06em;
}
.lab-md-lunar { font-size: 14px; color: var(--lab-text-dim); }
.lab-md-solar-term {
font-size: 12px;
color: var(--lab-gold);
border: 1px solid var(--lab-border);
padding: 2px 10px;
border-radius: 4px;
}
/* MarketDay grid: pillars + radar */
.lab-md-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
margin-bottom: 28px;
}
.lab-md-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.lab-md-pillar {
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 8px;
padding: 16px 12px;
text-align: center;
}
.lab-md-pillar-label {
font-size: 10px;
color: var(--lab-text-mute);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 8px;
}
.lab-md-pillar-gz {
font-size: 32px;
font-weight: 700;
margin-bottom: 4px;
line-height: 1;
}
.lab-md-pillar-elem {
font-size: 11px;
color: var(--lab-text-dim);
letter-spacing: 0.1em;
}
/* 五行 Radar SVG */
.lab-md-radar-wrap { text-align: center; }
.lab-md-radar { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.lab-md-radar-readout {
margin-top: 8px;
font-size: 12px;
color: var(--lab-text-dim);
}
.lab-md-radar-readout strong { color: var(--lab-gold); }
/* Day Quality */
.lab-md-quality {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 22px;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 8px;
margin-bottom: 22px;
}
.lab-md-quality-score { display: flex; align-items: baseline; gap: 4px; }
.lab-md-quality-num {
font-size: 42px;
font-weight: 800;
color: var(--lab-gold);
font-family: var(--lab-font-mono);
}
.lab-md-quality-unit { font-size: 14px; color: var(--lab-text-mute); }
.lab-md-quality-label {
font-size: 20px;
font-weight: 700;
color: var(--lab-ivory);
padding: 4px 12px;
border: 1px solid var(--lab-border-strong);
border-radius: 4px;
}
.lab-md-quality-category {
font-size: 13px;
color: var(--lab-text-dim);
}
/* Narrative */
.lab-md-narrative,
.lab-sr-narrative,
.lab-tl-narrative {
font-size: 14px;
color: var(--lab-text-dim);
line-height: 1.9;
padding: 18px 22px;
background: var(--lab-bg-card);
border-left: 3px solid var(--lab-gold);
border-radius: 4px;
margin-bottom: 22px;
}
/* 4 时段 */
.lab-md-sessions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.lab-md-session-card {
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 6px;
padding: 12px 8px;
text-align: center;
}
.lab-md-session-name {
font-size: 11px;
color: var(--lab-text-mute);
letter-spacing: 0.12em;
margin-bottom: 6px;
}
.lab-md-session-score {
font-size: 22px;
font-weight: 700;
color: var(--lab-gold);
font-family: var(--lab-font-mono);
}
.lab-md-session-quality {
font-size: 11px;
color: var(--lab-text-dim);
margin-top: 4px;
}
/* ─── SectorRotation ──────────────────────────────────── */
.lab-sr-summary {
font-size: 13px;
color: var(--lab-text-dim);
margin-bottom: 20px;
font-family: var(--lab-font-mono);
}
.lab-sr-summary .lab-pill {
display: inline-block;
padding: 2px 10px;
border-radius: 4px;
margin: 0 4px;
font-size: 12px;
font-weight: 700;
}
.lab-sr-radar-wrap {
text-align: center;
margin-bottom: 28px;
}
.lab-sr-radar { width: 100%; max-width: 360px; height: auto; }
.lab-sr-lists {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.lab-sr-list-title {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--lab-border);
}
.lab-sr-list {
list-style: none;
padding: 0;
margin: 0;
}
.lab-sr-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
font-size: 14px;
color: var(--lab-text-dim);
border-bottom: 1px solid rgba(58, 21, 24, 0.5);
}
.lab-sr-list li:last-child { border-bottom: none; }
.lab-sr-list-name { color: var(--lab-ivory); }
.lab-sr-list-score {
font-family: var(--lab-font-mono);
font-weight: 700;
}
.lab-text-good { color: var(--lab-good); }
.lab-text-bad { color: var(--lab-bad); }
/* ─── TopList ─────────────────────────────────────────── */
.lab-tl-sub {
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 18px 0 12px;
}
.lab-tl-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 8px;
}
.lab-tl-grid-bottom { grid-template-columns: repeat(5, 1fr); }
.lab-tl-card {
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 8px;
padding: 14px 10px;
text-align: center;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, transform 0.2s;
}
.lab-tl-card:hover {
border-color: var(--lab-border-strong);
transform: translateY(-2px);
}
.lab-tl-card-rank {
font-size: 16px;
color: var(--lab-gold);
font-weight: 700;
margin-bottom: 4px;
}
.lab-tl-card-asset {
font-size: 18px;
font-weight: 800;
color: var(--lab-ivory);
margin-bottom: 6px;
}
.lab-tl-card-sector {
font-size: 10px;
color: var(--lab-text-mute);
margin-bottom: 6px;
letter-spacing: 0.05em;
min-height: 14px;
}
.lab-tl-card-score {
font-size: 14px;
font-family: var(--lab-font-mono);
font-weight: 700;
}
/* ─── Share buttons ──────────────────────────────────── */
.lab-share-intro {
font-size: 13px;
color: var(--lab-text-dim);
margin-bottom: 14px;
}
.lab-share-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.lab-share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border-strong);
border-radius: 6px;
color: var(--lab-gold);
text-decoration: none;
font-size: 13px;
letter-spacing: 0.1em;
transition: background 0.2s, opacity 0.2s;
}
.lab-share-btn:hover { background: rgba(212, 175, 55, 0.08); }
.lab-share-btn[aria-disabled="true"] {
opacity: 0.35;
pointer-events: none;
cursor: not-allowed;
}
.lab-share-disclaimer {
font-size: 11px;
color: var(--lab-text-mute);
margin-top: 8px;
}
/* ─── Footer ──────────────────────────────────────────── */
.lab-footer {
max-width: 1440px;
margin: 32px auto 0;
padding: 24px 32px 48px;
border-top: 1px solid var(--lab-border);
text-align: center;
font-size: 12px;
color: var(--lab-text-mute);
}
.lab-footer a { color: var(--lab-gold-dim); text-decoration: none; }
.lab-footer a:hover { color: var(--lab-gold); }
.lab-footer-meta {
font-family: var(--lab-font-mono);
font-size: 10px;
color: var(--lab-text-mute);
margin-top: 8px;
letter-spacing: 0.08em;
}
/* ─── Section 1 · MarketDay 重做 ──────────────────────── */
/* 粒子流动背景（纯 CSS） */
#lab-section-marketday { position: relative; overflow: hidden; }
.lab-md-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
#lab-section-marketday > :not(.lab-md-particles) { position: relative; z-index: 1; }
.lab-particle {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(232, 200, 110, 0.9) 0%, rgba(212, 175, 55, 0) 70%);
filter: blur(0.5px);
opacity: 0;
animation: lab-particle-drift 22s linear infinite;
}
.lab-particle:nth-child(1) { left: 8%; top: 70%; --dx: 220px; --dy: -180px; animation-delay: 0s; width: 5px; height: 5px; }
.lab-particle:nth-child(2) { left: 22%; top: 30%; --dx: -120px; --dy: 140px; animation-delay: 3s; width: 3px; height: 3px; }
.lab-particle:nth-child(3) { left: 40%; top: 88%; --dx: 80px; --dy: -260px; animation-delay: 6s; width: 6px; height: 6px; background: radial-gradient(circle, rgba(208, 70, 60, 0.75) 0%, rgba(212, 52, 42, 0) 70%); }
.lab-particle:nth-child(4) { left: 62%; top: 18%; --dx: -180px; --dy: 200px; animation-delay: 9s; width: 4px; height: 4px; }
.lab-particle:nth-child(5) { left: 78%; top: 65%; --dx: -100px; --dy: -120px; animation-delay: 12s; width: 5px; height: 5px; }
.lab-particle:nth-child(6) { left: 88%; top: 25%; --dx: -160px; --dy: 160px; animation-delay: 15s; width: 3px; height: 3px; }
.lab-particle:nth-child(7) { left: 50%; top: 50%; --dx: 140px; --dy: -90px; animation-delay: 18s; width: 4px; height: 4px; }
@keyframes lab-particle-drift {
0% { transform: translate(0, 0); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.lab-particle { animation: none; opacity: 0.5; }
}
/* 头部：日期 + 大节气 */
.lab-md-date-row {
display: flex;
gap: 18px;
align-items: baseline;
margin-bottom: 14px;
flex-wrap: wrap;
}
.lab-md-solar-big {
display: flex;
align-items: baseline;
gap: 14px;
padding-bottom: 8px;
margin-bottom: 28px;
border-bottom: 1px dashed var(--lab-border);
}
.lab-md-solar-name {
font-size: 36px;
font-weight: 800;
background: linear-gradient(135deg, var(--lab-ivory) 0%, var(--lab-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.08em;
line-height: 1.1;
}
.lab-md-solar-day {
font-size: 16px;
color: var(--lab-text-dim);
font-family: var(--lab-font-mono);
letter-spacing: 0.1em;
}
/* 旧 solar-term 小 badge 不再使用 */
.lab-md-solar-term { display: none; }
/* 3D 翻转柱卡 */
.lab-md-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
perspective: 1200px;
}
.lab-md-pillar {
background: transparent !important;
border: none !important;
padding: 0 !important;
position: relative;
min-height: 180px;
}
.lab-md-pillar-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 180px;
transform-style: preserve-3d;
animation: lab-pillar-flip 1.0s ease-out backwards;
}
.lab-md-pillar:nth-child(1) .lab-md-pillar-inner { animation-delay: 0.0s; }
.lab-md-pillar:nth-child(2) .lab-md-pillar-inner { animation-delay: 0.2s; }
.lab-md-pillar:nth-child(3) .lab-md-pillar-inner { animation-delay: 0.4s; }
@keyframes lab-pillar-flip {
0% { transform: rotateY(180deg); }
100% { transform: rotateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.lab-md-pillar-inner { animation: none; }
}
.lab-md-pillar-front,
.lab-md-pillar-back {
position: absolute;
inset: 0;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 8px;
padding: 18px 12px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.lab-md-pillar-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, var(--lab-bg-elev) 0%, var(--lab-bg-card) 100%);
border-color: var(--lab-border-strong);
}
.lab-md-pillar-bagua {
font-size: 56px;
color: var(--lab-gold);
line-height: 1;
margin-bottom: 8px;
filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.3));
}
.lab-md-pillar-bagua-name {
font-size: 13px;
color: var(--lab-gold-dim);
letter-spacing: 0.16em;
}
/* 五行环形图 wrap */
.lab-md-ring-wrap { text-align: center; }
.lab-md-ring {
width: 100%;
max-width: 240px;
height: auto;
display: block;
margin: 0 auto;
}
.lab-ring-fill {
transition: stroke-dashoffset 1.5s ease-out;
}
.lab-md-ring-readout {
margin-top: 14px;
font-size: 13px;
color: var(--lab-text-dim);
}
.lab-md-ring-readout strong { color: var(--lab-gold); }
/* 旧 radar 样式淘汰，但保留兼容 */
.lab-md-radar { display: none; }
.lab-md-radar-readout { display: none; }
/* ─── Section 4 · 三联卡片预览 ────────────────────────── */
.lab-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 18px;
}
.lab-card-preview {
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 10px;
padding: 16px 18px 18px;
min-height: 280px;
display: flex;
flex-direction: column;
position: relative;
}
.lab-cardp-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px dashed var(--lab-border);
}
.lab-cardp-tag {
font-size: 11px;
font-weight: 700;
color: var(--lab-gold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.lab-cardp-date {
font-size: 11px;
color: var(--lab-text-mute);
font-family: var(--lab-font-mono);
}
/* ① 命盘卡 */
.lab-cardp-md-body {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
margin-bottom: 14px;
}
.lab-cardp-md-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.lab-cardp-md-pillar {
background: var(--lab-bg-elev);
border: 1px solid var(--lab-border);
border-radius: 5px;
padding: 6px 4px;
text-align: center;
}
.lab-cardp-md-pillar-label {
font-size: 9px;
color: var(--lab-text-mute);
letter-spacing: 0.12em;
}
.lab-cardp-md-pillar-gz {
font-size: 18px;
font-weight: 700;
margin: 3px 0 1px;
line-height: 1.1;
}
.lab-cardp-md-pillar-elem {
font-size: 9px;
color: var(--lab-text-dim);
}
.lab-cardp-md-ring { width: 110px; height: 110px; }
.lab-cardp-md-footer {
font-size: 11px;
color: var(--lab-text-dim);
line-height: 1.7;
}
.lab-cardp-md-sectors {
display: flex;
gap: 8px;
align-items: baseline;
}
.lab-cardp-md-quality {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(58, 21, 24, 0.5);
}
.lab-cardp-md-quality #lab-cardp-md-score {
font-size: 22px;
font-weight: 800;
color: var(--lab-gold);
font-family: var(--lab-font-mono);
}
.lab-cardp-md-quality-unit { font-size: 11px; color: var(--lab-text-mute); }
.lab-cardp-md-label {
margin-left: auto;
padding: 2px 8px;
border: 1px solid var(--lab-border-strong);
border-radius: 3px;
font-size: 12px;
font-weight: 700;
color: var(--lab-ivory);
}
/* ② 板块热力色块矩阵 */
.lab-cardp-sr-heatmap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 6px;
margin-bottom: 12px;
width: 100%;
flex: 1;
}
.lab-cardp-sr-cell {
min-height: 60px;
border-radius: 5px;
padding: 8px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.2s, filter 0.3s;
/* 默认（平/无 status）灰色底 */
background: #3a3530;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* 五行底色（Ethan 指定的 5 色：朱红 / 金黄 / 深绿 / 银灰 / 青蓝） */
.lab-cardp-sr-cell[data-element="火"] { background: #c0392b; border-color: rgba(232, 85, 75, 0.4); }
.lab-cardp-sr-cell[data-element="土"] { background: #8b7355; border-color: rgba(212, 175, 55, 0.4); }
.lab-cardp-sr-cell[data-element="木"] { background: #2d5a27; border-color: rgba(95, 179, 116, 0.4); }
.lab-cardp-sr-cell[data-element="金"] { background: #6b7280; border-color: rgba(181, 181, 181, 0.4); }
.lab-cardp-sr-cell[data-element="水"] { background: #1e4d6b; border-color: rgba(95, 158, 179, 0.4); }
/* 状态滤镜 — 得令亮 / 平默认 / 失令灰 */
.lab-cardp-sr-cell[data-status="得令"] { filter: brightness(1.35) saturate(1.5); box-shadow: 0 0 12px rgba(255, 200, 100, 0.18) inset; }
.lab-cardp-sr-cell[data-status="次得令"] { filter: brightness(1.15) saturate(1.2); }
.lab-cardp-sr-cell[data-status="平"] { filter: brightness(0.85) saturate(0.8); }
.lab-cardp-sr-cell[data-status="失令"] { filter: grayscale(0.65) brightness(0.55); }
.lab-cardp-sr-cell[data-status="大失令"] { filter: grayscale(0.85) brightness(0.4); }
.lab-cardp-sr-cell:hover { transform: scale(1.05); }
.lab-cardp-sr-cell-name {
font-size: 10px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.25;
font-weight: 600;
letter-spacing: 0.02em;
}
.lab-cardp-sr-cell-score {
font-size: 11px;
font-family: var(--lab-font-mono);
margin-top: 4px;
color: rgba(255, 255, 255, 0.85);
font-weight: 700;
}
.lab-cardp-sr-footer {
padding-top: 8px;
border-top: 1px dashed var(--lab-border);
}
.lab-cardp-legend {
font-size: 10px;
color: var(--lab-text-mute);
letter-spacing: 0.08em;
}
/* ③ 龙虎榜进度条 */
.lab-cardp-tl-section { margin-bottom: 10px; }
.lab-cardp-tl-sub {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 6px;
}
.lab-cardp-tl-list {
list-style: none;
padding: 0;
margin: 0;
}
.lab-cardp-tl-list li {
display: grid;
grid-template-columns: 38px 1fr 32px;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 11px;
}
.lab-cardp-tl-asset {
color: var(--lab-ivory);
font-weight: 700;
}
.lab-cardp-tl-bar-wrap {
height: 8px;
background: rgba(255, 255, 255, 0.04);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.lab-cardp-tl-bar {
height: 100%;
background: var(--bar-color, var(--lab-good));
border-radius: 4px;
transition: width 1.2s ease-out;
width: 0;
}
.lab-cardp-tl-list-rev .lab-cardp-tl-bar-wrap { direction: rtl; }
.lab-cardp-tl-list-rev .lab-cardp-tl-bar {
background: var(--bar-color, var(--lab-bad));
opacity: 0.55;
}
.lab-cardp-tl-score {
text-align: right;
font-family: var(--lab-font-mono);
color: var(--bar-color, var(--lab-text-dim));
font-size: 11px;
font-weight: 700;
}
/* ─── Hero · 今日能量命盘 ─────────────────────────────── */
.lab-hero-energy { padding-top: 32px; }
.lab-hero-meta {
text-align: center;
font-family: var(--lab-font-mono);
font-size: 13px;
color: var(--lab-text-mute);
letter-spacing: 0.12em;
margin-bottom: 32px;
}
/* Altar: TOP 3 podium */
.lab-altar {
display: grid;
grid-template-columns: 1fr 1.35fr 1fr;
align-items: end;
gap: 24px;
max-width: 780px;
margin: 0 auto 56px;
min-height: 320px;
}
.lab-altar-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--lab-bg-card);
border: 1.5px solid var(--lab-border);
border-radius: 14px;
padding: 24px 14px;
text-decoration: none;
color: inherit;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
isolation: isolate;
}
.lab-altar-card::before {
/* 光晕背景层 */
content: "";
position: absolute;
inset: -4px;
border-radius: 16px;
background: radial-gradient(ellipse at 50% 50%, var(--card-glow, transparent) 0%, transparent 65%);
z-index: -1;
opacity: 0.55;
pointer-events: none;
transition: opacity 0.4s ease;
animation: lab-glow-pulse 3.6s ease-in-out infinite;
}
@keyframes lab-glow-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.lab-altar-card[data-rank="1"] {
grid-column: 2;
grid-row: 1;
padding: 36px 16px;
border-color: var(--card-color, var(--lab-gold));
border-width: 2px;
transform: translateY(0);
}
.lab-altar-card[data-rank="2"] { grid-column: 1; grid-row: 1; transform: translateY(28px); }
.lab-altar-card[data-rank="3"] { grid-column: 3; grid-row: 1; transform: translateY(28px); }
.lab-altar-card[data-favorable="true"] {
/* 光晕亮 + 高亮边框 */
}
.lab-altar-card[data-favorable="false"] {
filter: grayscale(0.55) brightness(0.7);
border-color: rgba(140, 122, 94, 0.3) !important;
}
.lab-altar-card[data-favorable="false"]::before { opacity: 0.1 !important; animation: none; }
.lab-altar-card:hover {
transform: translateY(-4px);
}
.lab-altar-card[data-rank="2"]:hover { transform: translateY(24px); }
.lab-altar-card[data-rank="3"]:hover { transform: translateY(24px); }
.lab-altar-rank {
font-family: var(--lab-font-mono);
font-size: 14px;
color: var(--card-color, var(--lab-gold));
letter-spacing: 0.16em;
margin-bottom: 8px;
opacity: 0.85;
}
.lab-altar-card[data-rank="1"] .lab-altar-rank { font-size: 18px; }
.lab-altar-asset {
font-size: 28px;
font-weight: 800;
color: var(--lab-ivory);
letter-spacing: 0.04em;
margin-bottom: 6px;
line-height: 1.1;
}
.lab-altar-card[data-rank="1"] .lab-altar-asset { font-size: 42px; }
.lab-altar-sector {
font-size: 11px;
color: var(--lab-text-mute);
letter-spacing: 0.08em;
margin-bottom: 14px;
min-height: 14px;
}
.lab-altar-card[data-rank="1"] .lab-altar-sector { font-size: 13px; }
.lab-altar-score {
font-family: var(--lab-font-mono);
font-weight: 700;
font-size: 18px;
color: var(--card-color, var(--lab-gold));
margin-bottom: 10px;
}
.lab-altar-card[data-rank="1"] .lab-altar-score { font-size: 24px; }
.lab-altar-quote {
font-size: 12px;
color: var(--lab-text-dim);
letter-spacing: 0.05em;
border-top: 1px dashed var(--lab-border);
padding-top: 10px;
margin-top: 6px;
font-style: italic;
line-height: 1.5;
}
.lab-altar-card[data-rank="1"] .lab-altar-quote { font-size: 13px; }
/* 元素配色（赋值给 --card-color + --card-glow） */
.lab-altar-card[data-element="火"],
.lab-tier2-card[data-element="火"] { --card-color: #E8554B; --card-glow: rgba(232, 85, 75, 0.55); }
.lab-altar-card[data-element="土"],
.lab-tier2-card[data-element="土"] { --card-color: #E6C760; --card-glow: rgba(230, 199, 96, 0.5); }
.lab-altar-card[data-element="木"],
.lab-tier2-card[data-element="木"] { --card-color: #7BD18C; --card-glow: rgba(123, 209, 140, 0.5); }
.lab-altar-card[data-element="金"],
.lab-tier2-card[data-element="金"] { --card-color: #E0E0E0; --card-glow: rgba(220, 220, 220, 0.4); }
.lab-altar-card[data-element="水"],
.lab-tier2-card[data-element="水"] { --card-color: #7AB9D1; --card-glow: rgba(122, 185, 209, 0.5); }
/* Tier 2 (#4-#10) */
.lab-tier2-wrap { margin-bottom: 40px; }
.lab-tier-label {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lab-gold-dim);
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--lab-border);
}
.lab-tier2 {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.lab-tier2-card {
position: relative;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-left: 3px solid var(--card-color, var(--lab-gold-dim));
border-radius: 6px;
padding: 12px 8px;
text-align: center;
text-decoration: none;
color: inherit;
transition: transform 0.2s, border-color 0.2s;
}
.lab-tier2-card:hover { transform: translateY(-2px); border-color: var(--card-color, var(--lab-border-strong)); }
.lab-tier2-card[data-favorable="false"] {
filter: grayscale(0.5) brightness(0.75);
border-left-color: rgba(140, 122, 94, 0.3);
}
.lab-tier2-rank {
font-size: 10px;
color: var(--card-color, var(--lab-gold));
font-family: var(--lab-font-mono);
letter-spacing: 0.1em;
}
.lab-tier2-asset {
font-size: 15px;
font-weight: 700;
color: var(--lab-ivory);
margin: 4px 0 2px;
letter-spacing: 0.02em;
}
.lab-tier2-sector {
font-size: 9px;
color: var(--lab-text-mute);
min-height: 11px;
}
.lab-tier2-score {
font-size: 12px;
font-family: var(--lab-font-mono);
color: var(--card-color, var(--lab-gold));
margin-top: 4px;
font-weight: 700;
}
/* Bottom 5 strip */
.lab-bottom-strip-wrap { margin-bottom: 36px; }
.lab-bottom-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.lab-bottom-card {
background: var(--lab-bg-card);
border: 1px solid rgba(212, 52, 42, 0.25);
border-radius: 6px;
padding: 10px 8px;
text-align: center;
text-decoration: none;
color: inherit;
filter: grayscale(0.4) brightness(0.85);
transition: filter 0.2s;
}
.lab-bottom-card:hover { filter: grayscale(0) brightness(1); }
.lab-bottom-card-rank {
font-size: 10px;
color: var(--lab-bad);
font-family: var(--lab-font-mono);
letter-spacing: 0.1em;
}
.lab-bottom-card-asset {
font-size: 14px;
font-weight: 700;
color: var(--lab-text-dim);
margin: 3px 0;
}
.lab-bottom-card-sector { font-size: 9px; color: var(--lab-text-mute); min-height: 11px; }
.lab-bottom-card-score {
font-size: 11px;
font-family: var(--lab-font-mono);
color: var(--lab-bad);
font-weight: 700;
}
/* Match Hook */
.lab-match-hook {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.04) 0%, rgba(212, 52, 42, 0.04) 100%);
border: 1px solid var(--lab-border-strong);
border-radius: 10px;
padding: 26px 28px;
margin-top: 32px;
}
.lab-match-title {
font-size: 16px;
color: var(--lab-gold);
letter-spacing: 0.14em;
margin-bottom: 8px;
}
.lab-match-sub {
font-size: 13px;
color: var(--lab-text-dim);
margin-bottom: 20px;
}
.lab-match-form { margin-bottom: 14px; }
.lab-match-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.lab-match-label {
font-size: 12px;
color: var(--lab-gold-dim);
letter-spacing: 0.1em;
min-width: 120px;
}
.lab-match-dob { display: flex; align-items: center; gap: 6px; }
.lab-match-form input {
background: var(--lab-bg);
border: 1px solid var(--lab-border);
border-radius: 4px;
color: var(--lab-ivory);
padding: 8px 12px;
font-size: 14px;
font-family: var(--lab-font-mono);
}
.lab-match-form input[type="number"] { width: 80px; text-align: center; }
.lab-match-form input[type="email"] { width: 280px; max-width: 100%; }
.lab-match-form input:focus { outline: none; border-color: var(--lab-gold); }
.lab-match-form span { color: var(--lab-text-mute); }
.lab-match-submit {
background: linear-gradient(135deg, var(--lab-gold) 0%, #8B7A3B 100%);
color: var(--lab-bg);
border: none;
padding: 10px 24px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.lab-match-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3); }
.lab-match-result {
background: var(--lab-bg-card);
border-left: 3px solid var(--lab-gold);
padding: 14px 18px;
border-radius: 4px;
margin: 12px 0 18px;
font-size: 14px;
color: var(--lab-text-dim);
line-height: 1.8;
}
.lab-match-result strong { color: var(--lab-ivory); }
.lab-match-result .lab-match-element-tag {
display: inline-block;
padding: 2px 10px;
margin: 0 4px;
background: rgba(212, 175, 55, 0.12);
color: var(--card-color, var(--lab-gold));
border-radius: 3px;
font-weight: 700;
}
.lab-match-result .lab-match-stars { color: var(--lab-gold); letter-spacing: 0.05em; font-size: 16px; }
/* Preset match (从资产页 ?match=SYMBOL 跳转过来) ──────── */
.lab-match-preset-elem-inline {
font-weight: 700;
letter-spacing: 0.05em;
}
.lab-match-preset-result {
display: flex;
flex-direction: column;
gap: 10px;
}
.lab-match-preset-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 14px;
color: var(--lab-text-dim);
}
.lab-match-preset-key {
min-width: 96px;
color: var(--lab-text-mute);
font-size: 12px;
letter-spacing: 0.08em;
}
.lab-match-preset-rel {
color: var(--lab-gold);
font-size: 15px;
letter-spacing: 0.05em;
}
.lab-match-preset-score-row {
align-items: baseline;
}
.lab-match-preset-stars {
color: var(--lab-gold);
font-size: 18px;
letter-spacing: 0.1em;
}
.lab-match-preset-score-num {
color: var(--lab-ivory);
font-weight: 700;
font-size: 14px;
margin-left: 6px;
}
.lab-match-preset-interpret {
margin: 8px 0 0;
padding: 10px 14px;
background: rgba(212, 175, 55, 0.06);
border-left: 2px solid rgba(212, 175, 55, 0.4);
border-radius: 3px;
color: var(--lab-text-dim);
font-size: 13px;
line-height: 1.7;
}
@media (max-width: 600px) {
.lab-match-preset-row { gap: 6px; font-size: 13px; }
.lab-match-preset-key { min-width: 72px; font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════
Unified Nav · 3-zone flex layout + "玄学服务" dropdown
(scoped to body.lab-page so legacy/product pages unaffected)
═════════════════════════════════════════════════════ */
body.lab-page header.site > nav {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 32px;
min-height: 60px;
}
body.lab-page header.site .logo {
flex: 0 0 auto;
}
body.lab-page header.site .nav-links {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
/* 左 auto = 把中间组推开到中部；右 auto = 中间组与 CTA 之间留 auto 空 */
body.lab-page header.site .nav-links > li:first-child {
margin-left: auto;
}
body.lab-page header.site .nav-links > li.nav-dropdown {
margin-right: auto;
}
body.lab-page header.site .nav-links > li > a,
body.lab-page header.site .nav-dropdown-trigger {
font-size: 15px;
letter-spacing: 0.04em;
color: rgba(240, 231, 213, 0.88);
text-decoration: none;
padding: 4px 0;
}
body.lab-page header.site .nav-links > li > a:hover,
body.lab-page header.site .nav-links > li > a:focus,
body.lab-page header.site .nav-dropdown-trigger:hover,
body.lab-page header.site .nav-dropdown-trigger:focus {
color: var(--lab-gold);
}
body.lab-page header.site .nav-links > li > a[aria-current="page"] {
color: var(--lab-gold);
border-bottom: 1px solid rgba(212, 175, 55, 0.6);
}
body.lab-page header.site .nav-links > li.nav-cta > a {
font-size: 13px;
letter-spacing: 0.08em;
}
@media (max-width: 720px) {
/* mobilefix 2026-05-17：移动端强制单排 —— 不再 wrap（曾致 header 撑到
* 213px 把页面标题压到 fixed 头下看不到）。页面链接收进汉堡抽屉，nav
* 仅留 logo + 主题钮 + 钱包 + 语言 + 汉堡，单行约 56px。*/
body.lab-page header.site > nav {
flex-wrap: nowrap !important;
padding: 10px 14px;
gap: 8px;
min-height: 0;
}
/* nav-links 不再占整行；只保留其中的主题钮 li（.nav-theme），
* 三个页面链接 + 隐藏的 nav-cta 在移动端收起（走汉堡抽屉）*/
body.lab-page header.site .nav-links {
width: auto;
flex: 0 0 auto;
gap: 0;
justify-content: flex-end;
margin-left: auto; /* 把右侧控件组推到最右 */
}
body.lab-page header.site .nav-links > li:not(.nav-theme) {
display: none !important;
}
body.lab-page header.site .nav-links > li:first-child,
body.lab-page header.site .nav-links > li.nav-dropdown {
margin: 0;
}
/* logo 略缩，确保单行不挤 */
body.lab-page header.site .logo { font-size: 16px; }
body.lab-page header.site .logo small { display: none; }
/* 汉堡按钮移动端显示（桌面 display:none 见上方统一组）*/
body.lab-page .eo-nav-burger { display: flex !important; }
}
.nav-dropdown {
position: relative;
}
/* 把 trigger 和 menu 之间的 8px 间隙做成不可见的 hover 桥区，
防止鼠标移到菜单途中失去 :hover 状态 */
.nav-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 14px;
pointer-events: none;
}
.nav-dropdown:hover::after {
pointer-events: auto;
}
.nav-dropdown-trigger {
background: transparent;
border: none;
color: inherit;
font: inherit;
cursor: pointer;
padding: 0;
letter-spacing: inherit;
display: inline-flex;
align-items: center;
gap: 4px;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus { color: var(--lab-gold); outline: none; }
.nav-dropdown-caret {
font-size: 0.85em;
transition: transform 0.2s ease;
display: inline-block;
}
.nav-dropdown[aria-expanded="true"] .nav-dropdown-caret,
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
min-width: 180px;
background: linear-gradient(160deg, var(--lab-bg-card) 0%, var(--lab-bg) 100%);
border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: 6px;
padding: 6px 0;
margin: 0;
list-style: none;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.08);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.15s;
z-index: 1000;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown[aria-expanded="true"] .nav-dropdown-menu,
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
display: block;
padding: 10px 18px;
color: rgba(201, 194, 184, 0.88);
font-size: 14px;
text-decoration: none;
letter-spacing: 0.03em;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
background: rgba(212, 175, 55, 0.10);
color: var(--lab-ivory);
}
.nav-dropdown-sep {
margin-top: 4px !important;
border-top: 1px solid rgba(212, 175, 55, 0.15);
}
.nav-dropdown-sep a { color: rgba(212, 175, 55, 0.85); }
@media (max-width: 720px) {
.nav-dropdown-menu {
position: static;
transform: none;
min-width: 0;
width: 100%;
margin-top: 6px;
box-shadow: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown[aria-expanded="true"] .nav-dropdown-menu,
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════
Profile Modal · 弹窗输入 + 二次确认
═════════════════════════════════════════════════════ */
.lab-modal-overlay {
position: fixed; inset: 0;
background: rgba(8, 6, 4, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: lab-modal-fade-in 0.25s ease-out;
}
@keyframes lab-modal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.lab-modal-card {
position: relative;
max-width: 460px; width: 100%;
max-height: 90vh; overflow-y: auto;
background: linear-gradient(160deg, var(--lab-bg-card) 0%, var(--lab-bg) 100%);
border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: 8px;
padding: 32px 28px 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
animation: lab-modal-card-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lab-modal-card-in {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.lab-modal-close {
position: absolute; top: 10px; right: 14px;
background: transparent; border: none;
color: rgba(212, 175, 55, 0.5);
font-size: 26px; cursor: pointer;
line-height: 1; padding: 4px 8px;
transition: color 0.15s ease;
}
.lab-modal-close:hover { color: var(--lab-gold); }
.lab-modal-step { display: flex; flex-direction: column; gap: 16px; }
.lab-modal-title {
margin: 0;
color: var(--lab-ivory);
font-size: 20px;
letter-spacing: 0.06em;
font-weight: 700;
}
.lab-modal-sub {
margin: -8px 0 4px;
color: rgba(201, 194, 184, 0.7);
font-size: 13px;
line-height: 1.6;
}
.lab-modal-field {
display: flex; flex-direction: column; gap: 6px;
}
.lab-modal-label {
font-size: 12px;
letter-spacing: 0.08em;
color: rgba(212, 175, 55, 0.85);
display: flex; align-items: center; gap: 6px;
}
.lab-modal-required { color: #E8554B; font-size: 13px; }
.lab-modal-calendar-hint {
color: #E8554B;
font-size: 11px;
font-weight: 600;
margin-left: 6px;
letter-spacing: 0.03em;
}
.lab-modal-calendar-warn {
margin: 6px 0 0;
padding: 6px 10px;
background: rgba(232, 85, 75, 0.08);
border-left: 2px solid #E8554B;
color: #F0B4A0;
font-size: 11px;
letter-spacing: 0.02em;
line-height: 1.5;
border-radius: 3px;
}
.lab-modal-optional {
color: rgba(201, 194, 184, 0.4);
font-size: 11px;
padding: 1px 6px;
border: 1px solid rgba(201, 194, 184, 0.2);
border-radius: 2px;
letter-spacing: 0.05em;
}
.lab-modal-dob {
display: flex; align-items: center; gap: 6px;
}
.lab-modal-dob select { flex: 1; }
.lab-modal-dob-sep { color: rgba(201, 194, 184, 0.3); }
.lab-modal-card select,
.lab-modal-card input[type="text"] {
background: rgba(15, 14, 12, 0.7);
border: 1px solid rgba(212, 175, 55, 0.25);
color: var(--lab-ivory);
padding: 10px 12px;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.lab-modal-card select:focus,
.lab-modal-card input[type="text"]:focus {
border-color: rgba(212, 175, 55, 0.7);
background: rgba(15, 14, 12, 0.95);
}
.lab-modal-privacy {
margin-top: 4px;
padding: 10px 14px;
background: rgba(212, 175, 55, 0.05);
border-left: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 3px;
font-size: 12px;
line-height: 1.7;
color: rgba(201, 194, 184, 0.7);
}
.lab-modal-privacy strong {
color: var(--lab-gold);
font-weight: 600;
}
.lab-modal-error {
margin: 0;
padding: 8px 12px;
background: rgba(232, 85, 75, 0.1);
border-left: 2px solid #E8554B;
color: #E8554B;
font-size: 12px;
border-radius: 3px;
}
.lab-modal-submit {
margin-top: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, var(--lab-gold) 0%, #B8941F 100%);
color: #0F0E0C;
border: none;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.lab-modal-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}
.lab-modal-secondary {
padding: 12px 20px;
background: transparent;
color: rgba(201, 194, 184, 0.85);
border: 1px solid rgba(201, 194, 184, 0.25);
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.lab-modal-secondary:hover { border-color: rgba(212, 175, 55, 0.5); color: var(--lab-gold); }
/* Confirm step */
.lab-modal-review {
list-style: none;
margin: 4px 0 0;
padding: 14px 16px;
background: rgba(212, 175, 55, 0.04);
border: 1px solid rgba(212, 175, 55, 0.18);
border-radius: 5px;
display: flex; flex-direction: column; gap: 10px;
}
.lab-modal-review-row {
display: flex; gap: 16px; align-items: baseline; font-size: 14px;
}
.lab-modal-review-key {
min-width: 84px;
color: rgba(201, 194, 184, 0.55);
font-size: 12px;
letter-spacing: 0.08em;
}
.lab-modal-review-val { color: var(--lab-ivory); font-weight: 600; }
.lab-modal-warn {
margin: 0;
padding: 10px 14px;
background: rgba(232, 85, 75, 0.08);
border-left: 2px solid rgba(232, 85, 75, 0.55);
color: rgba(240, 180, 160, 0.95);
font-size: 12px;
border-radius: 3px;
}
.lab-modal-actions {
display: flex; gap: 10px; flex-wrap: wrap;
}
.lab-modal-actions .lab-modal-secondary { flex: 0 0 auto; }
.lab-modal-actions .lab-modal-submit { flex: 1 1 auto; margin-top: 0; }
/* ═══════════════════════════════════════════════════════
Match Card · 三种入口卡片（build / saved / preset）
═════════════════════════════════════════════════════ */
.lab-match-card {
background: linear-gradient(160deg, rgba(212, 175, 55, 0.06) 0%, rgba(15, 14, 12, 0.4) 100%);
border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: 6px;
padding: 22px 24px;
margin: 10px 0;
display: flex; flex-direction: column; gap: 12px;
}
.lab-match-card-title {
margin: 0;
color: var(--lab-gold);
font-size: 19px;
letter-spacing: 0.06em;
font-weight: 700;
}
.lab-match-card-sub {
margin: 0;
color: rgba(201, 194, 184, 0.75);
font-size: 13px;
line-height: 1.7;
}
.lab-match-card-saved-meta {
margin: 0;
color: rgba(201, 194, 184, 0.85);
font-size: 14px;
}
.lab-match-card-saved-meta .lab-match-element-tag {
display: inline-block;
padding: 2px 10px; margin-left: 6px;
background: rgba(212, 175, 55, 0.12);
color: var(--card-color, var(--lab-gold));
border-radius: 3px;
font-weight: 700;
}
.lab-match-card-cta {
align-self: flex-start;
margin-top: 4px;
padding: 10px 22px;
background: linear-gradient(135deg, var(--lab-gold) 0%, #B8941F 100%);
color: #0F0E0C;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.lab-match-card-cta:hover {
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(212, 175, 55, 0.3);
}
.lab-match-card-disclaimer {
margin: 4px 0 0;
font-size: 11px;
color: rgba(201, 194, 184, 0.45);
letter-spacing: 0.05em;
}
/* Edit link */
.lab-match-edit-link {
align-self: flex-start;
font-size: 12px;
color: rgba(201, 194, 184, 0.6);
text-decoration: none;
letter-spacing: 0.03em;
margin-top: 4px;
transition: color 0.15s ease;
}
.lab-match-edit-link:hover { color: var(--lab-gold); }
.lab-match-edit-link-key { opacity: 0.6; margin-right: 2px; }
.lab-match-edit-link-val { color: rgba(201, 194, 184, 0.85); margin: 0 4px; }
.lab-match-edit-link-action {
color: var(--lab-gold);
text-decoration: underline;
text-underline-offset: 2px;
margin-left: 4px;
}
/* ═══════════════════════════════════════════════════════
Match Visual · 双圆环 + 仪表盘 + 三行解读
═════════════════════════════════════════════════════ */
.lab-match-visual {
margin: 14px 0 0;
padding: 24px 22px;
background: linear-gradient(160deg, rgba(15, 14, 12, 0.6) 0%, rgba(8, 6, 4, 0.6) 100%);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 6px;
display: flex; flex-direction: column; gap: 20px;
}
.lab-match-rings { display: flex; justify-content: center; }
.lab-match-rings-svg { max-width: 420px; }
.lab-match-gauge {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lab-match-gauge-svg { max-width: 320px; }
.lab-match-gauge-meta {
display: flex; align-items: baseline; gap: 14px;
margin-top: -10px;
}
.lab-match-gauge-score {
font-size: 22px; font-weight: 700; color: var(--lab-ivory); letter-spacing: 0.05em;
}
.lab-match-gauge-stars {
color: var(--lab-gold); font-size: 18px; letter-spacing: 0.12em;
}
.lab-match-gauge-needle {
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.lab-match-gauge-needle.is-animated {
transform: rotate(var(--target-rot, 0deg)) !important;
}
@media (prefers-reduced-motion: reduce) {
.lab-match-gauge-needle { transition: none; }
}
.lab-match-interp {
display: flex; flex-direction: column; gap: 10px;
padding: 14px 16px;
background: rgba(212, 175, 55, 0.04);
border-left: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 4px;
}
.lab-match-interp-row {
display: flex; gap: 12px; align-items: baseline;
font-size: 13px;
color: rgba(201, 194, 184, 0.88);
line-height: 1.7;
}
.lab-match-interp-key {
min-width: 64px; flex-shrink: 0;
color: rgba(212, 175, 55, 0.75);
font-size: 11px;
letter-spacing: 0.08em;
}
.lab-match-interp-val strong { color: var(--lab-gold); font-weight: 700; }
.lab-match-interp-row[data-kind="good"] .lab-match-interp-val { color: #95C7A4; }
.lab-match-interp-row[data-kind="bad"] .lab-match-interp-val { color: #F0B4A0; }
.lab-match-visual-footer {
display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid rgba(212, 175, 55, 0.15);
padding-top: 16px;
}
.lab-match-visual-card-btn {
align-self: flex-start;
padding: 9px 18px;
background: transparent;
border: 1px solid rgba(212, 175, 55, 0.55);
color: var(--lab-gold);
border-radius: 4px;
font-size: 13px;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lab-match-visual-card-btn:hover {
background: rgba(212, 175, 55, 0.12);
border-color: var(--lab-gold);
}
@media (max-width: 600px) {
.lab-match-rings-svg { max-width: 100%; }
.lab-match-gauge-svg { max-width: 100%; }
.lab-match-interp-key { min-width: 52px; font-size: 10px; }
.lab-match-interp-row { font-size: 12px; }
.lab-modal-card { padding: 24px 20px 20px; }
.lab-modal-actions { flex-direction: column-reverse; }
.lab-modal-actions .lab-modal-submit,
.lab-modal-actions .lab-modal-secondary { width: 100%; }
}
.lab-match-disclaimer {
font-size: 11px;
color: var(--lab-text-mute);
margin-top: 10px;
line-height: 1.6;
}
/* Step B · 完整 insights 输出 */
.lab-mi-row {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 14px;
color: var(--lab-text-dim);
margin-bottom: 10px;
line-height: 1.7;
flex-wrap: wrap;
}
.lab-mi-num {
font-family: var(--lab-font-mono);
color: var(--lab-gold);
font-size: 16px;
font-weight: 700;
min-width: 22px;
flex-shrink: 0;
}
.lab-mi-num.lab-mi-good { color: var(--lab-good); }
.lab-mi-num.lab-mi-bad { color: var(--lab-bad); }
.lab-mi-label { color: var(--lab-gold-dim); letter-spacing: 0.04em; }
.lab-mi-value { color: var(--lab-ivory); }
.lab-mi-value strong { color: var(--lab-ivory); }
.lab-mi-block { margin-top: 14px; margin-bottom: 6px; }
.lab-mi-asset-line { color: var(--lab-ivory); font-size: 15px; letter-spacing: 0.04em; }
.lab-mi-asset-list {
list-style: none;
padding: 0 0 0 32px;
margin: 6px 0 14px;
}
.lab-mi-asset-list li {
font-size: 12.5px;
color: var(--lab-text-mute);
padding: 5px 0;
line-height: 1.6;
border-left: 2px solid var(--lab-border);
padding-left: 12px;
}
.lab-mi-asset-list-avoid li { border-left-color: rgba(212, 52, 42, 0.4); }
.lab-mi-action {
margin-top: 22px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0%, rgba(212, 52, 42, 0.06) 100%);
border: 1px solid var(--lab-border-strong);
border-radius: 8px;
}
.lab-mi-action .lab-mi-num { vertical-align: middle; margin-right: 6px; }
.lab-mi-action-label {
font-size: 13px;
color: var(--lab-gold);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
}
.lab-mi-action-text {
margin: 10px 0 0;
font-size: 15px;
color: var(--lab-ivory);
line-height: 1.8;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Step C · 命格卡按钮 + 预览 */
.lab-match-card-btn {
display: block;
margin: 24px auto 0;
padding: 12px 32px;
background: linear-gradient(135deg, var(--lab-gold) 0%, #B5953A 100%);
color: var(--lab-bg);
border: none;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.18em;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
font-family: var(--lab-font-sans);
}
.lab-match-card-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
}
.lab-match-card-btn:disabled {
opacity: 0.55;
cursor: default;
transform: none;
box-shadow: none;
}
.lab-match-card-preview {
margin-top: 22px;
text-align: center;
padding-top: 18px;
border-top: 1px dashed var(--lab-border);
}
.lab-match-card-img {
display: block;
margin: 0 auto 14px;
max-width: 100%;
width: 420px;
height: auto;
border-radius: 10px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
border: 1px solid var(--lab-border-strong);
}
.lab-match-card-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 4px;
}
.lab-match-card-twitter,
.lab-match-card-download {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 22px;
border-radius: 6px;
text-decoration: none;
font-size: 13px;
letter-spacing: 0.14em;
font-weight: 600;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
cursor: pointer;
font-family: var(--lab-font-sans);
}
.lab-match-card-twitter {
background: linear-gradient(135deg, var(--lab-gold) 0%, #B5953A 100%);
color: var(--lab-bg);
border: 1px solid var(--lab-gold);
}
.lab-match-card-twitter:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}
.lab-match-card-download {
background: var(--lab-bg-card);
border: 1px solid var(--lab-border-strong);
color: var(--lab-gold);
}
.lab-match-card-download:hover { background: rgba(212, 175, 55, 0.08); }
.lab-match-card-note {
font-size: 11px;
color: var(--lab-text-mute);
margin-top: 10px;
line-height: 1.6;
}
/* ─── Mobile breakpoint ──────────────────────────────── */
@media (max-width: 760px) {
body.lab-page header.site nav { padding: 14px 18px; }
body.lab-page .nav-links { gap: 14px; font-size: 11px; }
.lab-h1 { font-size: 28px; }
.lab-belief-list li { padding-left: 42px; font-size: 13px; }
.lab-section { padding: 20px 16px; }
.lab-section-title { font-size: 13px; }
.lab-md-grid { grid-template-columns: 1fr; gap: 18px; }
.lab-md-pillars { grid-template-columns: repeat(3, 1fr); }
.lab-md-pillar-gz { font-size: 24px; }
.lab-md-quality { flex-direction: column; align-items: flex-start; gap: 10px; }
.lab-md-quality-num { font-size: 32px; }
.lab-md-sessions { grid-template-columns: repeat(2, 1fr); }
.lab-sr-lists { grid-template-columns: 1fr; }
.lab-tl-grid { grid-template-columns: repeat(2, 1fr); }
.lab-tl-grid-bottom { grid-template-columns: repeat(2, 1fr); }
/* Hero 移动端：神坛竖排 / 第二梯队 2 列 / Bottom 3 列 */
.lab-altar { grid-template-columns: 1fr; max-width: 360px; gap: 14px; min-height: auto; }
.lab-altar-card[data-rank="1"] { grid-column: 1; grid-row: 1; padding: 24px 14px; }
.lab-altar-card[data-rank="2"] { grid-column: 1; grid-row: 2; transform: none; }
.lab-altar-card[data-rank="3"] { grid-column: 1; grid-row: 3; transform: none; }
.lab-altar-card[data-rank="1"] .lab-altar-asset { font-size: 32px; }
.lab-tier2 { grid-template-columns: repeat(2, 1fr); }
.lab-bottom-strip { grid-template-columns: repeat(3, 1fr); }
.lab-bottom-card:nth-child(4),
.lab-bottom-card:nth-child(5) { /* 4,5 仍显示，自动换行 */ }
.lab-match-hook { padding: 18px 16px; }
.lab-match-label { min-width: auto; }
.lab-match-form input[type="email"] { width: 100%; }
/* Section 1 mobile：大节气文字缩小，柱卡仍 3 列 */
.lab-md-solar-name { font-size: 26px; }
.lab-md-solar-day { font-size: 13px; }
.lab-md-pillar-bagua { font-size: 40px; }
.lab-md-pillar { min-height: 140px; }
.lab-md-pillar-inner { min-height: 140px; }
/* Section 4 三联卡：移动端单列 */
.lab-cards-grid { grid-template-columns: 1fr; gap: 12px; }
.lab-card-preview { min-height: auto; }
}
/* ═════════════════════════════════════════════════════════════
T15 · /lab/methodology/ 方法论页样式
═════════════════════════════════════════════════════════════ */
.lab-methodology-main {
max-width: 1100px; /* 文档页比命盘页稍窄，便于阅读 */
margin: 0 auto;
padding: 24px 24px 60px;
}
.lab-methodology-hero {
text-align: center;
padding: 30px 24px 36px;
border: 1px solid rgba(212, 175, 55, 0.35);
background: linear-gradient(180deg, rgba(212, 175, 55, 0.06) 0%, var(--lab-bg-card) 100%);
}
.lab-methodology-title {
font-family: "Songti SC", "STSong", serif;
font-size: 28px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--lab-ivory);
margin: 0 0 12px;
}
.lab-methodology-subtitle {
font-size: 14px;
color: var(--lab-text-dim);
line-height: 1.85;
margin: 0 auto;
max-width: 700px;
}
.lab-methodology-section-intro {
font-size: 14px;
color: var(--lab-text);
line-height: 1.85;
margin: 0 0 20px;
}
/* 五条 Belief 列表 */
.lab-methodology-beliefs {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 18px;
}
.lab-methodology-belief {
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-left: 4px solid var(--lab-gold);
border-radius: 6px;
padding: 18px 22px;
}
.lab-methodology-belief-head {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 10px;
}
.lab-methodology-belief-num {
font-family: var(--lab-font-mono);
font-size: 24px;
font-weight: 700;
color: var(--lab-gold);
letter-spacing: 0.04em;
}
.lab-methodology-belief-title {
font-family: "Songti SC", "STSong", serif;
font-size: 18px;
font-weight: 700;
color: var(--lab-ivory);
margin: 0;
}
.lab-methodology-belief p {
font-size: 14px;
line-height: 1.85;
color: var(--lab-text);
margin: 0 0 6px;
}
.lab-methodology-belief p:last-child { margin-bottom: 0; }
.lab-methodology-belief-firewall {
border-left-color: var(--lab-bad);
background: linear-gradient(90deg, rgba(212, 52, 42, 0.05) 0%, var(--lab-bg-card) 18%);
}
.lab-methodology-belief-firewall .lab-methodology-belief-num {
color: var(--lab-bad);
}
/* 板块映射表 */
.lab-methodology-mapping-wrap {
overflow-x: auto;
margin: 0 -8px;
padding: 0 8px;
}
.lab-methodology-mapping {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-family: var(--lab-font-sans);
}
.lab-methodology-mapping th {
text-align: left;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 11px;
color: var(--lab-text-mute);
padding: 10px 8px;
border-bottom: 1px solid var(--lab-border-strong);
background: var(--lab-bg-card);
}
.lab-methodology-mapping td {
padding: 10px 8px;
border-bottom: 1px solid var(--lab-border);
color: var(--lab-text);
line-height: 1.6;
vertical-align: top;
}
.lab-methodology-mapping tbody tr:hover { background: rgba(212, 175, 55, 0.04); }
.lab-mapping-id { width: 36px; text-align: center; color: var(--lab-text-mute); font-family: var(--lab-font-mono); }
.lab-mapping-name { font-weight: 700; color: var(--lab-ivory); min-width: 120px; }
.lab-mapping-primary, .lab-mapping-secondary { width: 64px; text-align: center; }
.lab-methodology-mapping td[data-element] {
text-align: center;
font-family: "Songti SC", "STSong", serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
}
.lab-methodology-mapping td[data-element="木"] { color: #5FB374; }
.lab-methodology-mapping td[data-element="火"] { color: #E8554B; }
.lab-methodology-mapping td[data-element="土"] { color: var(--lab-gold); }
.lab-methodology-mapping td[data-element="金"] { color: #B5B5B5; }
.lab-methodology-mapping td[data-element="水"] { color: #5F9EB3; }
.lab-mapping-rationale { font-size: 13px; min-width: 220px; }
.lab-mapping-examples code {
font-family: var(--lab-font-mono);
font-size: 11px;
color: var(--lab-text-mute);
background: transparent;
padding: 0;
}
.lab-methodology-table-footnote {
font-size: 12px;
color: var(--lab-text-mute);
margin: 14px 0 0;
letter-spacing: 0.02em;
line-height: 1.7;
}
/* 打分规则表 */
.lab-methodology-scoring { margin-top: 8px; }
.lab-methodology-h3 {
font-family: "Songti SC", "STSong", serif;
font-size: 16px;
color: var(--lab-gold);
margin: 24px 0 12px;
letter-spacing: 0.08em;
}
.lab-methodology-scoring-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin-bottom: 8px;
}
.lab-methodology-scoring-table th {
text-align: left;
padding: 9px 12px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lab-text-mute);
border-bottom: 1px solid var(--lab-border-strong);
}
.lab-methodology-scoring-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--lab-border);
color: var(--lab-text);
line-height: 1.6;
}
.lab-methodology-scoring-table code {
font-family: var(--lab-font-mono);
font-size: 12px;
color: var(--lab-ivory);
background: rgba(255, 255, 255, 0.05);
padding: 1px 6px;
border-radius: 3px;
}
.lab-methodology-scoring-table .lab-pos { color: var(--lab-good); font-weight: 700; }
.lab-methodology-scoring-table .lab-neg { color: var(--lab-bad); font-weight: 700; }
.lab-methodology-example {
border-left: 3px solid var(--lab-gold);
padding: 12px 16px;
margin-top: 14px;
background: rgba(212, 175, 55, 0.04);
border-radius: 0 6px 6px 0;
}
.lab-methodology-example p { margin: 0 0 8px; font-size: 13px; }
.lab-methodology-example ul {
margin: 0;
padding-left: 18px;
font-size: 13px;
line-height: 1.85;
color: var(--lab-text);
}
.lab-methodology-example .lab-pos { color: var(--lab-good); font-weight: 700; }
.lab-methodology-example .lab-neg { color: var(--lab-bad); font-weight: 700; }
/* 免责声明 */
.lab-methodology-disclaimer-section { margin-top: 12px; }
.lab-methodology-disclaimer {
background: rgba(212, 52, 42, 0.06);
border: 1px solid rgba(212, 52, 42, 0.35);
border-left: 4px solid var(--lab-bad);
border-radius: 6px;
padding: 22px 24px;
}
.lab-methodology-disclaimer-title {
color: var(--lab-bad);
font-family: "Songti SC", "STSong", serif;
font-size: 20px;
font-weight: 800;
margin: 0 0 14px;
letter-spacing: 0.04em;
}
.lab-methodology-disclaimer p {
font-size: 14px;
line-height: 1.85;
color: var(--lab-text);
margin: 0 0 10px;
}
.lab-methodology-disclaimer ul {
margin: 8px 0 14px;
padding-left: 22px;
font-size: 13px;
line-height: 1.95;
color: var(--lab-text-dim);
}
.lab-methodology-disclaimer li { margin-bottom: 4px; }
.lab-methodology-disclaimer-tagline {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(212, 52, 42, 0.25);
font-size: 13px !important;
color: var(--lab-text) !important;
line-height: 1.85 !important;
}
@media (max-width: 760px) {
.lab-methodology-title { font-size: 22px; }
.lab-methodology-belief { padding: 14px 16px; }
.lab-methodology-belief-head { gap: 10px; }
.lab-methodology-belief-title { font-size: 16px; }
.lab-methodology-belief-num { font-size: 20px; }
.lab-methodology-mapping th, .lab-methodology-mapping td { padding: 8px 6px; font-size: 12px; }
.lab-methodology-mapping td[data-element] { font-size: 16px; }
.lab-mapping-rationale { min-width: 160px; }
.lab-methodology-disclaimer { padding: 16px 18px; }
.lab-methodology-disclaimer-title { font-size: 17px; }
}
/* ═════════════════════════════════════════════════════════════
T16 · /lab/archive/ 历史归档页样式
═════════════════════════════════════════════════════════════ */
.lab-archive-main {
max-width: 1320px;
margin: 0 auto;
padding: 24px 24px 60px;
}
.lab-archive-hero {
padding: 28px 24px;
text-align: center;
}
.lab-archive-title {
font-family: "Songti SC", "STSong", serif;
font-size: 28px;
font-weight: 800;
color: var(--lab-ivory);
letter-spacing: 0.04em;
margin: 0 0 10px;
}
.lab-archive-subtitle {
font-size: 13px;
color: var(--lab-text-dim);
line-height: 1.85;
margin: 0 auto 16px;
max-width: 640px;
}
.lab-archive-stats {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 6px 18px;
border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: 20px;
background: rgba(212, 175, 55, 0.06);
font-family: var(--lab-font-mono);
}
.lab-archive-stat-label { font-size: 11px; color: var(--lab-text-mute); letter-spacing: 0.12em; }
.lab-archive-stat-val { font-size: 22px; font-weight: 700; color: var(--lab-gold); }
.lab-archive-stat-unit { font-size: 12px; color: var(--lab-text-mute); }
.lab-archive-loading {
text-align: center;
font-size: 14px;
color: var(--lab-text-mute);
padding: 40px 0;
}
/* 月份组 */
.lab-archive-month-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 22px 4px 12px;
border-bottom: 1px solid var(--lab-border-strong);
margin-bottom: 14px;
}
.lab-archive-month-head:first-child { padding-top: 6px; }
.lab-archive-month-title {
font-family: "Songti SC", "STSong", serif;
font-size: 20px;
font-weight: 700;
color: var(--lab-gold);
letter-spacing: 0.08em;
margin: 0;
}
.lab-archive-month-count {
font-family: var(--lab-font-mono);
font-size: 12px;
color: var(--lab-text-mute);
letter-spacing: 0.06em;
}
/* 日历卡网格 */
.lab-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.lab-archive-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
position: relative;
}
.lab-archive-card:hover {
transform: translateY(-2px);
border-color: var(--lab-gold);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.15);
}
.lab-archive-card[data-element="木"] { border-left: 3px solid #5FB374; }
.lab-archive-card[data-element="火"] { border-left: 3px solid #E8554B; }
.lab-archive-card[data-element="土"] { border-left: 3px solid var(--lab-gold); }
.lab-archive-card[data-element="金"] { border-left: 3px solid #B5B5B5; }
.lab-archive-card[data-element="水"] { border-left: 3px solid #5F9EB3; }
.lab-archive-card-date {
display: flex;
align-items: baseline;
gap: 6px;
}
.lab-archive-card-day {
font-family: "Songti SC", "STSong", serif;
font-size: 26px;
font-weight: 700;
color: var(--lab-ivory);
line-height: 1;
}
.lab-archive-card-month {
font-family: var(--lab-font-mono);
font-size: 11px;
color: var(--lab-text-mute);
letter-spacing: 0.04em;
}
.lab-archive-card-elem {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.lab-archive-card-dot {
width: 10px; height: 10px;
border-radius: 50%;
box-shadow: 0 0 8px currentColor;
}
.lab-archive-card-dot-missing {
background: var(--lab-text-mute);
box-shadow: none;
opacity: 0.4;
}
.lab-archive-card-elem-label {
font-family: "Songti SC", "STSong", serif;
font-weight: 700;
letter-spacing: 0.04em;
}
.lab-archive-card[data-element="木"] .lab-archive-card-elem-label { color: #5FB374; }
.lab-archive-card[data-element="火"] .lab-archive-card-elem-label { color: #E8554B; }
.lab-archive-card[data-element="土"] .lab-archive-card-elem-label { color: var(--lab-gold); }
.lab-archive-card[data-element="金"] .lab-archive-card-elem-label { color: #B5B5B5; }
.lab-archive-card[data-element="水"] .lab-archive-card-elem-label { color: #5F9EB3; }
.lab-archive-card-quality {
font-family: var(--lab-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
padding: 3px 8px;
border-radius: 10px;
align-self: flex-start;
border: 1px solid transparent;
}
.lab-archive-card-quality[data-kind="thriving"] { background: rgba(95, 179, 116, 0.16); color: var(--lab-good); border-color: rgba(95, 179, 116, 0.45); }
.lab-archive-card-quality[data-kind="good"] { background: rgba(95, 179, 116, 0.10); color: var(--lab-good); border-color: rgba(95, 179, 116, 0.30); }
.lab-archive-card-quality[data-kind="neutral"] { background: rgba(212, 175, 55, 0.10); color: var(--lab-gold); border-color: rgba(212, 175, 55, 0.30); }
.lab-archive-card-quality[data-kind="weak"] { background: rgba(212, 52, 42, 0.10); color: var(--lab-bad); border-color: rgba(212, 52, 42, 0.30); }
.lab-archive-card-quality[data-kind="adverse"] { background: rgba(212, 52, 42, 0.16); color: var(--lab-bad); border-color: rgba(212, 52, 42, 0.45); }
.lab-archive-card-quality[data-kind="unknown"] { color: var(--lab-text-mute); opacity: 0.6; }
/* 空态 (<7 days) */
.lab-archive-empty {
text-align: center;
padding: 60px 24px 80px;
background: var(--lab-bg-card);
border: 1px dashed rgba(212, 175, 55, 0.45);
border-radius: 10px;
}
.lab-archive-empty-icon {
font-size: 56px;
color: var(--lab-gold);
line-height: 1;
margin-bottom: 16px;
animation: archive-empty-spin 3s ease-in-out infinite;
}
@keyframes archive-empty-spin {
0%, 100% { transform: rotate(0deg); opacity: 0.7; }
50% { transform: rotate(180deg); opacity: 1.0; }
}
.lab-archive-empty-title {
font-family: "Songti SC", "STSong", serif;
font-size: 22px;
color: var(--lab-ivory);
margin: 0 0 12px;
letter-spacing: 0.08em;
}
.lab-archive-empty-text {
font-size: 14px;
color: var(--lab-text-dim);
line-height: 1.85;
margin: 0 auto 8px;
max-width: 460px;
}
.lab-archive-empty-text strong {
color: var(--lab-gold);
font-size: 16px;
}
.lab-archive-empty-hint {
font-family: var(--lab-font-mono);
font-size: 11px;
color: var(--lab-text-mute);
letter-spacing: 0.12em;
margin: 12px 0 20px;
}
.lab-archive-empty-cta {
display: inline-block;
padding: 10px 24px;
background: var(--lab-gold);
color: #1c1206;
font-weight: 700;
border-radius: 6px;
text-decoration: none;
letter-spacing: 0.08em;
font-size: 13px;
transition: transform 0.15s, box-shadow 0.2s;
}
.lab-archive-empty-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}
/* 注脚 */
.lab-archive-footnote-section { margin-top: 24px; padding: 20px 0; }
.lab-archive-footnote {
text-align: center;
font-size: 12px;
color: var(--lab-text-mute);
line-height: 1.85;
margin: 0;
}
.lab-archive-footnote strong { color: var(--lab-text); }
.lab-archive-footnote a { color: var(--lab-gold); text-decoration: none; margin-left: 8px; }
.lab-archive-footnote a:hover { text-decoration: underline; }
/* 历史命盘 banner 模式（在 today 页加 ?date= 时显示） */
.lab-banner[data-mode="historical"] {
background: rgba(212, 175, 55, 0.10);
border-color: rgba(212, 175, 55, 0.45);
color: var(--lab-gold);
}
@media (max-width: 760px) {
.lab-archive-title { font-size: 22px; }
.lab-archive-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.lab-archive-card { padding: 10px 12px; }
.lab-archive-card-day { font-size: 22px; }
.lab-archive-month-title { font-size: 17px; }
}
/* ============================================================
=== XJI XUANJI INDEX === 玄机指数（全 SVG，无 Chart.js）
严格复用 --lab-* token；暗色默认 + :root[data-theme="light"]
覆盖 + @media(max-width:480px) 移动端。
============================================================ */
.xji-section { position: relative; }
.xji-section[data-conflict="1"] {
border-left: 3px solid var(--lab-fire);
padding-left: 13px;
}
.xji-sub {
margin: 2px 0 18px; font-size: 12.5px; color: var(--lab-text-dim);
letter-spacing: 0.04em;
}
.xji-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 20px; align-items: center; margin-bottom: 8px;
}
.xji-dial-wrap { text-align: center; }
#xjiDial {
width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto;
overflow: visible;
}
.xji-zone { transition: opacity 0.5s ease; }
.xji-zone-active { filter: drop-shadow(0 0 7px rgba(212,175,55,0.65)); }
.xji-pointer { transform-box: view-box; }
.xji-state-label {
margin-top: 10px; display: flex; flex-direction: column;
align-items: center; gap: 4px;
}
.xji-state-name {
font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
font-size: 24px; font-weight: 600; color: var(--lab-gold);
letter-spacing: 0.06em;
}
.xji-verdict {
font-size: 13.5px; color: var(--lab-text-dim); letter-spacing: 0.03em;
}
.xji-section[data-conflict="1"] .xji-verdict {
color: var(--lab-fire); font-weight: 600;
}
.xji-radar-wrap { text-align: center; }
#xjiRadar {
width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto;
overflow: visible;
}
.xji-bars {
display: flex; flex-direction: column; gap: 10px;
margin: 18px auto 6px; max-width: 520px;
}
.xji-bar-item {
display: grid; grid-template-columns: 44px 1fr 52px;
align-items: center; gap: 12px;
}
.xji-bar-label {
font-size: 13px; color: var(--lab-text-dim); font-weight: 600;
}
.xji-bar-track {
height: 8px; border-radius: 4px;
background: var(--lab-bg-elev);
border: 1px solid var(--lab-border);
overflow: hidden;
}
.xji-bar-fill {
height: 100%; width: 0;
background: linear-gradient(90deg, var(--lab-gold-dim), var(--lab-gold));
border-radius: 4px;
transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.xji-bar-item[data-layer="dili"] .xji-bar-fill {
background: linear-gradient(90deg, #8a6a1f, var(--lab-earth));
}
.xji-bar-item[data-layer="guaxiang"] .xji-bar-fill {
background: linear-gradient(90deg, #3f6f82, var(--lab-water));
}
.xji-bar-item[data-layer="shushi"] .xji-bar-fill {
background: linear-gradient(90deg, #9c2f26, var(--lab-fire));
}
.xji-bar-score {
font-size: 12px; color: var(--lab-text-mute);
font-family: var(--lab-font-mono); text-align: right;
}
.xji-history-wrap {
position: relative; height: 120px; margin-top: 16px;
border-top: 1px solid var(--lab-border); padding-top: 12px;
}
#xjiHistory { width: 100%; height: 120px; display: block; }
.xji-disclaimer {
margin: 12px 0 0; font-size: 11px; color: var(--lab-text-mute);
text-align: center; letter-spacing: 0.03em;
}
/* ── XJI 徽章（strategy / destiny 标题区下方单行）── */
.xji-badge {
display: flex; align-items: center; gap: 8px;
min-height: 36px; box-sizing: border-box;
max-width: 560px; margin: 14px auto 0;
padding: 7px 16px;
background: rgba(212, 175, 55, 0.08);
border-left: 3px solid var(--lab-fire);
border-radius: 0 6px 6px 0;
font-size: 13px; color: var(--lab-text-dim);
letter-spacing: 0.02em;
}
.xji-badge-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--lab-gold); flex-shrink: 0;
box-shadow: 0 0 6px rgba(201, 162, 39, 0.6);
}
.xji-badge[data-conflict="1"] .xji-badge-dot { background: var(--lab-fire); }
.xji-badge-label {
color: var(--lab-text-mute); font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0;
}
.xji-badge-score {
font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
font-size: 18px; font-weight: 600; color: var(--lab-gold);
flex-shrink: 0;
}
.xji-badge-state { color: var(--lab-ivory); font-weight: 600; flex-shrink: 0; }
.xji-badge[data-conflict="1"] .xji-badge-state { color: var(--lab-fire); }
.xji-badge-sep { color: var(--lab-text-mute); flex-shrink: 0; }
.xji-badge-verdict {
color: var(--lab-text-dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 480px) {
.xji-badge { font-size: 12px; gap: 6px; padding: 7px 12px; }
.xji-badge-label { display: none; }
.xji-badge-score { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.xji-bar-fill { transition: none; }
.xji-zone { transition: none; }
}
/* ── 浅色模式：token 自适应，仅补 SVG 内联 rgba 对比度兜底 ── */
:root[data-theme="light"] .xji-zone-active {
filter: drop-shadow(0 0 7px rgba(184,134,11,0.55));
}
:root[data-theme="light"] .xji-bar-track {
background: rgba(184,134,11,0.10);
}
/* ── 移动端 ≤480px：dial/radar 上下堆叠，缩放 ── */
@media (max-width: 480px) {
.xji-grid { grid-template-columns: 1fr; gap: 14px; }
#xjiDial { max-width: 220px; }
#xjiRadar { max-width: 240px; }
.xji-state-name { font-size: 21px; }
.xji-bars { gap: 8px; }
.xji-bar-item { grid-template-columns: 38px 1fr 48px; gap: 9px; }
.xji-sub { font-size: 11.5px; }
}
/* ============================================================
=== TD ANNUAL FORTUNE === 年度交易命盘（区域5，全 --lab-* token）
暗色默认 + :root[data-theme="light"] 覆盖 + @media(max-width:480px)
============================================================ */
.td-annual-gate {
max-width: 460px; margin: 18px auto 8px; text-align: center;
padding: 28px 20px; border-radius: 14px;
background: rgba(212, 175, 55, 0.05);
border: 1px solid var(--lab-border);
}
.td-annual-gate-icon { font-size: 34px; margin-bottom: 10px; }
.td-annual-gate p {
font-size: 13px; color: var(--lab-text-dim);
margin: 0 0 18px; line-height: 1.7;
}
.td-annual-btn {
background: linear-gradient(180deg, var(--lab-gold), var(--lab-gold-dim));
color: var(--lab-bg); border: none; cursor: pointer;
padding: 11px 30px; border-radius: 8px;
font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
transition: filter 0.2s ease;
}
.td-annual-btn:hover { filter: brightness(1.08); }
.td-annual-btn:disabled { opacity: 0.6; cursor: default; }
.td-annual-err {
margin-top: 12px; font-size: 12px; color: var(--lab-fire);
}
.td-annual-block { margin: 22px 0 0; }
.td-annual-block-title {
font-size: 14px; font-weight: 600; color: var(--lab-gold);
letter-spacing: 0.08em; margin: 0 0 12px;
padding-left: 10px; border-left: 3px solid var(--lab-gold);
}
/* 板块1：核心命局结构表 */
.td-core-table { display: flex; flex-direction: column; gap: 1px;
border-radius: 8px; overflow: hidden; }
.td-core-row {
display: grid; grid-template-columns: 4px 56px 1.1fr 1.4fr;
align-items: center; gap: 12px;
padding: 11px 14px 11px 0; background: var(--lab-bg-card);
}
.td-core-bar { width: 4px; height: 100%; min-height: 30px;
align-self: stretch; border-radius: 2px; }
.td-core-item { font-size: 13px; font-weight: 600; color: var(--lab-ivory); }
.td-core-struct { font-size: 12.5px; color: var(--lab-text-dim);
font-family: var(--lab-font-mono); }
.td-core-impact { font-size: 12.5px; color: var(--lab-text-mute);
line-height: 1.6; }
.td-core-row.td-core-key {
background: rgba(212, 175, 55, 0.06);
}
.td-core-key .td-core-item,
.td-core-key .td-core-struct,
.td-core-key .td-core-impact {
font-weight: 700; color: var(--lab-gold);
}
/* 板块2：财运曲线 */
.td-fortune-curve { text-align: center; }
#tdFortuneCurve {
width: 100%; max-width: 760px; height: auto; display: block;
margin: 0 auto; overflow: visible;
}
/* 板块3：月度卡片轴 */
.td-monthly-cards {
display: flex; gap: 8px; overflow-x: auto;
padding-bottom: 8px; scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.td-mcard {
min-width: 110px; flex-shrink: 0;
border-radius: 12px; padding: 12px;
border: 1px solid var(--lab-border);
background: var(--lab-bg-card);
display: flex; flex-direction: column; gap: 5px;
}
.td-mcard.golden {
border-color: var(--lab-gold);
box-shadow: 0 0 12px rgba(201, 162, 39, 0.25);
background: rgba(201, 162, 39, 0.08);
}
.td-mcard.warning {
border-color: var(--lab-fire);
background: rgba(212, 52, 42, 0.06);
}
.td-mcard.current { border-width: 2px; }
.td-mc-label { font-size: 11px; color: var(--lab-text-dim);
letter-spacing: 0.02em; text-align: center; }
.td-mc-score {
font-size: 26px; font-weight: 600; color: var(--lab-gold);
font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
line-height: 1.1;
}
.td-mc-level { font-size: 12px; color: var(--lab-text-dim); }
.td-mc-tag {
align-self: flex-start; font-size: 10px; font-weight: 600;
padding: 2px 8px; border-radius: 10px;
}
.td-mcard.golden .td-mc-tag { background: var(--lab-gold); color: var(--lab-bg); }
.td-mcard.warning .td-mc-tag { background: var(--lab-fire); color: #fff; }
.td-mc-theme { font-size: 12px; font-weight: 600; color: var(--lab-ivory); }
.td-mc-verdict { font-size: 11px; color: var(--lab-text-mute);
line-height: 1.5; }
/* 板块4：全年总结 */
.td-year-summary {
display: flex; flex-direction: column; gap: 10px;
margin-top: 20px; padding: 16px 18px;
border-radius: 10px; background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
}
.td-ys-row { display: flex; align-items: baseline; gap: 12px;
font-size: 13px; }
.td-ys-label { color: var(--lab-text-dim); flex-shrink: 0;
min-width: 76px; }
.td-ys-months { color: var(--lab-gold); font-weight: 600; }
.td-ys-warning .td-ys-months { color: var(--lab-fire); }
.td-ys-trend {
font-size: 13px; color: var(--lab-text-dim); line-height: 1.7;
padding-top: 10px; border-top: 1px solid var(--lab-border);
}
/* 浅色模式：token 自适应，仅补硬编码 rgba 对比度 */
:root[data-theme="light"] .td-annual-gate { background: rgba(184,134,11,0.06); }
:root[data-theme="light"] .td-core-row.td-core-key { background: rgba(184,134,11,0.08); }
:root[data-theme="light"] .td-mcard.golden { background: rgba(184,134,11,0.10); }
:root[data-theme="light"] .td-mcard.warning { background: rgba(192,57,43,0.08); }
:root[data-theme="light"] .td-mcard.warning .td-mc-tag { color: #fff; }
/* 移动端 ≤480px：卡片更窄、核心表隐藏「结构」列（spec §第四步） */
@media (max-width: 480px) {
.td-mcard { min-width: 90px; padding: 10px; }
.td-mc-score { font-size: 22px; }
.td-core-row { grid-template-columns: 4px 50px 1fr; gap: 9px; }
.td-core-struct { display: none; }
.td-annual-gate { padding: 22px 14px; }
.td-ys-label { min-width: 64px; }
}
/* === NAV RIGHT CONTROLS (navux 2026-05-17 · 仅 body.lab-page，营销页不动) ===
* 统一 .eo-wallet-btn / .i18n-trigger / .theme-toggle 三控件为 36px 金色胶囊。
* scope 到 body.lab-page（2 class）→ 特异性高于 i18n-switcher.css/theme.css
* 的单类基规则，无视文件加载顺序仍生效；营销页(无 .lab-page)保持原样。
* 颜色用三层 token 兜底，i18n-switcher.css 也加载于无 lab.css 的营销页。*/
body.lab-page .eo-wallet-btn,
body.lab-page .i18n-trigger,
body.lab-page .eo-nav-burger,
body.lab-page .theme-toggle {
height: 36px;
/* 覆盖 lab-mobile.css 的 .lab-page button{min-height:44px} 通用点击区下限——
* 仅限这 3 个 nav chrome 控件（非主 CTA），按 spec 定 36px 胶囊 */
min-height: 36px;
border-radius: 18px;
border: 1px solid rgba(201,162,39,0.3);
background: transparent;
color: var(--lab-gold, var(--color-gold, #c9a227));
cursor: pointer;
transition: all .2s ease;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
flex-shrink: 0;
box-sizing: border-box;
}
body.lab-page .eo-wallet-btn,
body.lab-page .i18n-trigger {
padding: 0 14px;
font-size: 13px;
gap: 6px;
text-transform: none; /* 抹掉 i18n-trigger 的 uppercase/letter-spacing */
letter-spacing: normal;
}
body.lab-page .i18n-trigger { padding: 0 12px; }
body.lab-page .theme-toggle,
body.lab-page .eo-nav-burger { width: 36px; padding: 0; }
/* 汉堡按钮仅移动端出现；桌面端隐藏（导航链接走 nav-links）*/
body.lab-page .eo-nav-burger { display: none; }
body.lab-page .eo-wallet-btn:hover,
body.lab-page .i18n-trigger:hover,
body.lab-page .eo-nav-burger:hover,
body.lab-page .theme-toggle:hover {
border-color: var(--lab-gold, var(--color-gold, #c9a227));
background: rgba(201,162,39,0.08);
transform: none; /* 抹掉 theme.css 的 hover rotate(15deg) */
}
body.lab-page .eo-wallet-btn.connected {
border-color: rgba(74,222,128,0.5);
color: rgb(74,222,128);
}
body.lab-page .eo-wallet-dot {
width: 6px; height: 6px;
border-radius: 50%;
border: 1.5px solid currentColor;
box-sizing: border-box;
flex-shrink: 0;
}
body.lab-page .eo-wallet-btn.connected .eo-wallet-dot {
background: currentColor;
border-color: currentColor;
}
/* 控件统一左间距（不动 nav 结构 · 决策 #5）*/
body.lab-page .nav-theme,
body.lab-page #eoWalletBtn,
body.lab-page #i18n-switcher,
body.lab-page #eoNavBurger { margin-left: 8px; }
/* 亮色模式（scoped）*/
:root[data-theme="light"] body.lab-page .eo-wallet-btn,
:root[data-theme="light"] body.lab-page .i18n-trigger,
:root[data-theme="light"] body.lab-page .eo-nav-burger,
:root[data-theme="light"] body.lab-page .theme-toggle {
border-color: rgba(184,134,11,0.3);
color: var(--lab-gold, var(--color-gold, #b8860b));
}
/* 移动端 */
@media (max-width: 480px) {
body.lab-page .eo-wallet-btn { padding: 0 10px; font-size: 12px; }
body.lab-page .i18n-trigger { padding: 0 8px; font-size: 12px; }
body.lab-page .theme-toggle { width: 32px; height: 32px; min-height: 32px; }
}
/* === SAFE AREA (iPhone 刘海/灵动岛 · navux 2026-05-17 · 仅 body.lab-page) ===
* header.site 是 position:fixed;top:0（global styles.css）；viewport-fit=cover
* 后会被刘海遮挡。两独立杠杆：header 内 padding-top 把内容压到刘海下；
* body.lab-page padding-top 把 in-flow 内容（main：lab-today-main/os-wrap/
* td-wrap 三种）同步下移。fixed 不受 body padding 影响，故不重复计。*/
@supports (padding-top: env(safe-area-inset-top)) {
/* header 内部把内容压到刘海下（其 offsetHeight 因此已含安全区，
* JS 测得的 --eo-header-h 自然包含刘海，main 偏移无需再加 env，
* 故移除 navux 时的 body.lab-page{padding-top:env}（曾与 main 偏移
* 双重计算，且不足以补偿换行后的真实头高）。*/
body.lab-page header.site {
padding-top: max(14px, env(safe-area-inset-top));
}
body.lab-page .eo-wp-modal {
top: calc(50% + env(safe-area-inset-top) / 2);
}
}
/* === MOBILE NAV CONTENT OFFSET + DRAWER (mobilefix 2026-05-17) ===
* 决策 #1+#3：内容偏移不写死，用 JS 实测 header.site.offsetHeight 写入
* --eo-header-h；统一 body.lab-page main 一处搞定三页（lab-today-main /
* os-wrap / td-wrap），仅移动端覆盖（桌面沿用各自 80px，零回退）。
* --eo-header-h 已含 header 的 safe-area padding，故此处不再叠 env。*/
@media (max-width: 720px) {
body.lab-page main {
padding-top: calc(var(--eo-header-h, 60px) + 14px) !important;
}
}
/* 汉堡抽屉 —— 右侧滑入，0.25s ease，半透明遮罩 */
.eo-navd-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
z-index: 10000;
opacity: 0;
transition: opacity .25s ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.eo-navd-overlay.eo-navd-open { opacity: 1; }
.eo-navd {
position: fixed; top: 0; right: 0;
height: 100%;
width: min(78vw, 320px);
z-index: 10001;
background: var(--lab-bg-card, #150d10);
border-left: 1px solid rgba(201,162,39,0.28);
box-shadow: -16px 0 48px rgba(0,0,0,0.5);
transform: translateX(100%);
transition: transform .25s ease;
display: flex;
flex-direction: column;
padding: max(24px, env(safe-area-inset-top, 24px)) 0 env(safe-area-inset-bottom, 0px);
box-sizing: border-box;
}
.eo-navd.eo-navd-open { transform: translateX(0); }
.eo-navd-head {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 20px 18px;
}
.eo-navd-title {
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: var(--lab-text-dim, #9a8f6a);
}
.eo-navd-close {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(201,162,39,0.3);
background: transparent; color: var(--lab-gold, #c9a227);
cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.eo-navd-close:hover { background: rgba(201,162,39,0.08); }
.eo-navd a.eo-navd-link {
display: block;
padding: 18px 24px;
font-size: 19px;
letter-spacing: .04em;
color: var(--lab-ivory, #f0e7d5);
text-decoration: none;
border-left: 3px solid transparent;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.eo-navd a.eo-navd-link:hover {
background: rgba(201,162,39,0.06);
color: var(--lab-gold, #c9a227);
}
.eo-navd a.eo-navd-link.eo-navd-current {
color: var(--lab-gold, #c9a227);
border-left-color: var(--lab-gold, #c9a227);
background: rgba(201,162,39,0.08);
}
:root[data-theme="light"] .eo-navd {
background: #fdf8f0;
border-left-color: rgba(184,134,11,0.25);
box-shadow: -16px 0 48px rgba(0,0,0,0.18);
}
/* === EO WALLET PICKER (walletux 2026-05-17) === */
.eo-wp-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 9998;
backdrop-filter: blur(2px);
}
.eo-wp-modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background: var(--lab-bg-card);
border: 1px solid var(--lab-border);
border-radius: 16px;
padding: 24px 20px 16px;
width: 320px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.eo-wp-title {
text-align: center;
font-size: 16px;
color: var(--lab-ivory);
margin-bottom: 20px;
font-weight: 600;
}
.eo-wp-option {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 12px 16px;
border: 1px solid var(--lab-border);
border-radius: 10px;
background: var(--lab-bg-elev);
color: var(--lab-ivory);
cursor: pointer;
margin-bottom: 10px;
text-decoration: none;
transition: all .15s;
text-align: left;
font-size: 14px; font-weight: 500;
}
.eo-wp-option:hover {
border-color: var(--lab-gold);
background: rgba(201,162,39,0.08);
}
.eo-wp-option img { border-radius: 8px; flex-shrink: 0; }
/* 玄学金描边图标容器（账户菜单 SVG 图标，currentColor 继承）*/
.eo-wp-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(201,162,39,0.1);
border: 1px solid rgba(201,162,39,0.2);
display: flex; align-items: center; justify-content: center;
color: var(--lab-gold);
flex-shrink: 0;
}
.eo-wp-icon svg { display: block; }
.eo-wp-danger .eo-wp-icon {
background: rgba(212,52,42,0.1);
border-color: rgba(212,52,42,0.2);
color: var(--lab-fire);
}
.eo-wp-name { font-size: 14px; font-weight: 600; }
.eo-wp-chain { font-size: 11px; color: var(--lab-text-dim); margin-top: 2px; }
.eo-wp-cancel {
width: 100%; padding: 10px;
background: transparent;
border: none; color: var(--lab-text-dim);
font-size: 13px; cursor: pointer;
margin-top: 4px;
}
.eo-wp-cancel:hover { color: var(--lab-ivory); }
.eo-wp-danger:hover {
border-color: var(--lab-fire) !important;
background: rgba(212,52,42,0.08) !important;
}
:root[data-theme="light"] .eo-wp-modal {
background: #fdf8f0;
border-color: rgba(184,134,11,0.2);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
/* ═══ cardv2: 命格交易室解锁卡 v2（lmv2- 命名空间）═══
注：data-theme 挂在 ，故 spec 的 body[data-theme] 改 :root[data-theme]；
.lab-match-hook 基础规则带 border，v2 需 border:none 清除残留。 */
.lab-match-v2 {
position: relative;
border: none;
border-radius: 24px;
overflow: hidden;
background: #1A0A00;
padding: 44px 40px;
cursor: pointer;
margin: 24px 0;
transition: transform .15s ease, box-shadow .3s;
}
:root[data-theme="dark"] .lab-match-v2 { background: #0A0404; }
.lab-match-v2:hover { box-shadow: 0 24px 60px rgba(200,16,46,0.15); }
.lab-match-v2::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 75% 55% at 50% -5%, rgba(200,16,46,0.28) 0%, transparent 55%),
radial-gradient(ellipse 55% 35% at 85% 105%, rgba(201,162,39,0.16) 0%, transparent 50%),
radial-gradient(ellipse 35% 25% at 5% 80%, rgba(61,107,50,0.1) 0%, transparent 50%);
animation: lmv2BgPulse 5s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes lmv2BgPulse { from{opacity:.7} to{opacity:1} }
.lmv2-grid {
position: absolute; inset: -50%; width: 200%; height: 200%;
background-image:
linear-gradient(rgba(201,162,39,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,162,39,0.055) 1px, transparent 1px);
background-size: 40px 40px;
transform: rotate(15deg);
animation: lmv2Grid 22s linear infinite;
pointer-events: none;
}
@keyframes lmv2Grid { to { transform: rotate(15deg) translateX(40px); } }
.lmv2-rings {
position: absolute; right: -50px; top: 50%;
transform: translateY(-50%);
width: 280px; height: 280px;
pointer-events: none;
}
.lmv2-ring {
position: absolute; inset: 0; border-radius: 50%;
border: 1px solid rgba(201,162,39,0.18);
animation: lmv2Ring linear infinite;
}
.lmv2-ring:nth-child(1){animation-duration:8s;border-color:rgba(201,162,39,0.28);}
.lmv2-ring:nth-child(2){inset:24px;animation-duration:13s;animation-direction:reverse;}
.lmv2-ring:nth-child(3){inset:48px;animation-duration:17s;border-color:rgba(200,16,46,0.2);}
.lmv2-ring:nth-child(4){inset:72px;animation-duration:21s;animation-direction:reverse;}
.lmv2-ring:nth-child(5){inset:96px;animation-duration:6s;border-color:rgba(201,162,39,0.38);border-width:1.5px;}
.lmv2-ring::after {
content:''; position:absolute; width:6px; height:6px;
background:#C9A227; border-radius:50%;
top:-3px; left:50%; transform:translateX(-50%);
box-shadow:0 0 8px #C9A227;
}
.lmv2-ring:nth-child(3)::after{background:#C8102E;box-shadow:0 0 8px #C8102E;}
@keyframes lmv2Ring { to { transform:rotate(360deg); } }
.lmv2-symbol {
position: absolute; right: 30px; top: 50%;
transform: translateY(-50%);
width: 160px; height: 160px;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.lmv2-diamond {
width: 68px; height: 68px;
border: 2px solid #C9A227; transform: rotate(45deg);
position: relative;
animation: lmv2DPulse 3s ease-in-out infinite;
box-shadow: 0 0 28px rgba(201,162,39,0.28);
}
.lmv2-diamond::before {
content:''; position:absolute; inset:8px;
border:1px solid rgba(201,162,39,0.35);
}
.lmv2-diamond::after {
content:'乙'; position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
transform:rotate(-45deg);
font-family:'Noto Serif SC',serif; font-size:18px;
color:#C9A227; text-shadow:0 0 16px rgba(201,162,39,0.8);
}
@keyframes lmv2DPulse {
0%,100%{box-shadow:0 0 18px rgba(201,162,39,0.25);}
50%{box-shadow:0 0 48px rgba(201,162,39,0.55),0 0 80px rgba(201,162,39,0.1);}
}
.lmv2-pt {
position: absolute; bottom: 20%; width: 3px; height: 3px;
border-radius: 50%; background: var(--pc, #C9A227);
pointer-events: none; opacity: 0;
animation: lmv2Float linear infinite;
}
@keyframes lmv2Float {
0%{opacity:0;transform:translateY(0) scale(0);}
10%{opacity:.7;} 90%{opacity:.2;}
100%{opacity:0;transform:translateY(-90px) scale(1.5);}
}
.lmv2-content { position:relative; z-index:10; max-width:480px; }
.lmv2-eyebrow {
font-size:10px; letter-spacing:4px;
color:rgba(201,162,39,0.5); margin-bottom:12px;
text-transform:uppercase;
}
.lmv2-title {
font-family:'Noto Serif SC',serif; font-size:28px; font-weight:700;
color:#FFFDF7; line-height:1.28; margin-bottom:10px;
}
.lmv2-title span {
background:linear-gradient(135deg,#C9A227,#F0D060,#C9A227);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text;
}
.lmv2-desc {
font-size:13px; color:rgba(255,253,247,0.5);
line-height:1.85; margin-bottom:22px;
}
.lmv2-stats { display:flex; gap:22px; margin-bottom:24px; }
.lmv2-snum {
font-family:'Noto Serif SC',serif; font-size:18px; font-weight:700;
color:#C9A227; text-shadow:0 0 16px rgba(201,162,39,0.5);
}
.lmv2-slbl {
font-size:10px; color:rgba(255,253,247,0.3);
letter-spacing:.8px; margin-top:2px;
}
.lmv2-btn {
display:inline-flex; align-items:center; gap:10px;
background:linear-gradient(135deg, #C9A227, #E8B830);
color:#1A0A00;
border:none; padding:13px 26px; border-radius:40px;
font-family:'Noto Sans SC',sans-serif; font-size:13px;
font-weight:600; letter-spacing:.8px; cursor:pointer;
box-shadow:0 8px 28px rgba(201,162,39,0.4);
transition:all .3s ease; position:relative; overflow:hidden;
}
.lmv2-btn::before {
content:''; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent);
opacity:0; transition:opacity .3s;
}
.lmv2-btn:hover::before{opacity:1;}
.lmv2-btn:hover{
transform:translateY(-2px);
box-shadow:0 14px 40px rgba(201,162,39,0.6);
}
.lmv2-arrow { transition:transform .3s; }
.lmv2-btn:hover .lmv2-arrow { transform:translateX(4px); }
.lmv2-disc { margin-top:12px; font-size:10px; color:rgba(255,253,247,0.22); }
@media (max-width: 720px) {
.lab-match-v2 { padding: 32px 20px; }
.lmv2-rings, .lmv2-symbol { display: none; }
.lmv2-content { max-width: 100%; }
.lmv2-title { font-size: 22px; }
}
/* ═══ lightmode: 今日命盘解锁卡 .lab-match-v2 白天模式适配 ═══
data-theme 挂 → 仅用 :root[data-theme="light"]（删冗余 html[]，G2）。
夜间保持现有深色不动；!important 赢 base 级联。 */
:root[data-theme="light"] .lab-match-v2 {
background: #FFFDF7 !important;
border: 1px solid rgba(201,162,39,0.25) !important;
box-shadow: 0 4px 24px rgba(201,162,39,0.08) !important;
}
:root[data-theme="light"] .lab-match-v2::before {
background:
radial-gradient(ellipse 75% 55% at 50% -5%, rgba(201,162,39,0.12) 0%, transparent 55%),
radial-gradient(ellipse 55% 35% at 85% 105%, rgba(201,162,39,0.08) 0%, transparent 50%) !important;
}
:root[data-theme="light"] .lmv2-grid {
background-image:
linear-gradient(rgba(201,162,39,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,162,39,0.035) 1px, transparent 1px) !important;
}
:root[data-theme="light"] .lmv2-title { color: #1A0A00 !important; }
/* G1：今日卡标题文字全在 span（亮金渐变 transparent fill），浅底需深金渐变才可读 */
:root[data-theme="light"] .lmv2-title span {
background: linear-gradient(135deg, #8B6914, #C9A227, #8B6914) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
:root[data-theme="light"] .lmv2-desc { color: rgba(107,84,48,0.7) !important; }
:root[data-theme="light"] .lmv2-disc { color: rgba(107,84,48,0.45) !important; }
:root[data-theme="light"] .lmv2-slbl { color: rgba(107,84,48,0.5) !important; }
:root[data-theme="light"] .lmv2-eyebrow { color: rgba(139,105,20,0.65) !important; }
:root[data-theme="light"] .lmv2-snum { color: #8B6914 !important; text-shadow: 0 0 12px rgba(201,162,39,0.3) !important; }
:root[data-theme="light"] .lmv2-ring { border-color: rgba(201,162,39,0.15) !important; }
:root[data-theme="light"] .lmv2-ring:nth-child(1) { border-color: rgba(201,162,39,0.22) !important; }
:root[data-theme="light"] .lmv2-ring:nth-child(5) { border-color: rgba(201,162,39,0.3) !important; }
:root[data-theme="light"] .lmv2-ring::after {
background: #C9A227 !important;
box-shadow: 0 0 6px rgba(201,162,39,0.5) !important;
}
:root[data-theme="light"] .lmv2-diamond {
border-color: #C9A227 !important;
box-shadow: 0 0 20px rgba(201,162,39,0.2) !important;
}
/* G3：「乙」字浅底加深为 #8B6914（镜像 destiny） */
:root[data-theme="light"] .lmv2-diamond::after {
color: #8B6914 !important;
text-shadow: 0 0 10px rgba(201,162,39,0.4) !important;
}
/* === NAV FIX (navfix 2026-05-18 · 仅 body.lab-page) ===
* 安卓 360px 单排 nav（flex-wrap:nowrap，控件全 flex-shrink:0）控件累计宽
* 超视口 23px，最后的 #eoNavBurger 被顶出右缘仅 36% 可见。≤400px 收紧
* gap/控件左距/内距/字号腾出余量让汉堡完整（零 JS、零结构改动）。 */
@media (max-width: 400px) {
body.lab-page header.site > nav { gap: 4px; padding: 10px 12px; }
body.lab-page .nav-theme,
body.lab-page #eoWalletBtn,
body.lab-page #i18n-switcher,
body.lab-page #eoNavBurger { margin-left: 4px; }
body.lab-page .eo-wallet-btn { padding: 0 8px; font-size: 11px; gap: 4px; }
body.lab-page .i18n-trigger { padding: 0 6px; font-size: 11px; }
body.lab-page header.site .logo { font-size: 15px; }
}
/* 汉堡按钮首访金光晕引导（eo-auth.js 注入后加 .eo-nav-burger-pulse；
* sessionStorage 一次性；box-shadow 不影响布局/不加宽）。 */
body.lab-page .eo-nav-burger.eo-nav-burger-pulse {
animation: eoBurgerPulse 1.2s ease-in-out 3;
}
@keyframes eoBurgerPulse {
0% { box-shadow: 0 0 0 0 rgba(201,162,39,0.55); }
60% { box-shadow: 0 0 0 9px rgba(201,162,39,0); }
100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}
@media (prefers-reduced-motion: reduce) {
body.lab-page .eo-nav-burger.eo-nav-burger-pulse { animation: none; }
}
/* ═══ cardpulse: State2「已建档·无 preset」卡视觉升级（lms- 命名空间·恒深色）
data-theme 挂 → 白天用 :root[data-theme="light"] !important 强制保持
深色（与 lmv2- 同策略 G2）。lms- 全新命名，与 lmv2-/lab-match-card-* 零冲突。
元素色经 JS 注入 --lms-el（沿用 line2526 --card-color 同桥接，不用 color-mix
保持与既有 CSS 一致）。viewBtn/editLink 行为由 lab.js 保留不变。 */
.lms-card {
position: relative;
border: none;
border-radius: 22px;
overflow: hidden;
background: #0E0704;
padding: 32px 30px;
margin: 24px 0;
box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
:root[data-theme="light"] .lms-card {
background: #0E0704 !important;
border: none !important;
box-shadow: 0 18px 50px rgba(0,0,0,0.35) !important;
}
.lms-card::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 50% at 100% 0%, rgba(201,162,39,0.22) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 0% 100%, rgba(200,16,46,0.12) 0%, transparent 55%);
}
.lms-card::after {
content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
linear-gradient(rgba(201,162,39,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,162,39,0.04) 1px, transparent 1px);
background-size: 34px 34px;
}
.lms-inner { position: relative; z-index: 2; }
.lms-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
color: rgba(201,162,39,0.62); margin-bottom: 18px;
}
.lms-eyebrow::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #3D6B32; box-shadow: 0 0 8px #3D6B32;
animation: lmsLive 1.8s ease-in-out infinite;
}
@keyframes lmsLive { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.lms-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.lms-avatar {
flex-shrink: 0; width: 60px; height: 60px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-family: 'Noto Serif SC', serif; font-size: 30px; font-weight: 700;
color: var(--lms-el, #C9A227);
background: rgba(255,255,255,0.03);
border: 1px solid var(--lms-el, #C9A227);
box-shadow: 0 0 24px var(--lms-el, #C9A227);
text-shadow: 0 0 18px var(--lms-el, #C9A227);
}
.lms-htext { min-width: 0; }
.lms-title {
margin: 0 0 6px;
font-family: 'Noto Serif SC', serif;
font-size: 22px; font-weight: 700; line-height: 1.3; color: #FFFDF7;
}
.lms-meta { margin: 0; font-size: 13px; color: rgba(255,253,247,0.5); }
.lms-eltag {
display: inline-block; margin-left: 6px; padding: 2px 10px;
border-radius: 4px; font-weight: 700;
color: var(--lms-el, #C9A227);
background: rgba(212,175,55,0.12);
}
.lms-ready {
display: flex; align-items: center; gap: 8px;
font-size: 12px; letter-spacing: 1px;
color: rgba(201,162,39,0.78); margin: 0 0 8px;
}
.lms-bar {
position: relative; height: 5px; border-radius: 3px; overflow: hidden;
background: rgba(255,255,255,0.06); margin-bottom: 22px;
}
.lms-bar::before {
content: ''; position: absolute; inset: 0; border-radius: 3px;
background: linear-gradient(90deg, #C8102E 0%, #C9A227 55%, #F0D060 100%);
}
.lms-bar::after {
content: ''; position: absolute; top: 0; left: -40%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
animation: lmsShimmer 2.6s ease-in-out infinite;
}
@keyframes lmsShimmer { 0%{left:-40%;} 60%,100%{left:110%;} }
.lms-cta {
display: inline-flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, #C9A227, #E8B830);
color: #1A0A00; border: none;
padding: 13px 28px; border-radius: 40px;
font-family: 'Noto Sans SC', sans-serif; font-size: 14px;
font-weight: 700; letter-spacing: .6px; cursor: pointer;
box-shadow: 0 8px 26px rgba(201,162,39,0.42);
transition: transform .25s ease, box-shadow .25s ease;
}
.lms-cta::after { content: '›'; font-size: 18px; transition: transform .25s ease; }
.lms-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(201,162,39,0.6); }
.lms-cta:hover::after { transform: translateX(4px); }
.lms-edit {
display: block; margin-top: 16px; font-size: 12px;
color: rgba(255,253,247,0.4); text-decoration: none;
letter-spacing: .3px; transition: color .15s ease;
}
.lms-edit:hover { color: rgba(201,162,39,0.85); }
.lms-edit-key { opacity: .65; }
.lms-edit-val { color: rgba(255,253,247,0.7); }
.lms-edit-act {
color: #C9A227; text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 720px) {
.lms-card { padding: 26px 20px; }
.lms-title { font-size: 19px; }
.lms-avatar { width: 52px; height: 52px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.lms-eyebrow::before, .lms-bar::after { animation: none; }
}
/* ═══ cardpulse: 年度命盘 gate 升级（tdann- 命名空间）
.td-annual-* 全族 CSS 本就在 lab.css（4298+），destiny.html 引 lab.css
(line17) → tdann- 续写于此单一真源，复用上方 lmsLive keyframes。gate 同时
带 .td-annual-gate(基础) + .tdann-gate(升级)；后者源序在后→赢同特异性。
深色加 :root[data-theme="dark"] 变体；浅色沿用 base+line4420 token。 */
.tdann-gate {
position: relative; overflow: hidden;
max-width: 520px; padding: 30px 26px;
}
.tdann-gate::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,162,39,0.14) 0%, transparent 60%);
}
:root[data-theme="dark"] .tdann-gate {
background: #0E0704;
border-color: rgba(201,162,39,0.22);
}
.tdann-eyebrow {
position: relative; display: inline-flex; align-items: center; gap: 7px;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
color: rgba(201,162,39,0.7); margin-bottom: 16px;
}
.tdann-eyebrow::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #3D6B32; box-shadow: 0 0 8px #3D6B32;
animation: lmsLive 1.8s ease-in-out infinite;
}
.tdann-months {
position: relative; display: grid;
grid-template-columns: repeat(12, 1fr); gap: 5px;
margin: 0 0 12px;
}
.tdann-m {
display: flex; align-items: center; justify-content: center;
height: 30px; border-radius: 6px; font-size: 11px; font-weight: 700;
color: rgba(255,253,247,0.45);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
opacity: 0; animation: tdannPop .4s ease forwards;
animation-delay: calc(var(--i, 1) * .045s);
}
/* 仅中性(平稳)月在浅底改深棕；金/警月须排除——否则此 (0,2,1) 规则会盖掉
.tdann-m-g/.tdann-m-w 的 (0,1,0) 配色 → 浅色下金/警月褪成米色失去节奏对比。 */
:root[data-theme="light"] .tdann-m:not(.tdann-m-g):not(.tdann-m-w) {
color: rgba(107,84,48,0.55);
background: rgba(184,134,11,0.06);
border-color: rgba(184,134,11,0.14);
}
@keyframes tdannPop {
from { opacity: 0; transform: translateY(6px) scale(.85); }
to { opacity: 1; transform: none; }
}
.tdann-m-g {
color: #1A0A00;
background: linear-gradient(135deg, #C9A227, #F0D060);
border-color: rgba(201,162,39,0.6);
box-shadow: 0 0 12px rgba(201,162,39,0.4);
}
.tdann-m-w {
color: #FFE3DE;
background: rgba(200,16,46,0.28);
border-color: rgba(200,16,46,0.5);
}
/* 浅底：金月(gold gradient+#1A0A00)对比已足，沿用 base；警月需加深红+白字
才在米色卡上读得清（base 的 28% 红+浅粉字浅底太弱）。 */
:root[data-theme="light"] .tdann-m-w {
color: #FFFFFF;
background: rgba(200,16,46,0.78);
border-color: rgba(200,16,46,0.6);
}
.tdann-legend {
display: flex; justify-content: center; gap: 16px;
margin: 0 0 22px; font-size: 11px; color: var(--lab-text-dim);
}
.tdann-lg { display: inline-flex; align-items: center; gap: 6px; }
.tdann-lg::before {
content: ''; width: 9px; height: 9px; border-radius: 3px;
}
.tdann-lg-g::before { background: linear-gradient(135deg, #C9A227, #F0D060); }
.tdann-lg-w::before { background: rgba(200,16,46,0.6); }
.tdann-lg-n::before { background: rgba(255,255,255,0.14); }
:root[data-theme="light"] .tdann-lg-n::before { background: rgba(184,134,11,0.18); }
.tdann-cta-wrap {
position: relative; display: inline-block;
border-radius: 8px; overflow: hidden;
}
.tdann-cta-wrap::after {
content: ''; position: absolute; top: 0; left: -60%;
width: 50%; height: 100%; z-index: 2; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
animation: tdannSweep 3s ease-in-out infinite;
}
@keyframes tdannSweep { 0%{left:-60%;} 55%,100%{left:120%;} }
.tdann-btn { position: relative; z-index: 1; }
@media (max-width: 520px) {
.tdann-m { height: 26px; font-size: 10px; }
.tdann-legend { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.tdann-eyebrow::before, .tdann-cta-wrap::after, .tdann-m { animation: none; }
.tdann-m { opacity: 1; }
}