/* project1014 · 超效率洞察 · 响应式样式（移动优先） */
:root{
  --bg:#0d1420; --bg2:#131c2c; --panel:#182338; --line:#243350;
  --tx:#e8eef7; --tx2:#a6b4cc;  /* 灰字提亮, 对比度约 7.5:1 */ --acc:#e8b339; --acc2:#3f8cff;
  --good:#2fbf71; --bad:#e05252; --radius:10px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--tx);
  font-family:-apple-system,"Segoe UI","Microsoft YaHei",Roboto,sans-serif;
  font-size:14px; line-height:1.55}
button{font:inherit; cursor:pointer}
select,input{font:inherit; background:var(--bg2); color:var(--tx);
  border:1px solid var(--line); border-radius:8px; padding:7px 10px}
a{color:var(--acc2); text-decoration:none}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:14px; padding:10px 16px; background:rgba(13,20,32,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); flex-wrap:wrap}
.brand{font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px}
.brand small{color:var(--tx2); font-weight:400}
.logo{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:linear-gradient(135deg,var(--acc),#c88a12); color:#111; font-size:14px}
.tabs{display:flex; gap:2px; flex:1; overflow-x:auto}
.tabs button{background:none; border:0; color:var(--tx2); padding:8px 12px;
  border-radius:8px; white-space:nowrap}
.tabs button.active{color:var(--tx); background:var(--panel)}
.userbox{color:var(--tx2); font-size:13px; display:flex; gap:8px; align-items:center}
.userbox .tier{padding:2px 8px; border-radius:99px; border:1px solid var(--line)}
.userbox .tier.paid{border-color:var(--acc); color:var(--acc)}
.userbox .tier.premium{border-color:var(--acc2); color:var(--acc2)}

/* ---------- 样本组切换（V2.94 三模块） ---------- */
.grpbar{max-width:1280px; margin:0 auto; padding:12px 14px 0;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.grpswitch{display:inline-flex; border:1px solid var(--line); border-radius:99px;
  background:var(--bg2); overflow:hidden}
.grpswitch button{background:none; border:0; color:var(--tx2); padding:7px 16px;
  font-size:13px; white-space:nowrap}
.grpswitch button.active{background:var(--acc); color:#111; font-weight:600}

/* ---------- 布局 ---------- */
main{max-width:1280px; margin:0 auto; padding:14px}
.tab{display:none}
.tab.active{display:block; animation:fade .25s}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1}}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.toolbar label{color:var(--tx2); font-size:13px; display:flex; gap:6px; align-items:center}
.toolbar input{flex:1; min-width:200px}
.chk{color:var(--tx2)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px}
.panel h3{font-size:14px; color:var(--tx); margin-bottom:10px; display:flex; gap:8px; align-items:center;
  flex-wrap:wrap; row-gap:4px}
/* 标题行里的下拉（个股页「同行业对比」的行业分类）：与工具栏的 label 同一套样式，
   下拉本身收小一号，免得在 14px 的标题行里显得过重 */
.panel h3 label{color:var(--tx2); font-size:13px; font-weight:400; display:flex; gap:6px; align-items:center}
.panel h3 select{padding:4px 8px; font-size:13px}
.chart{width:100%; height:320px}
.chart.tall{height:460px}
.chart.xbig{height:640px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px}
.card .k{color:var(--tx2); font-size:13px}
.card .v{font-size:22px; font-weight:700; margin-top:2px}
.card .v.good{color:var(--good)} .card .v.bad{color:var(--bad)} .card .v.acc{color:var(--acc)}
.muted{color:var(--tx2)} .small{font-size:13px} .xsmall{font-size:11.5px}
.h2{font-size:18px; font-weight:700}

/* ---------- 表格 ---------- */
.tablewrap{overflow:auto; max-height:520px; border-radius:8px}
@media (max-width:900px){.tablewrap{max-height:55vh}}  /* 手机/平板: 表格内部滚动, 表头在容器内吸顶 */
table{border-collapse:collapse; width:100%; font-size:14px; white-space:nowrap}
th,td{padding:7px 10px; text-align:right; border-bottom:1px solid var(--line)}
th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left}
th{position:sticky; top:0; background:var(--bg2); color:var(--tx2); font-weight:600}
tr:hover td{background:rgba(63,140,255,.06)}
td.eff-hi{color:var(--good); font-weight:600}
td.eff-lo{color:var(--bad)}
tr.clickable{cursor:pointer}
tr.cur td{background:rgba(232,179,57,.10); font-weight:600}
/* 宽表(可横向滚动): 首列冻结便于对照, 右缘虚线提示还有隐藏列 */
.tablewrap.wide th:first-child,.tablewrap.wide td:first-child{position:sticky; left:0; background:var(--bg2); z-index:2}
.tablewrap.wide th:first-child{z-index:3}
.tablewrap.wide{border-right:2px dashed rgba(232,179,57,.45)}

/* ---------- 按钮 ---------- */
.btn{background:var(--acc); color:#111; border:0; border-radius:8px; padding:8px 14px; font-weight:600}
.btn.ghost{background:transparent; color:var(--tx2); border:1px solid var(--line)}
.btn.big{padding:12px 28px; font-size:16px}
.btn:disabled{opacity:.5}
.btn.sm{padding:4px 10px; font-size:13px; font-weight:400}
.peers-summary{background:rgba(63,140,255,.07); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; margin-bottom:10px; font-size:13px; line-height:1.8}
.peers-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0 6px}
.peers-head h4{font-size:13.5px; color:var(--tx); margin:0}
#tb-cp{table-layout:fixed}
#tb-cp th:nth-child(3),#tb-cp td:nth-child(3){text-align:left}
/* 个股 · 同行业对比：两栏（年度口径 | 季度口径）各两块「排名」，点进去才是完整表 */
.peers-col h4{font-size:13.5px; color:var(--tx); margin:0 0 8px}
.peer-rank{display:block; width:100%; box-sizing:border-box; text-align:left; cursor:pointer;
  background:rgba(63,140,255,.07); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; margin-bottom:10px; color:var(--tx); font:inherit}
.peer-rank:hover{border-color:var(--acc)}
.peer-rank .t{display: block; color:var(--tx2); font-size:13px}
/* 名次是主角（放大），具体数值只正常显示；三行分开，层级才看得出来 */
.peer-rank .v{display: block; font-size:22px; font-weight:700; margin-top:2px}
.peer-rank .v i{font-size:13px; font-weight:400; font-style:normal; color:var(--tx2)}
.peer-rank .r{display: block; font-size:13px; margin-top:4px; color:var(--tx2)}
.peer-rank .r b{font-weight:600}
.peer-rank.na{cursor:default; background:transparent; border-style:dashed}
.peer-rank.na:hover{border-color:var(--line)}
.peer-rank.na .v{font-size:13.5px; font-weight:400; color:var(--tx2); margin-top:4px}

/* ---------- 登录遮罩 ---------- */
.mask{position:fixed; inset:0; z-index:100; background:rgba(8,12,20,.86);
  display:grid; place-items:center; padding:20px}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:28px; max-width:420px; text-align:center}
.modal h2{margin-bottom:10px} .modal p{margin-bottom:16px}
.modal input{width:100%}

/* ---------- 会员卡片 ---------- */
.tiercard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.tiercard h4{font-size:15px; margin-bottom:6px}
.tiercard .price{font-size:22px; font-weight:700; color:var(--acc); margin:6px 0}
.tiercard ul{list-style:none; color:var(--tx2); font-size:13px; margin:8px 0}
.tiercard li{padding:3px 0}
.tiercard.cur{border-color:var(--acc)}

/* ---------- 详情 ---------- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px}
.kv .k{color:var(--tx2)}
.prose{color:var(--tx); font-size:13px} .prose p{margin:6px 0}

/* ---------- 说明页：文章 / 时间线 / 参考文献 ---------- */
/* 说明页各段正文统一同一栏宽（与「缘起」一致），右边缘对齐 */
.about-main .prose,.about-main .timeline,.about-main .refs{max-width:820px}
.essay{font-size:13.5px; line-height:1.9}
.essay p{margin:11px 0}
.essay sup{color:var(--acc); font-size:10px; letter-spacing:1px}
.tl{display:grid; grid-template-columns:104px 1fr; gap:12px; padding:8px 0;
  border-bottom:1px dashed var(--line); font-size:13px; line-height:1.7}
.tl:last-of-type{border-bottom:0}
.tl-d{color:var(--acc); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.refs{font-size:12.5px; line-height:1.75}
.refs p{margin:7px 0; padding-left:2.4em; text-indent:-2.4em}

/* ---------- 说明页：左侧提纲 ---------- */
.about-wrap{display:grid; grid-template-columns:196px minmax(0,1fr); gap:12px; align-items:start}
.about-toc{position:sticky; top:60px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 6px; max-height:calc(100vh - 76px); overflow:auto}
.about-toc .toc-h{color:var(--tx2); font-size:13px; letter-spacing:3px; padding:2px 10px 8px}
.about-toc a{display:block; color:var(--tx2); font-size:12.5px; padding:6px 10px; border-radius:8px;
  border-left:2px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.about-toc a:hover{color:var(--tx); background:var(--bg2)}
.about-toc a.on{color:var(--acc); border-left-color:var(--acc); background:var(--bg2)}
#tab-about .panel{scroll-margin-top:60px}
/* 提纲折叠独立于全站 900px 断点：中等宽度仍保留左栏 */
@media (max-width:760px){
  .about-wrap{grid-template-columns:1fr}
  .about-toc{position:static; max-height:none; display:flex; gap:4px; overflow-x:auto; padding:6px}
  .about-toc .toc-h{display:none}
  .about-toc a{flex:none; border-left:0; border-bottom:2px solid transparent; border-radius:6px}
  .about-toc a.on{border-left:0; border-bottom-color:var(--acc)}
}

/* ---------- 付费标记 / 付费墙 ---------- */
.badge{font-size:12px; font-weight:600; padding:2px 8px; border-radius:99px;
  border:1px solid var(--line); color:var(--tx2); vertical-align:middle}
.badge.paid{border-color:var(--acc); color:var(--acc)}
.badge.free{border-color:var(--good); color:var(--good)}
.lockpanel{border:1px dashed var(--acc); border-radius:var(--radius);
  background:rgba(232,179,57,.06); padding:18px; text-align:center; color:var(--tx2)}
.lockpanel .lock{font-size:26px}
.lockpanel p{margin:8px 0 12px}
.dyn-head{border-color:rgba(232,179,57,.45)}

/* ---------- 炖魔股：闪光入口按钮 ---------- */
.magic-cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(120deg,#1a2440,#252e52 55%,#1a2440);
  border:1px solid rgba(232,179,57,.45); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:12px; overflow:hidden}
.magic-btn{position:relative; overflow:hidden; border:0; border-radius:14px;
  padding:14px 30px; font-size:19px; font-weight:800; letter-spacing:2px; color:#141005;
  background:linear-gradient(120deg,#e8b339,#ffd76f,#ff8a4d,#e8b339); background-size:280% 100%;
  animation:goldflow 4s linear infinite, magicon 2.4s ease-in-out infinite;
  transition:transform .15s}
.magic-btn:hover{transform:scale(1.05)}
.magic-btn:active{transform:scale(.97)}
.magic-btn::after{content:""; position:absolute; top:-20%; left:-70%; width:45%; height:140%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.9),transparent 80%);
  transform:skewX(-20deg); animation:shine 2.6s ease-in-out infinite; pointer-events:none}
@keyframes goldflow{to{background-position:280% 0}}
@keyframes shine{0%{left:-70%}55%,100%{left:150%}}
@keyframes magicon{0%,100%{box-shadow:0 0 10px rgba(232,179,57,.35),0 0 22px rgba(255,138,77,.15)}
  50%{box-shadow:0 0 24px rgba(232,179,57,.8),0 0 46px rgba(255,138,77,.4)}}
.magic-txt{color:var(--tx2); font-size:13px; max-width:520px}
.magic-txt b{color:var(--acc)}
/* 顶部导航的炖魔股入口：与首页闪光按钮同款金色流光 + 扫光 + 呼吸光晕（缩小版） */
.tabs .magic-tab{
  position:relative; overflow:hidden; border-radius:10px;
  color:#141005!important; font-weight:800; letter-spacing:1px;
  background:linear-gradient(120deg,#e8b339,#ffd76f,#ff8a4d,#e8b339); background-size:280% 100%;
  animation:goldflow 4s linear infinite, magicon 2.4s ease-in-out infinite;
  transition:transform .15s; margin:5px 6px; padding:6px 14px}
.tabs .magic-tab:hover{transform:scale(1.06)}
.tabs .magic-tab:active{transform:scale(.96)}
.tabs .magic-tab::after{content:""; position:absolute; top:-20%; left:-70%; width:45%; height:140%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.9),transparent 80%);
  transform:skewX(-20deg); animation:shine 2.6s ease-in-out infinite; pointer-events:none}
.tabs button.magic-tab.active{
  background:linear-gradient(120deg,#e8b339,#ffd76f,#ff8a4d,#e8b339); background-size:280% 100%;
  box-shadow:0 0 18px rgba(232,179,57,.75),0 0 36px rgba(255,138,77,.35)}
/* 底栏炖魔股: 普通导航项(仅金色文字, 无流光底块), 只有当前页才点亮 */
.bottombar button.magic-tab{color:var(--tx2)}  /* 底栏炖魔股与其他项同色, 仅当前页点亮 */
.bottombar button.magic-tab.active{color:var(--acc); background:rgba(232,179,57,.14)}

/* ---------- 炖魔股：策略卡片 ---------- */
.magic-head{border-color:rgba(232,179,57,.45)}
.strat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:10px; margin-bottom:12px}
.strat{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 13px; cursor:pointer; transition:border-color .15s, transform .15s}
.strat:hover{border-color:var(--acc); transform:translateY(-2px)}
.strat.active{border-color:var(--acc); background:linear-gradient(150deg,rgba(232,179,57,.10),var(--panel) 60%)}
.strat .ic{font-size:22px}
.strat h4{font-size:14.5px; margin:6px 0 4px}
.strat p{color:var(--tx2); font-size:13px; min-height:34px}
.strat .badge{position:absolute; top:10px; right:10px}
.strat.locked{opacity:.72}
.strat.locked:hover{opacity:1}
#sc-filters input[type=number]{width:110px}
#sc-params label{background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:6px 10px}

/* ---------- 底部导航（手机） ---------- */
.bottombar{display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:rgba(13,20,32,.96); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bottombar button{flex:1 1 0; min-width:0; background:none; border:0; color:var(--tx2);
  padding:12px 2px; min-height:44px; white-space:nowrap}
@media (max-width:420px){.bottombar button{font-size:12px}
  .bottombar .magic-tab{font-size:12px; letter-spacing:0}}
.bottombar button.active{color:var(--acc); background:rgba(232,179,57,.12); border-radius:8px}

/* ---------- 页脚（站点名 + ICP 序号） ---------- */
/* 与 main 同栏宽（1280 居中），分隔线跟正文左右边缘对齐；内容居中；手机上加 padding-bottom 让开固定底栏 */
.sitefoot{max-width:1280px; margin:0 auto; padding:16px 14px 24px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center;
  gap:4px 14px;
  border-top:1px solid var(--line); color:var(--tx2); font-size:12px}
.sitefoot a{color:var(--tx2)}
.sitefoot a:hover{color:var(--acc2)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  input,select,textarea{font-size:16px}   /* ≥16px: 防 iOS 聚焦自动缩放 */
  .grid2,.grid3{grid-template-columns:1fr}
  .tabs{display:none}
  .bottombar{display:flex}
  main{padding:10px 10px 118px}
  .sitefoot{padding:14px 10px 86px}   /* 86px: 让开 fixed 底栏（约 56px + 安全区） */
  .topbar{padding:8px 10px}
  .chart{height:280px} .chart.tall{height:380px} .chart.xbig{height:560px}
  .toolbar input{min-width:140px}
  .tl{grid-template-columns:84px 1fr; gap:8px}
  .magic-cta{gap:10px; padding:12px}
  .magic-btn{font-size:16px; padding:12px 22px; letter-spacing:1px}
  .strat-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}