:root {
  --bg: #130c1d;
  --bg-deep: #0c0813;
  --panel: rgba(36, 23, 49, .84);
  --panel-soft: rgba(48, 30, 63, .66);
  --line: rgba(206, 176, 224, .24);
  --ink: #f5effa;
  --muted: #b9acc7;
  --pink: #f18bbc;
  --pink-bright: #ffb3d7;
  --violet: #aa97f1;
  --teal: #53d0bb;
  --amber: #edc56e;
  --danger: #fa789d;
  --display: "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg-deep); }
body { margin: 0; color: var(--ink); min-width: 320px; background: radial-gradient(ellipse 100% 50% at 78% -6%, #412651 0%, transparent 61%), var(--bg); font-family: var(--display); }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
.ambient { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: .26; z-index: -1; }
.ambient-one { height: 420px; width: 420px; top: 29%; right: -170px; background: #8d3e7c; }
.ambient-two { height: 330px; width: 330px; bottom: -155px; left: -130px; background: #4a3a98; }
.site-header, main, .site-footer { max-width: 1320px; margin: 0 auto; }
.site-header { min-height: 82px; padding: 19px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(215, 184, 237, .13); }
.wordmark { display: inline-flex; gap: 10px; align-items: center; letter-spacing: .4px; }
.wordmark b { display: block; font-size: 17px; line-height: 16px; letter-spacing: 1px; }
.wordmark em { display: block; font-size: 9px; font-style: normal; letter-spacing: 2.8px; color: var(--pink); margin-top: 4px; }
.mark { width: 25px; height: 28px; display: inline-flex; align-items: flex-end; gap: 3px; transform: skew(-8deg); }
.mark span { display: block; width: 6px; border-radius: 8px 8px 2px 2px; background: linear-gradient(#ffbedc, #d15d9f); box-shadow: 0 0 15px rgba(255, 130, 185, .44); }
.mark span:nth-child(1) { height: 11px; }.mark span:nth-child(2) { height: 20px; }.mark span:nth-child(3) { height: 27px; }
.header-side { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(83, 208, 187, .11); }
main { padding: 36px 30px 64px; min-height: calc(100vh - 152px); }
.loading { height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 15px; }.loading p { margin: 0; }
.loader { width: 26px; height: 26px; border: 2px solid rgba(241,139,188,.25); border-top-color: var(--pink); border-radius: 50%; animation: spin .9s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow { color: #dbbdd3; font-size: 13px; letter-spacing: 1.9px; text-transform: uppercase; margin: 0 0 9px; }
.hero-title { margin: 0; font-size: clamp(32px, 5vw, 55px); line-height: 1.06; letter-spacing: -1px; max-width: 890px; }.hero-title .accent { color: var(--pink); }
.lede { margin: 15px 0 0; color: var(--muted); font-size: 16px; max-width: 800px; line-height: 1.8; }
.hero-layout { display: grid; grid-template-columns: .93fr 1.07fr; gap: 22px; margin-top: 29px; }.glass { background: linear-gradient(135deg, rgba(48, 30, 63, .88), rgba(23, 15, 33, .8)); border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(0,0,0,.18); border-radius: 20px; }
.score-card { padding: 28px; min-height: 303px; position: relative; overflow: hidden; }.score-card:before { content:""; position:absolute; right:-35px; top:-42px; width:180px; height:180px; background:radial-gradient(circle, rgba(241,139,188,.35), transparent 68%); }
.score-topline { display: flex; justify-content: space-between; color: #d9c9e3; font-size: 14px; }.score-orbit { margin: 24px 0 15px; width: 158px; height: 158px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--pink) var(--score-deg), rgba(239, 217, 249, .11) 0); box-shadow: 0 0 30px rgba(241,139,188,.13); }.score-inner { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: #1b1226; border: 1px solid rgba(228, 191, 239, .18); }.score-num { font-size: 54px; font-weight: 750; letter-spacing: -3px; line-height: .95; }.score-denom { font-size: 14px; color: var(--muted); margin-top: 5px; }.score-level { font-weight: 700; color: var(--pink-bright); font-size: 19px; }.score-meta { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }.pill { font-size: 12px; padding: 6px 9px; border: 1px solid rgba(219, 191, 230, .28); border-radius: 999px; color: #d7c9e0; }
.read-card { padding: 28px 30px; min-height: 303px; }.read-card h2, .section-heading h2 { margin: 0; font-size: 22px; }.read-card p { color: #ded4e5; line-height: 1.82; margin: 16px 0 20px; font-size: 16px; }.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.rule { padding: 13px 14px; background: rgba(67, 42, 81, .48); border-radius: 12px; font-size: 13px; color: #d9cfdf; line-height: 1.55; }.rule b { display: block; color: var(--pink-bright); margin-bottom: 4px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 47px 0 16px; }.section-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 500px; text-align: right; }
.risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.risk-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; min-height: 226px; display: flex; flex-direction: column; background: linear-gradient(145deg, rgba(49, 31, 64,.84), rgba(27, 18, 39,.84)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.risk-card:hover { transform: translateY(-4px); border-color: rgba(244, 150, 197, .75); box-shadow: 0 13px 31px rgba(244, 104, 166, .14); }.risk-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }.risk-card h3 { margin:0; font-size:18px; }.risk-score { font-size: 30px; font-weight: 760; letter-spacing:-1px; }.risk-value { margin: 14px 0 7px; font-size: 16px; line-height:1.45; }.risk-condition { margin: 0; color: #d4c8dd; font-size: 13px; line-height:1.55; min-height:40px; }.bar { height: 7px; background: rgba(216,191,230,.13); overflow:hidden; border-radius:7px; margin: 14px 0 10px; }.bar i { display:block; height:100%; border-radius:inherit; }.risk-note { color: #a99ab7; font-size: 11.5px; line-height:1.5; }.card-cta { margin-top: auto; padding-top: 11px; color: var(--pink-bright); font-size: 13px; font-weight: 700; }
.supply-panel { margin-top: 17px; padding: 22px 25px; border-left: 4px solid var(--pink); border-radius: 0 16px 16px 0; background: linear-gradient(90deg, rgba(77,38,71,.88), rgba(35,23,49,.82)); }.supply-panel h3 { font-size: 18px; margin: 0 0 7px; color: var(--pink-bright); }.supply-panel p { margin:0; color: #ded3e4; line-height:1.7; font-size:14px; }.supply-link { float:right; color:var(--pink-bright); font-size:13px; font-weight:700; }
.chart-stack { display:grid; grid-template-columns: 1.1fr .9fr; gap:17px; margin-top:18px; }.chart-panel { padding:17px; border-radius:16px; border:1px solid var(--line); background: rgba(20,13,29,.62); }.chart-panel h3 { margin:0 0 14px; font-size:16px; color:#e7d9ed; }.chart-panel img { display:block; max-width:100%; width:100%; height:auto; border-radius:9px; cursor: zoom-in; background:#140d1d; }.chart-panel .chart-caption { color:var(--muted); font-size:11px; margin:9px 0 0; line-height:1.5; }
.disclaimer { border-top:1px solid var(--line); margin-top:38px; padding-top:18px; color:#aa9bb6; font-size:12px; line-height:1.7; }.site-footer { border-top:1px solid rgba(215,184,237,.13); padding:20px 30px 28px; color:#8e809b; font-size:11px; display:flex; justify-content:space-between; gap:16px; }
.back { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; color:#e7c6d9; font-size:13px; }.back:hover { color:var(--pink-bright); }.detail-head { display:flex; gap:25px; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:24px; }.detail-head h1 { margin:0; font-size: clamp(32px,4.8vw,50px); letter-spacing:-1px; }.detail-head .subtitle { color:var(--muted); font-size:16px; margin:11px 0 0; }.detail-score { min-width:206px; padding:17px; border-radius:15px; background:rgba(62,37,77,.75); border:1px solid var(--line); }.detail-score label { color:var(--muted); font-size:12px; display:block; }.detail-score b { display:block; font-size:43px; line-height:1.05; margin:7px 0; }.detail-score small { color:#d7c9df; }
.detail-read { display:grid; grid-template-columns: 1fr 1fr; gap:17px; margin:22px 0; }.detail-read article { padding:20px; border:1px solid var(--line); background:rgba(37,24,50,.68); border-radius:16px; }.detail-read h2 { margin:0 0 10px; font-size:17px; }.detail-read p { margin:0; color:#d7cfdf; line-height:1.72; font-size:14px; }.detail-charts { display:grid; gap:17px; }.detail-chart { padding:20px; border-radius:16px; border:1px solid var(--line); background:rgba(20,13,29,.7); }.detail-chart h2 { font-size:18px; margin:0 0 14px; }.detail-chart img { display:block; width:100%; height:auto; border-radius:10px; cursor:zoom-in; }
.unlock-outlook { margin-top:17px; padding:21px; border:1px solid rgba(241,139,188,.5); background:linear-gradient(110deg,rgba(85,39,78,.76),rgba(30,19,42,.7)); border-radius:16px; }.unlock-outlook h2 { margin:0 0 14px; font-size:19px; }.unlock-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.unlock-stat { padding:14px; background:rgba(50,29,67,.73); border-radius:12px; }.unlock-stat span { display:block; color:var(--muted); font-size:12px; }.unlock-stat strong { display:block; margin-top:7px; color:var(--pink-bright); font-size:22px; }.calendar { display:flex; align-items:flex-end; min-height:210px; gap:5px; padding:18px 0 8px; border-bottom:1px solid var(--line); overflow-x:auto; }.month-bar { min-width:34px; flex:1; display:flex; min-height:178px; align-items:flex-end; position:relative; }.month-bar i { width:100%; display:block; border-radius:5px 5px 0 0; background:#88788f; min-height:4px; }.month-bar.future i { background:linear-gradient(#f19ac4,#d35e9e); }.month-bar b { position:absolute; bottom:-31px; left:50%; transform:translateX(-50%) rotate(-45deg); color:#a99ab7; font-size:10px; font-weight:400; white-space:nowrap; }.month-bar em { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:9px; font-style:normal; color:#dfd1e4; white-space:nowrap; }.calendar-note { color:var(--muted); font-size:12px; margin-top:42px; line-height:1.6; }
.image-modal { position:fixed; inset:0; display:none; place-items:center; padding:25px; background:rgba(7,4,10,.89); z-index:10; cursor:zoom-out; }.image-modal.active { display:grid; }.image-modal img { max-width:96vw; max-height:91vh; border-radius:10px; box-shadow:0 22px 80px #000; }
@media(max-width:900px){.hero-layout,.chart-stack{grid-template-columns:1fr}.risk-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:flex-start;flex-direction:column}.section-heading p{text-align:left}.detail-head{align-items:flex-start;flex-direction:column}.detail-score{width:100%}}
@media(max-width:600px){.site-header,main,.site-footer{padding-left:18px;padding-right:18px}.site-header{min-height:67px}.header-side{font-size:11px}.hero-title{font-size:34px}.lede{font-size:14px}.score-card,.read-card{padding:21px}.risk-grid,.detail-read,.rules,.unlock-stats{grid-template-columns:1fr}.risk-card{min-height:205px}.supply-link{float:none;display:block;margin-top:9px}.site-footer{display:block;line-height:1.8}.detail-head h1{font-size:34px}.detail-chart{padding:12px}}