﻿/* NOVAX v4 · 模块页样式（资讯/C2C/理财/秒合约/金融/股票/代理）*/
.mod-page{max-width:1120px;margin:0 auto;padding:24px 20px}
.mod-hd{margin-bottom:22px;animation:pageFadeIn .5s var(--ease) both}
.mod-hd h1{font-size:24px;font-weight:800;margin-bottom:6px;letter-spacing:.01em;color:var(--t1)}
.mod-hd p{font-size:13px;color:var(--t3);line-height:1.7}
.news-item,.ad-row,.order-card,.fin-card,.trader-card,.stock-row,.micro-item,.micro-chart,.panel{transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.news-tabs{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.news-tabs button{background:none;border:1px solid var(--line2);border-radius:999px;padding:7px 18px;font-size:12.5px;color:var(--t2);cursor:pointer;font-weight:600;transition:all var(--dur-fast) var(--ease)}
.news-tabs button:hover{color:var(--t1);border-color:var(--brand);background:var(--brand-dim)}
.news-tabs button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-dim);font-weight:800;box-shadow:0 6px 16px -10px rgba(42,100,251,.6)}
.news-item{padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer}
.news-item:hover .t{color:var(--brand)}
.news-item .t{font-size:15px;font-weight:700;margin-bottom:6px;transition:color var(--dur-fast) var(--ease);color:var(--t1)}
.news-item .m{font-size:11.5px;color:var(--t3);display:flex;gap:14px}
.news-item .body{font-size:13.5px;color:var(--t2);line-height:1.9;margin-top:12px;padding:16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);white-space:pre-wrap;animation:pageFadeIn .3s var(--ease) both}
html[data-theme="light"] .news-item .body,body[data-theme="light"] .news-item .body,:root.nx-theme-light .news-item .body,html.nx-theme-light .news-item .body,body.nx-theme-light .news-item .body,[data-theme="light"] .news-item .body,.nx-theme-light .news-item .body{background:#fbfcfe;border-color:#e3e7ef}
.c2c-grid{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.c2c-side-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.c2c-side-tabs button{height:42px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--bg3);font-size:14px;font-weight:800;cursor:pointer;color:var(--t3);transition:all var(--dur-fast) var(--ease)}
.c2c-side-tabs button:hover{color:var(--t1)}
.c2c-side-tabs button.on.buy{background:var(--up-dim);border-color:var(--up);color:var(--up);box-shadow:0 8px 18px -10px rgba(42,100,251,.55)}
.c2c-side-tabs button.on.sell{background:var(--dn-dim);border-color:var(--dn);color:var(--dn);box-shadow:0 8px 18px -10px rgba(239,68,68,.55)}
.ad-row{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr 1fr;gap:8px;align-items:center;padding:14px 14px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--bg2)}
.ad-row:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 12px 30px -14px rgba(0,0,0,.55)}
.ad-row .u{font-size:13px;font-weight:700;color:var(--t1)}
.ad-row .u .mb{display:inline-block;margin-left:6px;font-size:10px;color:var(--brand);border:1px solid var(--brand);padding:0 5px;border-radius:4px;font-weight:800}
.ad-row .px{font-size:15px;font-weight:800;color:var(--brand)}
.ad-row .rng{font-size:11.5px;color:var(--t3)}
.ad-row .pay{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-card{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:16px;margin-bottom:12px}
.order-card:hover{border-color:var(--line2);box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
.order-card .row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.order-card .amt{font-size:22px;font-weight:800;color:var(--t1)}
.st-pill{font-size:10.5px;font-weight:800;padding:3px 11px;border-radius:999px;letter-spacing:.05em}
.st-pending{background:var(--brand-dim);color:var(--brand);box-shadow:0 0 0 1px rgba(42,100,251,.24) inset}
.st-paid{background:var(--up-dim);color:var(--up);box-shadow:0 0 0 1px rgba(42,100,251,.22) inset}
.st-completed{background:var(--up-dim);color:var(--up);box-shadow:0 0 0 1px rgba(42,100,251,.22) inset}
.st-appeal{background:var(--dn-dim);color:var(--dn);box-shadow:0 0 0 1px rgba(239,68,68,.22) inset}
.st-cancelled{background:var(--bg4);color:var(--t3);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.chat-box{max-height:240px;overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r2);padding:10px;margin:10px 0}
html[data-theme="light"] .chat-box,body[data-theme="light"] .chat-box,:root.nx-theme-light .chat-box,html.nx-theme-light .chat-box,body.nx-theme-light .chat-box,[data-theme="light"] .chat-box,.nx-theme-light .chat-box{background:#fafbfd;border-color:#e3e7ef}
.chat-line{margin-bottom:8px;font-size:12.5px;line-height:1.55}
.chat-line .w{color:var(--t3);font-size:10.5px;margin-right:6px;font-weight:700}
.chat-line.mine .tx{color:var(--brand);font-weight:600}
.chat-input{display:flex;gap:8px;margin-top:6px}
.chat-input input{flex:1;height:36px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:0 10px;outline:none;color:var(--t1);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.chat-input input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
html[data-theme="light"] .chat-input input,body[data-theme="light"] .chat-input input,:root.nx-theme-light .chat-input input,html.nx-theme-light .chat-input input,body.nx-theme-light .chat-input input,[data-theme="light"] .chat-input input,.nx-theme-light .chat-input input{background:#fff}
@media (max-width:900px){.c2c-grid{grid-template-columns:1fr}.ad-row{grid-template-columns:1.3fr 1fr 1fr;}.ad-row .rng,.ad-row .pay{display:none}}
.fin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.fin-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.fin-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 18px 38px -18px rgba(42,100,251,.6)}
.fin-card .nm{font-size:15px;font-weight:800;margin-bottom:2px;color:var(--t1)}
.fin-card .dy{font-size:11.5px;color:var(--t3);margin-bottom:14px}
.fin-card .rt{font-size:30px;font-weight:900;color:var(--brand);letter-spacing:-.01em}
.fin-card .rt small{font-size:12px;font-weight:500;color:var(--t3);margin-left:4px}
.fin-card .mt{font-size:11.5px;color:var(--t3);margin:10px 0 18px;line-height:1.7}
.micro-grid{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.micro-chart{height:320px;position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.micro-chart:hover{border-color:var(--line2)}
.micro-price{position:absolute;top:16px;left:18px;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--t1)}
.micro-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.micro-center .cur{font-size:46px;font-weight:900;letter-spacing:-.01em}
.micro-center .cnt{font-size:14px;color:var(--t3);font-variant-numeric:tabular-nums;font-weight:600}
.dur-row{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.dur-row button{flex:1;min-width:64px;height:34px;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r2);color:var(--t2);font-size:12px;cursor:pointer;font-weight:600;transition:all var(--dur-fast) var(--ease)}
.dur-row button:hover{color:var(--t1);border-color:var(--brand)}
.dur-row button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-dim);font-weight:800}
.est-box{padding:12px 14px;border:1px dashed var(--line2);border-radius:var(--r2);background:var(--bg);margin:10px 0}
.est-box .row{display:flex;justify-content:space-between;padding:5px 0;font-size:12.5px;color:var(--t2)}
.est-box .row b{font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums}
.dir-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.dir-row button{height:54px;border-radius:var(--r2);border:0;font-size:16px;font-weight:900;cursor:pointer;transition:filter var(--dur-fast) var(--ease),transform 80ms var(--ease),box-shadow var(--dur-fast) var(--ease);letter-spacing:.04em}
.dir-row button:active{transform:translateY(1px)}
.dir-row .up{background:linear-gradient(135deg,var(--up),var(--up2));color:#fff;box-shadow:0 10px 24px -10px rgba(42,100,251,.75)}
.dir-row .dn{background:linear-gradient(135deg,var(--dn),var(--dn2));color:#fff;box-shadow:0 10px 24px -10px rgba(239,68,68,.75)}
.dir-row .up:hover{filter:brightness(1.08)}
.dir-row .dn:hover{filter:brightness(1.08)}
.micro-list{max-height:520px;overflow-y:auto}
.micro-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);margin-bottom:8px;font-size:12.5px;background:var(--bg2)}
.micro-item:hover{border-color:var(--line2);transform:translateY(-1px)}
html[data-theme="light"] .est-box,body[data-theme="light"] .est-box,:root.nx-theme-light .est-box,html.nx-theme-light .est-box,body.nx-theme-light .est-box,[data-theme="light"] .est-box,.nx-theme-light .est-box{background:#fafbfd}
@media (max-width:900px){.micro-grid{grid-template-columns:1fr}}
.trader-card{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1.1fr;gap:8px;align-items:center;padding:16px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);margin-bottom:8px}
.trader-card:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 14px 34px -16px rgba(0,0,0,.55)}
.trader-card .nm{font-size:14px;font-weight:800;color:var(--t1)}
.trader-card .sub{font-size:10.5px;color:var(--t3);margin-top:3px;font-weight:600}
@media (max-width:900px){.trader-card{grid-template-columns:1.4fr 1fr 1fr}.trader-card .c3,.trader-card .c4{display:none}}
.stock-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:8px;align-items:center;padding:14px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);margin-bottom:8px}
.stock-row:hover{border-color:var(--line2);transform:translateY(-1px);box-shadow:0 10px 26px -16px rgba(0,0,0,.5)}
.stock-row .nm{font-size:14px;font-weight:800;color:var(--t1)}
.stock-row .nm small{color:var(--t3);font-weight:500;margin-left:8px;font-size:11px}
.stock-row .px{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--t1)}
html[data-theme="light"] .stock-row:hover,body[data-theme="light"] .stock-row:hover,:root.nx-theme-light .stock-row:hover,html.nx-theme-light .stock-row:hover,body.nx-theme-light .stock-row:hover,[data-theme="light"] .stock-row:hover,.nx-theme-light .stock-row:hover,html[data-theme="light"] .trader-card:hover,body[data-theme="light"] .trader-card:hover,:root.nx-theme-light .trader-card:hover,html.nx-theme-light .trader-card:hover,body.nx-theme-light .trader-card:hover,[data-theme="light"] .trader-card:hover,.nx-theme-light .trader-card:hover,html[data-theme="light"] .ad-row:hover,body[data-theme="light"] .ad-row:hover,:root.nx-theme-light .ad-row:hover,html.nx-theme-light .ad-row:hover,body.nx-theme-light .ad-row:hover,[data-theme="light"] .ad-row:hover,.nx-theme-light .ad-row:hover,html[data-theme="light"] .fin-card:hover,body[data-theme="light"] .fin-card:hover,:root.nx-theme-light .fin-card:hover,html.nx-theme-light .fin-card:hover,body.nx-theme-light .fin-card:hover,[data-theme="light"] .fin-card:hover,.nx-theme-light .fin-card:hover{box-shadow:0 14px 30px -18px rgba(15,23,34,.18)}
@media (max-width:900px){.stock-row{grid-template-columns:1.4fr 1fr 1fr}.stock-row .c4{display:none}}
.agent-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.v3-panel{margin-top:16px}
.qr-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qr-box{width:140px;height:140px;background:#fff;border-radius:var(--r2);padding:6px;flex:0 0 140px;box-shadow:0 0 0 1px var(--line)}
/* ============================================================
   UICraft · mods.css 动效增强（资讯/C2C/理财/秒合约/金融/股票/代理）
   ============================================================ */

/* ---- 模块页 Header：入场编排 ---- */
.mod-hd h1 { animation: enterHero var(--dur-640) var(--ease-out-expo)  both; animation-delay: 160ms; }
.mod-hd p  { animation: enterLift var(--dur-520) var(--ease-out-quart) both; animation-delay: 260ms; }

/* ---- 资讯：Tabs 呼吸 + 新闻列表 stagger ---- */
.news-tabs button { position: relative; overflow: hidden; }
.news-tabs button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%);
  opacity: 0; transition: opacity var(--dur-200) var(--ease-out-quart);
  pointer-events: none;
}
.news-tabs button:hover::after { opacity: 1; }
.news-tabs button.on { animation: statusPop var(--dur-420) var(--ease-out-quart); }

.news-item {
  animation: enterLift var(--dur-420) var(--ease-out-quart) both;
  animation-delay: calc(80ms + var(--i, 0) * 60ms);
  position: relative;
}
.news-item .t { position: relative; display: inline-block; }
.news-item .t::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--brand);
  transition: width var(--dur-300) var(--ease-out-quart);
}
.news-item:hover .t::after { width: 100%; }
.news-item:nth-child(n+10) { animation-delay: calc(80ms + 9 * 60ms); } /* 第10项后停止stagger */

/* ---- C2C：买卖按钮强调 + 广告行/订单卡 hover 抬升 ---- */
.c2c-side-tabs button { position: relative; overflow: hidden; }
.c2c-side-tabs button::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%);
  pointer-events: none;
}
.c2c-side-tabs button.on { animation: glowPulse var(--dur-420) var(--ease-out-quart) both; }

.ad-row, .order-card, .fin-card, .trader-card, .stock-row, .micro-item {
  animation: enterLift var(--dur-420) var(--ease-out-quart) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.ad-row:nth-child(n+10), .order-card:nth-child(n+10),
.fin-card:nth-child(n+10), .trader-card:nth-child(n+10),
.stock-row:nth-child(n+10), .micro-item:nth-child(n+10) {
  animation-delay: calc(9 * 55ms);
}
/* C2C：下单/状态 pill 脉冲 */
.st-pill {
  position: relative;
  transition: transform var(--dur-200) var(--ease-out-quart), box-shadow var(--dur-200) var(--ease-out-quart);
}
.order-card:hover .st-pill { transform: translateY(-1px); }

/* 聊天气泡：进场微弹 */
.chat-line {
  animation: chatIn var(--dur-300) var(--ease-out-quart) both;
}
@keyframes chatIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 理财：收益率数字 + 卡片描边呼吸 ---- */
.fin-card .rt {
  display: inline-block;
  transition: transform var(--dur-300) var(--ease-out-quart), filter var(--dur-300) var(--ease-out-quart);
}
.fin-card:hover .rt { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 6px 12px rgba(42,100,251,.35)); }
.fin-card { position: relative; overflow: hidden; }
/* 角标 ribbon："热推" 斜角（可选视觉） */
.fin-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 96px; height: 96px;
  background: radial-gradient(circle at 100% 0%, rgba(42,100,251,.22), transparent 60%);
  transform: translate(20%, -20%);
  opacity: 0;
  transition: opacity var(--dur-300) var(--ease-out-quart), transform var(--dur-300) var(--ease-out-quart);
  pointer-events: none;
}
.fin-card:hover::after { opacity: 1; transform: translate(0, 0); }

/* ---- 秒合约：做/空按钮 按压下沉 + 倒计时环形进度（背景） ---- */
.dur-row button { position: relative; overflow: hidden; }
.dur-row button.on {
  animation: statusPop var(--dur-300) var(--ease-out-quart);
}
.dir-row .up, .dir-row .dn {
  position: relative;
}
.dir-row .up::after, .dir-row .dn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 50%);
  pointer-events: none;
  transform: translateY(100%);
  transition: transform var(--dur-420) var(--ease-out-quart);
}
.dir-row .up:hover::after, .dir-row .dn:hover::after { transform: translateY(0); }
.dir-row .up:active, .dir-row .dn:active {
  transform: translateY(2px) scale(.985) !important;
  filter: brightness(.95) !important;
  transition-duration: var(--dur-100) !important;
}
/* 秒合约中心倒计时：浮动感 + 微缩放呼吸 */
.micro-center .cur {
  animation: microFloat 4s var(--ease-in-out) infinite;
  transition: color var(--dur-200) var(--ease-out-quart), text-shadow var(--dur-200) var(--ease-out-quart);
}
@keyframes microFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-3px) scale(1.008); }
}
/* 秒合约图表：进场淡入 */
.micro-chart { animation: enterPop var(--dur-520) var(--ease-out-quart) both; animation-delay: 120ms; }

/* ---- 金融：盈利/胜率 发光 ---- */
.trader-card .c3 .num {
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-200) var(--ease-out-quart), text-shadow var(--dur-200) var(--ease-out-quart);
}
.trader-card:hover .c3 .num.up { color: var(--up); text-shadow: 0 0 14px rgba(42,100,251,.35); }
.trader-card:hover .c3 .num.dn { color: var(--dn); text-shadow: 0 0 14px rgba(239,68,68,.35); }

/* ---- 股票行：价格上涨下落脉冲 ---- */
.stock-row .px.flash-up { animation: flashUp .55s var(--ease-out-quart); background-color: transparent !important; }
.stock-row .px.flash-dn { animation: flashDn .55s var(--ease-out-quart); background-color: transparent !important; }
.stock-row::before { /* 行级 pulse */ content: none; }
.stock-row .px { transition: color var(--dur-200) var(--ease-out-quart); }

/* ---- 代理中心：统计卡 stagger + QR 描边 ---- */
.agent-stats .stat, .agent-stats > * {
  animation: enterPop var(--dur-420) var(--ease-out-quart) both;
  animation-delay: calc(100ms + var(--i, 0) * 80ms);
}
.agent-stats > *:nth-child(n+8) { animation-delay: calc(100ms + 7 * 80ms); }
.qr-box {
  transition: transform var(--dur-300) var(--ease-out-quart), box-shadow var(--dur-300) var(--ease-out-quart), filter var(--dur-300) var(--ease-out-quart);
}
.qr-box:hover {
  transform: translateY(-3px) scale(1.01);
  filter: drop-shadow(0 10px 20px rgba(42,100,251,.3));
  box-shadow: 0 0 0 1px rgba(42,100,251,.22);
}

/* ---- 预估框（est-box） 虚线边交互：hover 变实 ---- */
.est-box { transition: border-color var(--dur-300) var(--ease-out-quart), border-style var(--dur-300) var(--ease-out-quart); }
.est-box:hover { border-style: solid; }

@media (max-width:480px){.mod-page{padding:16px 14px}.mod-hd h1{font-size:20px}.fin-grid{grid-template-columns:repeat(2,1fr);gap:10px}.fin-card{padding:14px}.fin-card .rt{font-size:24px}.agent-stats{grid-template-columns:repeat(2,1fr)}.c2c-side-tabs button{height:40px;font-size:13px}.micro-chart{height:260px}.micro-center .cur{font-size:34px}.dir-row button{height:50px;font-size:14px}.qr-wrap{flex-direction:column;align-items:flex-start}.qr-box{margin:0 auto}}
