/* ==========================================================================
   market.css —— 原材料期货行情小板块 / 资讯中心
   ==========================================================================
   配色沿用品牌色：主色 #163561（深海军蓝）、#E1EEF6（浅蓝）、#FAFAF8（纸白）
   风格：大留白、轻边框、数字用等宽字重强调；涨绿跌红（国内习惯：红涨绿跌）
   ========================================================================== */

/* ---------- 一、行情卡片 ---------- */
.mk-card {
  background: #fff;
  border: 1px solid var(--line, #E6E9EE);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 2px 14px rgba(22, 53, 97, .05);
}
.mk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mk-title {
  font-size: 19px;
  font-weight: 700;
  color: #163561;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-title .mk-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2E8BC0;
  box-shadow: 0 0 0 4px rgba(46, 139, 192, .14);
}
.mk-title .mk-dot.mk-live { animation: mkPulse 2s ease-in-out infinite; }
@keyframes mkPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.mk-time { font-size: 12.5px; color: #8A93A0; }

/* 主品种：大数字 */
.mk-main {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: linear-gradient(135deg, #F4F8FC 0%, #FAFAF8 100%);
  border: 1px solid #E9EFF6;
  border-radius: 12px;
  margin-bottom: 14px;
}
.mk-main-name { font-size: 15px; font-weight: 700; color: #163561; }
.mk-main-unit { font-size: 12px; color: #8A93A0; margin-left: 6px; }
.mk-price {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: #163561;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.mk-delta {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-bottom: 3px;
}
.mk-up { color: #C8281E; }     /* 涨 = 红 */
.mk-down { color: #1B8A4B; }   /* 跌 = 绿 */
.mk-flat { color: #8A93A0; }

/* 其余品种：两列网格 */
.mk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #EDF1F6;
  border-radius: 10px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.mk-row:hover { border-color: #C9DBEC; box-shadow: 0 4px 12px rgba(22, 53, 97, .07); transform: translateY(-1px); }
.mk-row-name { font-size: 13.5px; font-weight: 600; color: #33414F; }
.mk-row-sub { font-size: 11.5px; color: #9AA3AF; margin-top: 2px; }
.mk-row-price { font-size: 16px; font-weight: 700; color: #163561; font-variant-numeric: tabular-nums; }
.mk-row-pct { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 说明与免责声明 */
.mk-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #E6E9EE;
  font-size: 12px;
  color: #97A0AC;
  line-height: 1.7;
}
.mk-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #F0F4F8;
  color: #6B7684;
  margin-right: 6px;
}
.mk-badge.warn { background: #FFF4E5; color: #A86A00; }
.mk-skeleton { height: 92px; border-radius: 12px; background: linear-gradient(90deg,#F2F5F9 25%,#E9EFF6 37%,#F2F5F9 63%); background-size: 400% 100%; animation: mkShine 1.2s linear infinite; }
@keyframes mkShine { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* 首页横向紧凑版 */
.mk-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.mk-strip .mk-row { min-width: 190px; flex: 0 0 auto; }

/* ---------- 二、资讯中心 ---------- */
.news-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.news-cat {
  border: 1px solid var(--line, #E6E9EE);
  background: #fff;
  color: #50606F;
  border-radius: 22px;
  padding: 7px 15px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .18s;
}
.news-cat:hover { border-color: #B9CFE4; color: #163561; }
.news-cat.active { background: #163561; border-color: #163561; color: #fff; font-weight: 600; }
.news-cat .cnt { opacity: .6; margin-left: 4px; font-size: 12px; }

.news-pin {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #C8281E;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  vertical-align: 1px;
}
.news-meta { font-size: 12.5px; color: #8A93A0; display: flex; gap: 12px; flex-wrap: wrap; }
.news-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.news-tags span { font-size: 11.5px; color: #2E8BC0; background: #F0F7FC; border-radius: 4px; padding: 2px 7px; }

/* 资讯详情正文 */
.news-body { font-size: 16px; line-height: 1.95; color: #33414F; }
.news-body p { margin: 0 0 18px; }
.news-related { margin-top: 30px; padding-top: 20px; border-top: 1px solid #EDF1F6; }
.news-related h3 { font-size: 15px; color: #163561; margin: 0 0 12px; }
.news-related a { display: block; padding: 9px 0; font-size: 14.5px; color: #33414F; border-bottom: 1px dashed #EDF1F6; }
.news-related a:hover { color: #2E8BC0; }
.news-head-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #8A93A0; margin-top: 2px; }

/* ---------- 三、站内消息（我的消息） ---------- */
.msg-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #EDF1F6;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.msg-item.unread { border-left: 3px solid #2E8BC0; background: #FBFDFF; }
.msg-item:hover { border-color: #CADCEA; box-shadow: 0 4px 14px rgba(22, 53, 97, .06); }
.msg-ico {
  flex: 0 0 38px; height: 38px; border-radius: 10px;
  background: #F0F4F8; color: #163561;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: 15px; font-weight: 700; color: #1E2A36; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-content { font-size: 14px; color: #55616E; line-height: 1.8; margin-top: 6px; white-space: pre-wrap; }
.msg-foot { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: #98A1AC; margin-top: 10px; flex-wrap: wrap; }
.msg-dot { width: 7px; height: 7px; border-radius: 50%; background: #C8281E; display: inline-block; }
.nav-msg-badge {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px;
  padding: 0 4px; border-radius: 9px; background: #C8281E; color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; margin-left: 6px; vertical-align: 1px;
}

/* ---------- 四、验证码登录（登录/注册弹层） ---------- */
.auth-tabs { display: flex; gap: 6px; background: #F2F5F9; padding: 4px; border-radius: 10px; margin-bottom: 18px; }
.auth-tab {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 8px;
  font-size: 14px; color: #56636F; cursor: pointer; font-weight: 600;
  transition: all .18s;
}
.auth-tab.active { background: #fff; color: #163561; box-shadow: 0 1px 6px rgba(22, 53, 97, .1); }

/* 内层模式切换（密码登录 / 验证码登录）—— 做成下划线标签，与外层大标签区分开 */
.auth-sub { display: flex; gap: 18px; }
.auth-sub .auth-tab {
  flex: 0 0 auto; padding: 4px 0; background: none; box-shadow: none;
  color: #8A93A0; font-size: 13.5px; font-weight: 600; border-radius: 0;
  border-bottom: 2px solid transparent;
}
.auth-sub .auth-tab:hover { color: #163561; }
.auth-sub .auth-tab.active {
  color: #163561; background: none; box-shadow: none; border-bottom-color: #163561;
}
.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; }
.btn-code { white-space: nowrap; min-width: 118px; }
.btn-code:disabled { opacity: .55; cursor: not-allowed; }
.sms-hint {
  margin-top: 10px; font-size: 12.5px; line-height: 1.7;
  color: #8A93A0; background: #F7FAFD; border: 1px dashed #DCE7F1;
  border-radius: 8px; padding: 9px 11px;
}
.sms-hint strong { color: #163561; }
.sms-hint .code-now { color: #C8281E; font-weight: 800; font-size: 15px; letter-spacing: 1px; }

/* ---------- 五、响应式 ---------- */
@media (max-width: 760px) {
  .mk-list { grid-template-columns: 1fr; }
  .mk-price { font-size: 27px; }
  .mk-card { padding: 18px 16px; }
  .code-row { flex-direction: column; }
  .btn-code { width: 100%; }
  .msg-ico { flex-basis: 34px; height: 34px; font-size: 15px; }
}