/* ============================================================
 *  开奖网 · 干净中性版样式
 *  移动端优先，居中卡片，模仿样板视觉（蓝头 + 彩色号码球）
 * ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --blue: #2f8bff;
  --blue-dark: #1f6fe0;
  --red: #e93b3b;
  --blue-ball: #2f7be0;
  --green: #1faa5a;
  --bg: #eef1f6;
  --card: #ffffff;
  --line: #eceff3;
  --text: #222;
  --muted: #8a93a2;
}

html { scroll-behavior: smooth; scroll-padding-top: 12px; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 24px;
}

/* ---------- 顶部头部 ---------- */
.header {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  padding: 16px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 4px 14px rgba(47, 139, 255, .25);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; font-style: italic;
  border: 1px solid rgba(255, 255, 255, .35);
}
.logo-text strong { font-size: 20px; letter-spacing: 1px; }
.logo-text small { display: block; font-size: 11px; opacity: .85; margin-top: 2px; }

/* ---------- 彩种切换 ---------- */
.tabs {
  display: flex; gap: 8px;
  padding: 12px 12px 0;
}
.tab-item {
  flex: 1; text-align: center;
  padding: 12px 0; font-size: 15px; font-weight: 700;
  background: #fff; color: var(--muted);
  border-radius: 12px 12px 0 0;
  cursor: pointer; transition: .2s;
  border-bottom: 3px solid transparent;
}
.tab-item.active {
  color: var(--blue); border-bottom-color: var(--blue);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .04);
}

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card);
  margin: 12px;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20, 40, 80, .05);
}
.tabs + .result-card { margin-top: 0; border-radius: 0 0 14px 14px; }
.card-title {
  font-size: 15px; font-weight: 700; color: #333;
  padding-left: 10px; position: relative; margin-bottom: 14px;
}
.card-title::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 4px; border-radius: 4px; background: var(--blue);
}
.card-title .sub { font-weight: 500; color: var(--muted); font-size: 12px; }

/* ---------- 开奖结果 ---------- */
.result-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.kj-title { font-size: 16px; font-weight: 800; color: #222; }
.kj-date { font-size: 12px; color: var(--muted); }

.balls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 8px;
}
.ball {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .12);
  position: relative;
}
.ball .ball-num { font-size: 20px; font-weight: 800; line-height: 1; }
.ball .ball-sx {
  font-size: 11px; margin-top: 2px;
  background: rgba(255, 255, 255, .28); border-radius: 8px; padding: 0 5px;
}
.ball-plus { font-size: 24px; font-weight: 800; color: #c2c9d4; padding: 0 2px; }

.wave-red   { background: radial-gradient(circle at 35% 30%, #ff6b6b, var(--red)); }
.wave-blue  { background: radial-gradient(circle at 35% 30%, #5a9bf2, var(--blue-ball)); }
.wave-green { background: radial-gradient(circle at 35% 30%, #46c884, var(--green)); }

.summary {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #555;
}
.summary b { font-weight: 700; }
.t-red { color: var(--red); }
.t-blue { color: var(--blue-ball); }
.t-green { color: var(--green); }

/* ---------- 倒计时 ---------- */
.countdown { text-align: center; background: linear-gradient(135deg, #1f2a44, #2b3b63); color: #fff; }
.cd-top { display: flex; justify-content: space-between; font-size: 12px; opacity: .85; margin-bottom: 10px; }
.cd-time { font-size: 22px; letter-spacing: 1px; }
.cd-time b {
  display: inline-block; min-width: 34px; padding: 4px 6px; margin: 0 2px;
  background: rgba(255, 255, 255, .12); border-radius: 8px; font-weight: 800;
}
.cd-next { font-size: 12px; opacity: .8; margin-top: 10px; }

/* ---------- 快捷导航 ---------- */
.quicknav {
  display: flex; gap: 8px; margin: 12px; flex-wrap: wrap;
}
.quicknav a {
  flex: 1; min-width: 70px; text-align: center;
  padding: 10px 0; background: #fff; border-radius: 10px;
  color: #444; text-decoration: none; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 40, 80, .05);
}
.quicknav a:active { background: #f0f4fb; }

/* ---------- 号码查询 ---------- */
.query-box { display: flex; gap: 10px; }
.query-box input {
  flex: 1; height: 42px; border: 1px solid #dfe4ec; border-radius: 10px;
  padding: 0 14px; font-size: 15px; outline: none;
}
.query-box input:focus { border-color: var(--blue); }
.query-box button {
  width: 84px; height: 42px; border: none; border-radius: 10px;
  background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.query-result {
  margin-top: 14px; min-height: 56px;
  display: flex; align-items: center;
}
.query-result .q-tip { color: var(--muted); font-size: 13px; }
.q-attrs { font-size: 13px; line-height: 1.9; color: #555; }
.q-attrs b { font-weight: 700; color: #222; }

/* ---------- 历史记录 ---------- */
.his-list { display: flex; flex-direction: column; }
.his-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.his-row:last-child { border-bottom: none; }
.his-meta { display: flex; flex-direction: column; min-width: 92px; }
.his-qi { font-weight: 700; color: #333; }
.his-date { font-size: 11px; color: var(--muted); }
.his-balls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* 小号码球（历史/对照表） */
.mini-ball {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .18);
}
.mini-ball i { font-style: normal; font-size: 13px; font-weight: 700; line-height: 1; }
.mini-ball em { font-style: normal; font-size: 9px; opacity: .9; }
.mini-plus { color: #c2c9d4; font-weight: 800; padding: 0 2px; }

/* ---------- 生肖对照 ---------- */
.sx-table { display: flex; flex-direction: column; gap: 8px; }
.sx-row { display: flex; align-items: center; gap: 10px; }
.sx-name {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: #f0f4fb; color: var(--blue-dark); font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.sx-nums { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- 波色对照 ---------- */
.wave-table { display: flex; flex-direction: column; gap: 12px; }
.wave-row { display: flex; align-items: flex-start; gap: 10px; }
.wave-tag {
  flex: none; width: 40px; padding: 4px 0; text-align: center;
  border-radius: 8px; font-weight: 700; font-size: 12px; color: #fff;
}
.wave-tag.t-red { background: var(--red); }
.wave-tag.t-blue { background: var(--blue-ball); }
.wave-tag.t-green { background: var(--green); }
.wave-nums { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- 页脚 ---------- */
.footer {
  margin: 20px 12px 0; padding: 16px; text-align: center;
  font-size: 11px; color: var(--muted); line-height: 1.8;
}

/* ---------- 回顶部 ---------- */
.to-top {
  position: fixed; right: 16px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 4px 12px rgba(47, 139, 255, .4);
  opacity: .9;
}
.app { position: relative; }

@media (min-width: 560px) {
  .ball { width: 58px; height: 58px; }
  .ball .ball-num { font-size: 22px; }
}