:root{
  --red:#e0000f;
  --red-dark:#c8000d;
  --blue:#1c8ad6;
  --blue-dark:#1477bd;
  --gold:#f5c518;
  --ball-red:#e60012;
  --ball-gold:#f2b900;
  --ball-blue:#1c8ad6;
  --ball-green:#33a852;
  --line:#e5e5e5;
  --text:#333;
  --muted:#888;
  --bg:#f2f2f2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,"Heiti SC",sans-serif;
  color:var(--text);background:var(--bg);
  font-size:15px;line-height:1.5;
  padding-bottom:76px; /* 给底部导航留位 */
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.app{max-width:640px;margin:0 auto;background:#fff;min-height:100vh;position:relative;}

/* ---------- 顶部 LOGO 区 ---------- */
.topbar{
  height:78px;background:linear-gradient(#eef2f5,#e2e8ee);
  display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #dfe4e8;
}
.topbar .logo{height:56px;}
.topbar .logo-fallback{
  font-weight:800;font-size:26px;font-style:italic;
  color:#e60012;letter-spacing:-1px;
}
.topbar .logo-fallback span{color:var(--blue);}

/* ---------- 页面标题条（内页红条） ---------- */
.page-title{
  background:var(--red);color:#fff;text-align:center;
  font-size:18px;font-weight:700;padding:12px;letter-spacing:2px;
}

/* ---------- 二级导航（图库/走势页顶部彩色标签） ---------- */
.subnav{display:flex;border-bottom:2px solid var(--blue);}
.subnav a{
  flex:1;text-align:center;color:#fff;padding:12px 4px;font-size:15px;font-weight:600;
  background:var(--blue);border-right:1px solid rgba(255,255,255,.35);
}
.subnav a:last-child{border-right:none;}
.subnav a.red{background:var(--red);}
.subnav a.green{background:#3aab3a;}
.subnav a.gold{background:#e6a817;}
.subnav a.active{filter:brightness(1.08);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);}

/* ---------- 通用容器 ---------- */
.section{padding:12px 14px;}
.card{border:1px solid var(--line);border-radius:4px;margin:12px 14px;overflow:hidden;}

/* ---------- Banner ---------- */
.banner{position:relative;margin:12px 14px 0;border-radius:8px;overflow:hidden;background:#ce3fb0;min-height:120px;}
.banner img{width:100%;display:block;}
.banner .dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.banner .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);display:block;}
.banner .dots i.on{background:#fff;}

/* ---------- 期号栏 ---------- */
.period-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  background:#fdeaea;border:1px solid #f4c7c7;color:#c8000d;
  margin:14px;padding:10px 12px;border-radius:4px;font-size:14px;
}
.period-bar .sep{color:#e0a0a0;}

/* ---------- 倒计时 ---------- */
.countdown{display:flex;align-items:center;gap:6px;padding:6px 14px 2px;}
.countdown .box{
  min-width:52px;height:56px;border:1px solid #ccc;border-radius:6px;background:#fafafa;
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#222;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.05);
}
.countdown .colon{font-size:30px;font-weight:800;color:#333;}
.row-actions{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 14px;border-bottom:1px solid var(--line);}
.btn-live{background:var(--red);color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:15px;font-weight:700;cursor:pointer;}
.link-history{color:#333;font-weight:600;cursor:pointer;}
.link-history .arrow{color:var(--red);}

/* ---------- 号码球 ---------- */
.balls{display:flex;gap:10px;align-items:center;}
.ball{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:#fff;box-shadow:inset -3px -3px 6px rgba(0,0,0,.18);
}
.ball.p0{background:radial-gradient(circle at 32% 28%,#ff6a72,var(--ball-red));}
.ball.p1{background:radial-gradient(circle at 32% 28%,#ffe17a,var(--ball-gold));color:#7a5a00;}
.ball.p2{background:radial-gradient(circle at 32% 28%,#7ec4ef,var(--ball-blue));}
.ball.sm{width:26px;height:26px;font-size:13px;}

/* ---------- 最新一期展示块 ---------- */
.latest{padding:12px 14px;}
.latest .lbl{font-size:15px;margin-bottom:8px;}
.latest .lbl b{color:var(--red);}

/* ---------- 近5期展开 ---------- */
.toggle-recent{
  text-align:center;color:var(--red);font-weight:700;padding:12px;border-top:1px solid var(--line);cursor:pointer;
}
.recent-list .rrow{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-top:1px solid var(--line);background:#fafafa;}
.recent-list .rrow .p b{color:var(--red);}

/* ---------- 历史列表 ---------- */
.notice{
  background:#fdf6e3;border:1px solid #f0e2b6;color:#8a6d3b;margin:14px;padding:12px 14px;border-radius:6px;font-size:14px;
}
.notice b{color:#b8860b;display:block;margin-bottom:4px;font-size:15px;}
.hist-item{padding:14px;border-bottom:1px solid var(--line);}
.hist-item .line{display:flex;gap:10px;margin-bottom:6px;font-size:14px;}
.hist-item .line .k{color:var(--red);font-weight:700;min-width:70px;text-align:right;}
.hist-item .line.nums{align-items:center;}

/* ---------- 专家预测 ---------- */
.pred{border-bottom:8px solid #f0f0f0;padding:14px;}
.pred h3{margin:0 0 10px;font-size:16px;}
.pred .head{display:flex;flex-wrap:wrap;gap:6px 24px;margin-bottom:10px;font-weight:700;}
.pred .head .kj b{color:var(--red);}
.pred .grid{font-size:14px;}
.pred .grid .r{display:flex;padding:3px 0;}
.pred .grid .r .k{color:#c8000d;min-width:76px;font-weight:600;}
.pred .grid .r .v{color:#333;flex:1;word-break:break-all;}
.pred .grid .r .v.zx{color:#1a5fb4;line-height:1.7;}
.section-head{background:#fff;border-left:5px solid var(--red);font-size:18px;font-weight:800;margin:14px;padding:2px 10px;}

/* ---------- 图库 ---------- */
.gallery-title{color:var(--red);text-align:center;font-size:20px;font-weight:800;padding:14px;}
.gallery-item{margin:14px;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.gallery-item .cap{padding:8px;font-size:14px;color:#555;text-align:center;}
.rich{padding:16px;white-space:pre-wrap;line-height:1.9;color:#444;font-size:14.5px;}

/* ---------- 走势图 ---------- */
.trend-title{color:var(--red);text-align:center;font-size:20px;font-weight:800;padding:16px 10px 4px;}
.trend-ctrl{display:flex;align-items:center;gap:8px;padding:10px 14px;}
.trend-ctrl select{padding:6px 10px;border:1px solid #ccc;border-radius:4px;font-size:14px;}
.trend-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 14px 14px;}
table.trend{border-collapse:collapse;font-size:13px;position:relative;}
table.trend th,table.trend td{border:1px solid #e2e2e2;text-align:center;padding:6px 4px;white-space:nowrap;}
table.trend thead th{background:#f3ecd7;color:#7a5a1e;font-weight:700;position:sticky;top:0;}
table.trend .colhead{min-width:22px;color:#999;font-weight:600;}
table.trend td.cell{width:22px;height:30px;color:#e0b0b0;position:relative;}
table.trend td.odd{background:#fbf7ec;}
table.trend .dot{
  width:22px;height:22px;border-radius:50%;color:#fff;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
}
table.trend .period{color:#333;font-weight:700;min-width:64px;}
table.trend .sum{font-weight:800;color:#222;}
.pos-group{background:#eef4fb !important;color:#1477bd !important;}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:640px;margin:0 auto;display:flex;height:64px;background:var(--blue);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#fff;font-size:13px;font-weight:600;border-right:1px solid rgba(255,255,255,.18);
}
.tabbar a:last-child{border-right:none;}
.tabbar a.active{background:var(--red);}
.tabbar a .ico{font-size:20px;line-height:1;}

/* ---------- 杂项 ---------- */
.empty{color:var(--muted);text-align:center;padding:40px 14px;}
.loading{color:var(--muted);text-align:center;padding:30px;}