/* H5 移动端样式 v2（A股配色：红涨绿跌） */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; color: #22262f;
  background: linear-gradient(180deg, #eef1f7 0%, #f6f7fa 240px, #f2f3f5 100%);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px; padding-bottom: 28px;
}

/* ===== 顶栏 ===== */
.header {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(135deg, #1b2136 0%, #2a3352 100%);
  color: #fff; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 10px rgba(20,26,45,.28);
}
.header .name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.header .code { font-size: 12px; color: #9aa3bd; margin-left: 6px; }
.header select {
  margin-left: auto; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 6px 9px; font-size: 13px; outline: none;
}
.header .badge {
  font-size: 11px; padding: 3px 9px; border-radius: 12px;
  background: linear-gradient(135deg, #ff5f57, #e23c3c); color: #fff; white-space: nowrap;
}
.header .badge.off { background: #59617a; }

/* ===== 价格行 ===== */
.price-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 16px 2px;
}
.price-row .price { font-size: 40px; font-weight: 800; letter-spacing: -1px; text-shadow: 0 1px 0 rgba(0,0,0,.06); }
.price-row .chg { font-size: 16px; font-weight: 700; }
.up { color: #e23c3c; } .down { color: #17a05e; } .flat { color: #8a8f9c; }

/* ===== 卡片 ===== */
.card {
  background: #fff; border-radius: 14px; margin: 12px 12px; padding: 14px;
  box-shadow: 0 2px 10px rgba(31,41,72,.06), 0 1px 2px rgba(31,41,72,.04);
  border: 1px solid rgba(31,41,72,.05);
}
.card h3 {
  margin: 0 0 12px; font-size: 14px; color: #2b3040;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.card h3 .t { font-weight: 700; }

/* ===== 通用网格（迷你瓦片） ===== */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.grid > div { background: #f7f8fb; border-radius: 9px; padding: 7px 8px 6px; }
.grid .k { color: #98a0b3; font-size: 11px; }
.grid .v { font-size: 14px; font-weight: 700; margin-top: 2px; }

#chart { width: 100%; height: 250px; }

/* ===== 分笔成交（对照截图样式） ===== */
.tick-meta { font-size: 11.5px; color: #98a0b3; margin-bottom: 8px; }
.tick-meta b { color: #e23c3c; font-weight: 700; }
.force-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.force-line .fbuy { color: #e23c3c; }
.force-line .fsell { color: #17a05e; }
.force-line .fnet { color: #333; }
.force-line .fnet .up, .force-line .fnet .down { font-weight: 800; }
.force-line .sub { font-size: 11px; color: #98a0b3; font-weight: 400; }
.forcebar {
  display: flex; height: 20px; border-radius: 7px; overflow: hidden; margin: 6px 0 6px;
  background: #eef0f4; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.forcebar .red { background: linear-gradient(180deg, #ef5555, #dd3a3a); }
.forcebar .green { background: linear-gradient(180deg, #23b374, #149058); }
.forcebar span { color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.force-note { font-size: 11px; color: #98a0b3; margin-bottom: 8px; }

/* ===== 表格 ===== */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 6px 5px; border-bottom: 1px solid #f1f2f6; text-align: right; }
th { color: #98a0b3; font-weight: 600; font-size: 11px; position: sticky; top: 0; background: #fff; }
th:first-child, td:first-child { text-align: left; }
tbody tr:nth-child(even) { background: #fafbfd; }
.tick-wrap { max-height: 320px; overflow-y: auto; border: 1px solid #f1f2f6; border-radius: 9px; }
.tick-wrap th { background: #f7f8fb; }
.side-buy { color: #e23c3c; font-weight: 600; } .side-sell { color: #17a05e; font-weight: 600; } .side-mid { color: #98a0b3; }

/* ===== 指数卡 ===== */
.idx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.idx {
  background: linear-gradient(160deg, #fbfcfe, #f3f5f9); border: 1px solid #eef0f5;
  border-radius: 11px; padding: 10px 12px;
}
.idx .n { font-size: 12px; color: #6b7280; }
.idx .p { font-size: 19px; font-weight: 800; margin-top: 2px; }
.idx .c { font-size: 12px; font-weight: 700; }

/* ===== AI 操作提示横幅 ===== */
.action-banner {
  display: flex; align-items: center; gap: 12px;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.action-banner .act { font-size: 22px; font-weight: 800; letter-spacing: 2px; white-space: nowrap; }
.action-banner .why { font-size: 12.5px; line-height: 1.5; opacity: .92; }
/* 红=可买（上车/加仓），绿=卖出（减仓/清仓），灰=观望，橙=持有 */
.action-banner.a-buy    { background: linear-gradient(135deg, #ff6b5e, #e23c3c); color: #fff; box-shadow: 0 4px 14px rgba(226,60,60,.32); }
.action-banner.a-reduce { background: linear-gradient(135deg, #23b374, #149058); color: #fff; box-shadow: 0 4px 14px rgba(20,144,88,.30); }
.action-banner.a-hold   { background: linear-gradient(135deg, #ffb547, #f59310); color: #fff; box-shadow: 0 4px 14px rgba(245,147,16,.28); }
.action-banner.a-wait   { background: linear-gradient(135deg, #8b93a7, #6b7280); color: #fff; box-shadow: 0 4px 14px rgba(107,114,128,.25); }

/* ===== 按钮 / 杂项 ===== */
.btn {
  background: linear-gradient(135deg, #4a8bff, #2f6ef0); color: #fff; border: none; border-radius: 10px;
  padding: 11px 14px; font-size: 14px; width: 100%; font-weight: 700;
  box-shadow: 0 3px 10px rgba(47,110,240,.28); cursor: pointer;
}
.btn:active { opacity: .82; }
.btn:disabled { opacity: .55; }
.muted { color: #98a0b3; font-size: 12px; }
.err { color: #c0392b; font-size: 12px; }
.factor { font-size: 12px; margin: 4px 0; color: #4b5265; }
.pill { display:inline-block; background:#eef2ff; color:#2f6ef0; border-radius:8px; padding:2px 8px; font-size:11px; margin-left:6px;}
p { margin: 8px 0; line-height: 1.6; }