/* web/assets/style.css — 精致国风水墨红金 · 全站共用样式 v2
   美学方向：朱砂红 + 鎏金 + 宣纸白，水墨晕染质感 + 现代微交互 */

:root{
  /* 强制浅色配色体系：阻止浏览器/系统"自动深色模式"把本站反转成暗色（会来回闪变） */
  color-scheme:light;
  /* 核心色 */
  --red:#8e1c1c; --red-deep:#5c0f0f; --red-light:#b83030;
  --gold:#c9a24b; --gold-bright:#e8c866; --gold-dim:#a67c2e;
  --ink:#2c2016; --ink-soft:#6b5a48; --ink-faint:#a89880;
  --cream:#f7efe0; --paper:#fffdf5; --paper-warm:#fbf5e5; --line:#e6d9b8;
  /* 行情色（注意 A 股红涨绿跌）*/
  --up:#c0392b; --down:#1f8a4c; --flat:#8a7a5a;
  /* 功能色 */
  --pos:#1f8a4c; --neg:#c0392b; --warn:#d35400;
  /* 阴影 */
  --shadow-sm:0 1px 4px rgba(92,15,15,.08);
  --shadow-md:0 4px 16px rgba(92,15,15,.12);
  --shadow-lg:0 8px 32px rgba(92,15,15,.16);
  /* 字体配对：衬线用于品牌/标题/导航，无衬线用于数据/正文/表格（兼顾国风与易读） */
  --font-display:"Noto Serif SC","Songti SC","Source Han Serif SC","SimSun",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  /* 圆角 */
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  /* 过渡 */
  --ease:cubic-bezier(.4,.0,.2,1);
}

/* ============ 基础重置 ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;background:var(--cream)}   /* 固定页面底色：首帧即同色，杜绝深浅闪变 */
html,body{max-width:100%;overflow-x:hidden}   /* 防隐藏提示框/装饰元素撑出横向滚动条 */
body{
  font-family:var(--font-body);
  color:var(--ink);line-height:1.65;
  background:
    radial-gradient(1400px 700px at 15% -5%, rgba(200,160,75,.12) 0%, transparent 55%),
    radial-gradient(1000px 500px at 100% 5%, rgba(142,28,28,.06) 0%, transparent 50%),
    radial-gradient(800px 600px at 50% 100%, rgba(108,120,50,.05) 0%, transparent 60%),
    linear-gradient(180deg,var(--cream) 0%, #f4ead2 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}
a{color:var(--red);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--red-light)}
/* 键盘焦点环（无障碍）：仅 focus-visible 触发，鼠标点击不显示 */
a:focus-visible,.nav a:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.rank-tab:focus-visible,details summary:focus-visible{
  outline:2px solid var(--gold-bright);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(201,162,75,.22);
  border-radius:var(--r-sm);
}
.nav a:focus-visible{outline-offset:3px;border-radius:var(--r-sm)}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============ 顶部导航（玻璃毛效果 + 鎏金装饰） ============ */
.sitehead{
  background:linear-gradient(135deg,var(--red-deep) 0%,var(--red) 50%,#7c1a16 100%);
  color:#f4e7c9;
  border-bottom:2px solid var(--gold);
  box-shadow:0 2px 18px rgba(92,15,15,.35), inset 0 -1px 0 rgba(232,200,102,.3);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(8px);
}
.sitehead-inner{display:flex;align-items:center;gap:18px}

/* 品牌字标：朱砂印 + 鎏金名号（弥补"头部只有导航、无站点身份"的缺口） */
.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:#f4e7c9;text-decoration:none;transition:transform .25s var(--ease)}
.brand:hover{transform:translateY(-1px);text-decoration:none;color:#fff}
.brand-seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#b83030,var(--red-deep));
  border:1.5px solid var(--gold-bright);
  color:#f7e7c0;font-family:"Noto Serif SC","Songti SC",serif;
  font-size:1.15rem;font-weight:700;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.3), inset 0 0 0 1px rgba(232,200,102,.4);
}
.brand-text{display:inline-flex;flex-direction:column;line-height:1.12;font-family:var(--font-display)}
.brand-text b{font-size:1.12rem;font-weight:700;color:#f7e7c0;letter-spacing:.12em;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.brand-text i{font-style:normal;font-size:.66rem;font-weight:400;color:var(--gold-bright);letter-spacing:.18em;margin-top:2px}

.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:10px 0}
.nav a{
  color:#f4e7c9;padding:8px 14px;border-radius:var(--r-sm);font-size:.93rem;
  transition:all .25s var(--ease);
  position:relative;letter-spacing:.05em;
  font-family:var(--font-display);
}
.nav a:hover{background:rgba(232,200,102,.18);text-decoration:none;color:#fff}
.nav a.on{
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  color:var(--red-deep);font-weight:700;
  box-shadow:0 2px 8px rgba(201,162,75,.4);
}
.nav-user{display:inline-flex;align-items:center;gap:6px;color:var(--gold-bright);font-size:.88rem;padding:4px 12px;background:rgba(0,0,0,.15);border-radius:20px;margin-left:auto}

/* ============ 卡片（宣纸底 + 朱砂左边框 + 微浮动） ============ */
.card{
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-warm) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:22px 24px;margin:20px 0;
  position:relative;
  min-width:0;max-width:100%;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.card::before{
  content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--gold-bright),var(--red),var(--gold-dim));
  box-shadow:0 0 12px rgba(201,162,75,.4);
}
.card h2{
  font-size:1.18rem;color:var(--red-deep);margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px dashed var(--line);letter-spacing:.08em;font-weight:700;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-display);
}
.card h2::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 6px var(--gold);
}
.card h2 .en{font-size:.68rem;color:var(--ink-soft);letter-spacing:.12em;margin-left:auto;font-weight:400;text-transform:uppercase}

/* ============ 四柱盘（鎏金边框 + 微发光） ============ */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0}
.pillar{
  text-align:center;padding:18px 8px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#fcf7ea 0%,#f4e8cc 100%);
  transition:all .25s var(--ease);
  position:relative;overflow:hidden;
}
.pillar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,transparent 40%,rgba(201,162,75,.08) 50%,transparent 60%);
  opacity:0;transition:opacity .3s;
}
.pillar:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--gold)}
.pillar:hover::after{opacity:1}
.pillar .pi{font-size:2rem;color:var(--red);letter-spacing:.15em;font-weight:700;text-shadow:0 1px 0 rgba(201,162,75,.3);font-family:var(--font-body);font-variant-numeric:tabular-nums}
.pillar .pl{font-size:.78rem;color:var(--ink-soft);margin-top:8px;letter-spacing:.15em}
.pillar.on{box-shadow:inset 0 0 0 2px var(--gold-bright),0 0 20px rgba(232,200,102,.3);background:#fff8e8}

/* ============ 标签/徽章 ============ */
.tag{
  display:inline-block;padding:3px 12px;border-radius:20px;font-size:.78rem;
  border:1px solid var(--line);background:#faf4e4;color:var(--ink);
  margin:2px 5px 2px 0;transition:all .2s;
}
.tag:hover{border-color:var(--gold);background:#fff8e8}
.badge{
  display:inline-block;min-width:52px;text-align:center;padding:4px 12px;border-radius:20px;
  font-size:.85rem;font-weight:700;color:#fff;letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
/* 吉凶等级色（A股红涨绿跌逻辑：吉=绿 忌=红）*/
.b-吉,.b-偏积极,.b-合宜,.b-up,.b-强,.b-偏强,.b-pos,.b-pos-num{background:linear-gradient(135deg,#1f8a4c,#27ae60)}
.b-良{background:linear-gradient(135deg,#27ae60,#2ecc71)}
.b-平,.b-中性,.b-flat,.b-neutral{background:linear-gradient(135deg,#b3963a,#c9a24b)}
.b-慎{background:linear-gradient(135deg,#c0392b,#d35400)}
.b-忌,.b-偏弱,.b-弱,.b-down,.b-neg,.b-neg-num{background:linear-gradient(135deg,#a93226,#c0392b)}
.b-gold{background:linear-gradient(135deg,#b8860b,#d97706)}
.b-warn{background:linear-gradient(135deg,#d68910,#f59e0b)}
.b-red{background:linear-gradient(135deg,#922b21,#dc2626)}

/* ============ 列表与表格 ============ */
ul.plain{list-style:none}
ul.plain li{
  padding:10px 6px;border-bottom:1px dashed var(--line);
  font-size:.93rem;transition:background .2s;
}
ul.plain li:last-child{border-bottom:none}
ul.plain li:hover{background:rgba(201,162,75,.06)}

table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem;border-radius:var(--r-md);overflow:hidden}
/* 宽表格横向滚动容器：包裹表格，移动端可横向滑动查看全部列（保留列对齐，避免 display:block 破坏布局） */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:var(--r-md)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{
  background:linear-gradient(180deg,#f8f0da,#f0e3c4);
  color:var(--red-deep);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  font-family:var(--font-display);
}
tr:hover td{background:rgba(201,162,75,.06)}
tr:last-child td{border-bottom:none}
.txh{text-align:right}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ============ 按钮 ============ */
.btn{
  border:1px solid var(--gold-dim);
  background:linear-gradient(180deg,#fff6e0,#f0dfb0);
  color:var(--red-deep);
  padding:9px 20px;border-radius:var(--r-sm);cursor:pointer;font-size:.9rem;
  transition:all .2s var(--ease);font-weight:600;letter-spacing:.03em;
  box-shadow:0 1px 3px rgba(92,15,15,.1);
  font-family:inherit;
  white-space:nowrap;                 /* 按钮文字绝不折行（长文案由按钮组换行处理） */
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn.primary{
  background:linear-gradient(135deg,var(--red-light),var(--red) 60%,var(--red-deep));
  color:#f7e7c0;border-color:var(--red-deep);
  box-shadow:0 2px 10px rgba(142,28,28,.4);
}
.btn.primary:hover{box-shadow:0 4px 16px rgba(142,28,28,.5);filter:brightness(1.05)}
.btn.danger{background:linear-gradient(135deg,#c0392b,#922b21);color:#fff;border-color:#922b21}
.btn.ghost{background:transparent;border-color:var(--ink-faint);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}

/* ============ 按钮组（统一间距与换行对齐，避免挤作一团/散落） ============ */
.btn-group{display:inline-flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.btn-group .btn{flex:0 0 auto}
.field>.btn,.field>.btn-group{flex:0 0 auto}

/* ============ 表单 ============ */
input,select,textarea{
  font-family:inherit;font-size:.88rem;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(180deg,#fffdf6,#fbf5e5);color:var(--ink);
  transition:all .2s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.2),var(--shadow-sm);
}
.field{margin:12px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
label{font-size:.88rem;color:var(--ink-soft);font-weight:500}
.sub-label{font-family:var(--font-display)}

/* ============ 进度条/计（动画版） ============ */
.meter{
  height:16px;background:linear-gradient(180deg,#f0e7cd,#e6d9b8);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative;
}
.meter::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3) 50%,transparent);
  animation:shimmer 2s infinite linear;
  width:30%;transform:translateX(-100%);
}
@keyframes shimmer{100%{transform:translateX(400%)}}
.meter>i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--red-light),var(--red));
  border-radius:7px;
  transition:width .6s var(--ease);
  position:relative;
}
.meter>i::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:20px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3));
  border-radius:0 7px 7px 0;
}
.meter.gold>i{background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright))}
.meter.green>i{background:linear-gradient(90deg,#27ae60,#2ecc71)}
.meter.blue>i{background:linear-gradient(90deg,#2980b9,#3498db)}

/* 涨跌色 */
.pos-num,.rt.pos-num{color:var(--up);font-weight:700;font-variant-numeric:tabular-nums}
.neg-num,.rt.neg-num{color:var(--down);font-weight:700;font-variant-numeric:tabular-nums}

/* ============ 布局格 ============ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* 关键修复：grid 子项默认 min-width:auto 会阻止收缩到比内部宽表格更小，
   导致卡片被撑出视口（如回测因子表 745px 把卡片撑到 811px 被 overflow:hidden 裁切）。
   显式 min-width:0 让子项可收缩，表格再由 .card table 横向滚动。 */
.grid2>*,.grid3>*,.grid4>*{min-width:0}
/* 卡片高度 = 内容自然高度（不写死、不加内部滚动）。
   用户要求"滑动显示不要"：取消 max-height 钳制与 overflow:auto 内滚，
   卡片按内容自适应撑高，整页正常滚动即可，不在卡片内出现"滑一下才看全"的滚动框。
   同排网格卡等高仍由 grid 默认 align-items:stretch 保证（只向上补齐到本排最高，不产生空白）。 */

.stat{text-align:center;padding:14px}
.stat .v{
  font-size:2rem;color:var(--red);font-weight:700;
  text-shadow:0 1px 0 rgba(201,162,75,.25);
  font-variant-numeric:tabular-nums;
  font-family:var(--font-body);line-height:1.1;
}
.stat .k{font-size:.8rem;color:var(--ink-soft);margin-top:4px;letter-spacing:.04em}

/* ============ 响应式 ============ */
@media(max-width:900px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:6px 10px;font-size:.88rem}
  .card{padding:16px;margin:14px 0}
}
@media(max-width:500px){
  .pillars{grid-template-columns:repeat(2,1fr);gap:8px}
  .pillar{padding:12px 4px}
  .pillar .pi{font-size:1.5rem}
}

/* ============ 提示/声明 ============ */
.tip{font-size:.82rem;color:var(--ink-soft);line-height:1.8;max-width:70ch}
.disclaimer{
  margin:26px 0 10px;padding:14px 20px;
  border-top:2px solid var(--gold);color:var(--ink-soft);
  font-size:.82rem;text-align:center;line-height:1.9;
  background:linear-gradient(180deg,transparent,rgba(201,162,75,.06));
}
.err{
  color:var(--up);font-size:.88rem;padding:10px 14px;
  background:linear-gradient(135deg,#fbece8,#fadbd4);
  border:1px solid #ecc;border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
}
.load{
  color:var(--ink-soft);font-size:.88rem;padding:20px;text-align:center;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.6}}
.offline{color:var(--gold-dim);font-size:.82rem;margin-top:6px}

/* ============ 内容排版协调（长文本防溢出 / 双列子卡等高对齐） ============ */
ul.plain li,.tip,.sub-card .tip{overflow-wrap:anywhere}
.sub-card{display:flex;flex-direction:column}
.sub-card .sub-label{flex:none}
.sub-card .sub-label+table,.sub-card .tip,.sub-card ul{min-width:0}
.stat .k{line-height:1.7}
.stat .tip{display:block;margin-top:6px}

/* ============ 特殊组件 ============ */
#radarBox{width:100%;height:340px}
.hidden{display:none!important}

/* 手动权重滑杆 */
.wrow{
  display:grid;grid-template-columns:130px 1fr 60px;gap:14px;
  align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);
  transition:background .2s;
}
.wrow:hover{background:rgba(201,162,75,.04)}
.wrow span{font-size:.9rem;color:var(--ink)}
.wrow input[type=range]{
  width:100%;height:6px;-webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  border-radius:3px;outline:none;
}
.wrow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--red);cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  border:2px solid var(--gold-bright);
}
.wrow b{font-variant-numeric:tabular-nums;text-align:right;color:var(--red);font-weight:700}

/* 实时强度榜 */
.rank-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:12px;gap:4px}
.rank-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;cursor:pointer;color:var(--ink-soft);
  border-bottom:2px solid transparent;font-size:.93rem;
  transition:all .2s var(--ease);font-weight:500;
  font-family:var(--font-display);
}
.rank-tab:hover{color:var(--red)}
.rank-tab.on{
  color:var(--red-deep);border-bottom-color:var(--red);font-weight:700;
  background:rgba(201,162,75,.08);border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.rank-engine{margin-left:auto;font-size:.78rem;line-height:2.4;color:var(--ink-soft)}

ol.rank{list-style:none;margin:0;padding:0}
ol.rank li{
  display:flex;align-items:center;gap:10px;
  padding:10px 8px;border-bottom:1px dashed var(--line);
  font-size:.92rem;transition:all .2s;
  border-radius:var(--r-sm);
}
ol.rank li:hover{background:rgba(201,162,75,.08);padding-left:12px}
ol.rank li:last-child{border-bottom:none}
ol.rank .nm{font-weight:700;color:var(--ink);min-width:110px;letter-spacing:.02em}
ol.rank .badge{flex:0 0 auto}
ol.rank .rt{font-variant-numeric:tabular-nums;font-weight:600}

.muted{color:var(--ink-soft)}

/* ============ 折叠面板 ============ */
details{margin:10px 0}
details summary{
  cursor:pointer;font-weight:600;margin:8px 0;
  padding:8px 14px;background:linear-gradient(90deg,#f8f0da,transparent);
  border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:all .2s;font-size:.93rem;color:var(--red-deep);
}
details summary:hover{background:linear-gradient(90deg,#f0e3c4,transparent);border-left-color:var(--red)}

/* ============ 滚动条美化（WebKit） ============ */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold-dim),var(--red-light));
  border-radius:5px;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold),var(--red))}

/* ============ 选中文字色 ============ */
::selection{background:rgba(201,162,75,.35);color:var(--ink)}

/* ============ 手机端增强 (<560px) ============ */
@media(max-width:560px){
  .wrap{padding:0 12px}
  .card{padding:14px 12px;margin:12px 0;border-radius:12px}
  .card::before{width:3px;top:12px;bottom:12px}
  .card h2{font-size:1.05rem;margin-bottom:10px;padding-bottom:8px;letter-spacing:.05em;row-gap:2px}
  .card h2 .en{width:100%;margin-left:0;margin-top:2px;font-size:.62rem;letter-spacing:.08em}
  
  .grid4{grid-template-columns:1fr 1fr;gap:10px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  
  .pillars{grid-template-columns:repeat(2,1fr);gap:8px}
  .pillar{padding:12px 4px;border-radius:10px}
  .pillar .pi{font-size:1.5rem;letter-spacing:.12em}
  .pillar .pl{font-size:.72rem}
  
  /* 导航：多行显示（用户要求"手机端导航做成多行"），去掉横向滚动，改为自动折行 + 胶囊样式 */
  .nav{flex-wrap:wrap;overflow:visible;scrollbar-width:auto;padding:8px 0;gap:6px 6px;justify-content:flex-start}
  .nav::-webkit-scrollbar{display:block}
  .nav a{padding:7px 11px;font-size:.85rem;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.42);white-space:nowrap;letter-spacing:.02em}
  .nav a:hover{background:rgba(232,200,102,.22)}
  .nav a.on{border-color:var(--gold);background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:var(--red-deep)}
  .nav-user{font-size:.78rem;padding:3px 8px;white-space:nowrap;margin-left:0}
  
  .stat{padding:8px 4px}
  .stat .v{font-size:1.6rem}
  .stat .k{font-size:.72rem}
  
  /* 窄屏表格重排：取消横向滑动 → 每行一张卡片、标签:值 纵向排列（用户要求"滑动显示不要"） */
  .card table{max-width:100%}
  .table-scroll{overflow:visible;-webkit-overflow-scrolling:auto}
  .bt-factor-table,.bt-target-table{min-width:0;width:100%}
  .bt-factor-table thead,.bt-target-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bt-factor-table,.bt-factor-table tbody,.bt-factor-table tr,.bt-factor-table td,
  .bt-target-table,.bt-target-table tbody,.bt-target-table tr,.bt-target-table td{display:block}
  .bt-factor-table tr,.bt-target-table tr{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .bt-factor-table td,.bt-target-table td{border:none;padding:6px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right;white-space:normal;line-height:1.5}
  .bt-factor-table td::before,.bt-target-table td::before{content:attr(data-label);font-weight:700;color:var(--red-deep);flex:0 0 auto;text-align:left;margin-right:8px}
  .bt-factor-table td.cell-title,.bt-target-table td.cell-title{display:block;text-align:left;font-size:1.06rem;font-weight:700;color:var(--red-deep);border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:6px}
  .bt-factor-table td.cell-title::before,.bt-target-table td.cell-title::before{content:""}
  .bt-factor-table td.diag,.bt-target-table td.diag{display:block;text-align:left}
  .bt-factor-table td.diag::before,.bt-target-table td.diag::before{display:block;margin-bottom:3px}
  .bt-target-table td.op{display:block;text-align:left}
  .bt-target-table td.op::before{content:""}
  th,td{padding:7px 8px;font-size:.82rem}
  
  /* 按钮更大，触摸友好；榜单内的小按钮保持紧凑 */
  .btn{padding:11px 16px;font-size:.95rem;border-radius:8px;min-height:44px}
  .card table .btn,ol.rank .btn,.btn-mini{min-height:auto;padding:5px 10px;font-size:.78rem}  /* 表内/榜单小按钮维持紧凑 */
  ol.rank li .btn,.bt-mini-tag+.btn,.bt-target-table .btn{white-space:nowrap}
  input,select,textarea{padding:11px 14px;font-size:16px;border-radius:8px}
  
  /* 滑杆更大 */
  .wrow{grid-template-columns:100px 1fr 50px;gap:8px;padding:12px 0}
  .wrow span{font-size:.85rem}
  .wrow input[type=range]{height:20px}
  .wrow input[type=range]::-webkit-slider-thumb{width:22px;height:22px;border-width:3px}
  
  /* 榜单优化 */
  ol.rank li{padding:10px 4px;gap:6px;font-size:.88rem;flex-wrap:wrap}
  ol.rank .nm{min-width:80px;font-size:.9rem}
  .rank-tabs{gap:2px;border-bottom-width:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rank-tab{padding:6px 10px;font-size:.82rem;white-space:nowrap}
  
  /* 吉凶时段表紧凑 */
  #timeTable th,#timeTable td{padding:6px 5px;font-size:.78rem}
  #timeTable td:nth-child(7){display:none} /* 隐藏说明列 */
  
  /* 消息紧凑 */
  .tip{font-size:.78rem;line-height:1.7;max-width:none}
  .disclaimer{font-size:.7rem;padding:8px 10px;margin:12px 0 4px;line-height:1.6;color:var(--ink-faint)}
  
  /* 标签紧凑 */
  .tag{padding:2px 8px;font-size:.72rem}
  .badge{min-width:42px;padding:3px 8px;font-size:.78rem}
  
  /* 列表紧凑 */
  ul.plain li{padding:8px 4px;font-size:.85rem}
  
  /* 进度条 */
  .meter{height:14px;border-radius:7px}
  
  /* 折叠面板 */
  details summary{padding:10px 12px;font-size:.88rem}
  
  /* 隐藏 shimmer 动画节省性能 */
  .meter::after{animation:none;display:none}
  
  /* 禁用 hover 上移（触摸设备） */
  .card:hover{transform:none}
  .pillar:hover{transform:none}
  ol.rank li:hover{padding-left:8px;background:rgba(201,162,75,.04)}

  /* 表单密集区：行改纵向，触屏友好（首页五行横条等展示类 field 保持横向） */
  #st_ai_form .field,#st_blend_sliders .field,#adm_ai_box .field,
  #mg_bazi_body .field,#st_bazi_body .field{flex-direction:column;align-items:stretch;gap:8px}
  #st_ai_form .btn,#st_blend_sliders .btn,#adm_ai_box .btn,#mg_bazi_body .btn{align-self:flex-start}
  /* 交易时段参考卡：徽标换行全宽，tip 撑满避免挤压 */
  .sub-label{flex-wrap:wrap;line-height:1.5}
  .sub-card .tip{word-break:break-word}
  .sub-card .badge{margin:2px 0}
  /* 问号解释 tip 全宽，避免被截断 */
  .wtf .wtf-tip{min-width:200px;max-width:86vw}
}

/* ============ 手机端深度打磨 (<520px) ============ */
@media(max-width:520px){
  /* 手动权重：标签独占一行，滑杆+数值一行，防三列挤压 */
  .wrow{grid-template-columns:minmax(0,1fr) 46px;row-gap:6px;padding:12px 2px}
  .wrow span{grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 引擎切换按钮：两列排布不溢出 */
  .engine-tabs{flex-wrap:wrap;gap:6px}
  .etab{flex:1 1 calc(50% - 6px);text-align:center;padding:10px 4px;font-size:.86rem;white-space:nowrap}
  /* 紫微十二宫圆盘：居中且不超过屏宽 */
  .ziwei-disc{display:flex;justify-content:center}
  .ziwei-disc svg{width:100%;max-width:340px}
  /* 雷达图高度适配 */
  #radarBox{height:250px}
  /* 日期/时间类输入：保证触摸高度与不溢出 */
  input[type=date],input[type=number],input[type=password]{min-height:44px}
}

/* ============ 超小屏 (<380px) ============ */
@media(max-width:380px){
  .pillars{grid-template-columns:repeat(2,1fr);gap:6px}
  .pillar .pi{font-size:1.2rem}
  .nav a{padding:5px 6px;font-size:.76rem}
  .nav-user{display:none}
  .stat .v{font-size:1.4rem}
  ol.rank li{font-size:.82rem}
  ol.rank .nm{min-width:70px;font-size:.85rem}
  .grid4{grid-template-columns:1fr}
}

/* ============ 横屏手机优化 ============ */
@media(max-height:500px) and (orientation:landscape){
  .card{padding:12px;margin:8px 0}
  .nav{padding:4px 0}
  .nav a{padding:4px 8px;font-size:.82rem}
  .stat{padding:6px}
  .stat .v{font-size:1.4rem}
}

/* ============ 高 DPI 优化 ============ */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .card{box-shadow:0 2px 8px rgba(92,15,15,.1)}
  .meter{box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
}

/* ============ 减少动画偏好 ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .meter::after{display:none}
  .card:hover{transform:none}
}

/* ============ 打印样式 ============ */
@media print{
  body{background:#fff;color:#000}
  .sitehead{position:static;background:#fff;color:#000;border:none;box-shadow:none}
  .nav a{color:#000;padding:4px 8px}
  .card{box-shadow:none;border:1px solid #ccc;margin:10px 0}
  .card::before{display:none}
  .btn{display:none}
  .meter{height:10px}
  .rank-tabs{display:none}
}

/* ================================================================
   视觉精修 v2（frontend-design 规范落地）
   —— 修复"一明一暗不停重复"：移除全局 shimmer 扫光与过强脉动；
      增加克制的入场动画、徽章微光、按钮交互与标题质感。
   ================================================================ */

/* 1) 治理闪烁主因：进度条 shimmer 扫光动画改为纯静态高光，不再反复明暗 */
.meter::after{content:none;display:none}
.meter>i::after{content:none}
.meter>i{position:relative;overflow:hidden}
.meter>i::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 45%,transparent 60%);
}
/* .load 脉动弱化：亮度起伏收敛，避免整块忽明忽暗 */
.load{animation:pulseSoft 2.4s ease-in-out infinite}
@keyframes pulseSoft{50%{opacity:.82}}

/* 2) 入场：页面骨架卡片依次柔和上浮（仅在整页加载执行一次；局部刷新不触发） */
@keyframes gzRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wrap>section{animation:gzRise .55s cubic-bezier(.2,.7,.3,1) both}
.wrap>section:nth-child(2){animation-delay:.05s}
.wrap>section:nth-child(3){animation-delay:.10s}
.wrap>section:nth-child(4){animation-delay:.15s}
.wrap>section:nth-child(5){animation-delay:.20s}
.sitehead{animation:gzRise .4s ease both}

/* 3) 标题质感：竖排引言 + 鎏金细线 */
.card h2{position:relative}
.card h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:56px;
  background:linear-gradient(90deg,var(--gold-bright),transparent);border-radius:2px;opacity:.7}

/* 4) 徽章 / 标签微光 */
.badge{box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.16)}
.tag{box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}

/* 5) 按钮交互强化 */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;left:0;top:0;height:100%;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-120%);transition:transform .5s var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(320%)}
.btn:active{transform:translateY(1px) scale(.99)}

/* 6) 统计数字：鎏金渐变强调 */
.stat .v{background:linear-gradient(135deg,var(--red-light),var(--red-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.stat .k{letter-spacing:.08em}

/* 7) 表头与行 hover 更精致 */
th{background:linear-gradient(180deg,#f8f0da,#efe1bf)}
tr:hover td{background:rgba(201,162,75,.05)}

/* 8) 榜单：序号强调 + 悬停左滑微光 */
ol.rank li .badge:first-child{box-shadow:0 2px 6px rgba(142,28,28,.25)}
ol.rank li:hover .nm{color:var(--red-deep)}

/* ================================================================
   产品化 v3（P0-P2 落地）：时效标注 · 分享卡 · 今日提醒 · 曲线 · 档案
   ================================================================ */
.src-tag{display:inline-block;padding:1px 8px;margin-left:6px;border:1px solid var(--border);border-radius:20px;
  font-size:.68rem;color:var(--ink-soft);background:rgba(255,255,255,.55);vertical-align:2px}
.reminder-bar{margin:10px 0;padding:8px 14px;border:1px solid #e2d3a8;border-radius:10px;background:linear-gradient(90deg,#fdf6e3,#f9efd8);
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.86rem}
.reminder-bar .k{color:var(--ink-soft)}
.share-btn{display:inline-block;padding:4px 12px;font-size:.78rem;border:1px solid #d8c490;border-radius:20px;color:var(--red-deep);
  background:rgba(255,255,255,.6);cursor:pointer;transition:all .2s}
.share-btn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.curve svg{width:100%;height:auto;display:block}
.curve .c-ok{color:var(--green-deep)}.curve .c-bad{color:var(--red)}
.fit-tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:.72rem;font-weight:600}
.fit-strong{background:#e7f3e6;color:#1f7a38}.fit-mid{background:#f6efdc;color:#a0751f}.fit-weak{background:#fbe9e7;color:#c0392b}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.arch-item{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fffdf6}
.arch-item .d{font-weight:700;color:var(--red-deep)}
.arch-item .s{font-size:.8rem;color:var(--ink-soft)}