body { margin:0; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#222; background:#fafafa; }
.root { }
:root {
  --brand-blue: #0B3A82;
  --brand-green: #2ecc71;
  --brand-yellow: #FFD84D;
  --seg-bg: #e6eef9;
  --seg-border: #c9d6f0;
  --seg-text: #1f2328;
  --container-w: 48rem;
  --page-bg: #edeff0;
}
.app-body { position: relative; min-height: 100vh; }
.app-bg { position: fixed; inset: 0; background: #f5f6fa; background-size: cover; z-index: 0; }
.app-shell { position: relative; z-index: 1; max-width: calc(var(--container-w) + 2rem); margin: 0 auto; background: transparent; box-shadow: 0 0 0 rgba(0,0,0,0); }
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 12px; background: var(--page-bg); }
.site-header { background:transparent; border-bottom:0; }
.logo { font-weight:300; font-size:20px; padding:12px 0; }
.nav a { margin-right:14px; color:#333; text-decoration:none; }
.nav .tab { padding:6px 10px; border-radius:4px; background:#f4f4f4; font-weight:600; }
.nav .tab.active { background:#ffd54f; }
.layout { display:block; padding:16px 0; }
.content { width: 100%; }
.sidebar { display:none; }

/* Segmented market switch (header) */
.topbar { position: sticky; top: 0; z-index: 1000; background:#fff; border-radius:12px; box-shadow: 0 6px 18px rgba(0,0,0,.08); margin-bottom: 12px; }
.topbar .container { background: transparent; display:flex; flex-direction: row; align-items: center; justify-content: space-between; height:55px; padding: 6px 12px; }
.topbar .logo img { height: 32px; max-height: 32px; width: auto; }
.market-bar { background: transparent; }
.market-bar .container { padding-top: 6px; padding-bottom: 6px; }
.market-bar .market-switch { width:100%; max-width: var(--container-w); margin: 0 auto; display:flex; align-items:center; background: var(--seg-bg); border:1px solid var(--seg-border); border-radius:999px; overflow:hidden; }
.market-bar .market-switch a { flex:1; text-align:center; color:#000; text-decoration:none; padding:14px 16px; font-size:14px; font-weight:800; letter-spacing:.5px; line-height:1; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; min-width:0; }
.market-bar .market-switch .flag { font-size:20px; line-height:1; }
.market-bar .market-switch a + a { border-left:1px solid var(--seg-border); }
.market-bar .market-switch a.active.mo { background: var(--brand-green); color:#fff; }
.market-bar .market-switch a.active.nmo { background: #e74c3c; color:#fff; }
.market-bar .market-switch a.active.hk { background: var(--brand-yellow); color:#0B3A82; }
.topbar .market-switch a { flex:1; text-align:center; color: #000; text-decoration:none; padding:10px 14px; font-size:14px; font-weight:800; letter-spacing: .5px; line-height:1; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; min-width:0; }
.topbar .market-switch .flag { font-size:20px; line-height:1; }
.topbar .market-switch a + a { border-left:1px solid var(--seg-border); }
.topbar .market-switch a.active.mo { background: var(--brand-green); color:#fff; }
.topbar .market-switch a.active.nmo { background: #e74c3c; color:#fff; }
.topbar .market-switch a.active.hk { background: var(--brand-yellow); color:#0B3A82; }

/* Mobile-first: hide sidebar, single column centered */
@media (max-width: 768px) {
  .layout { display:block; padding:12px 0; }
  .sidebar { display:none; }
  .app-shell { max-width: none; width: 100%; }
  .container { max-width: 100%; }
  .topbar .market-switch { max-width: 100%; }
}
/* Extra-small screens: keep market tabs on one line */
@media (max-width: 420px) {
  .market-bar .market-switch a,
  .topbar .market-switch a { padding:10px 8px; font-size:12px; letter-spacing:0; gap:6px; }
  .market-bar .market-switch .flag,
  .topbar .market-switch .flag { font-size:18px; }
}
@media (max-width: 360px) {
  .market-bar .market-switch a,
  .topbar .market-switch a { padding:8px 6px; font-size:11px; }
  .market-bar .market-switch .flag,
  .topbar .market-switch .flag { font-size:16px; }
}
.ad { background:#fff; border:1px dashed #ddd; padding:10px; margin:10px 0; min-height: 60px; }
.ad .phone-collector-wrapper .collector-content{ min-width:0; }
.ad .phone-collector-wrapper .collector-form{ min-width:0; }
.ad.ad-header { min-height: 90px; }
.ad.ad-footer { min-height: 90px; }
.sidebar .ad { min-height: 250px; }
.content .ad { min-height: 120px; }
.draw-strip { display:flex; align-items:center; gap:6px; padding:6px 8px; background:#fff; border:1px solid #e6e6e6; border-radius:6px; }
.draw-strip .tab { flex:1; text-align:center; padding:6px 0; font-weight:700; border-radius:4px; background:#f4f4f4; }
.draw-strip .tab.active { background:#ffd54f; }
.draw-strip .numbers { display:flex; align-items:center; gap:6px; margin-left:6px; }
.draw-strip .ball { width:26px; height:26px; border-radius:50%; color:#fff; display:inline-flex; justify-content:center; align-items:center; font-weight:700; font-size:12px; }
.draw-strip .ball.red { background:#e53935; }
.draw-strip .ball.blue { background:#1e88e5; }
.draw-strip .ball.green { background:#43a047; }
.draw-strip .plus { font-weight:700; }
.post-list { display:block; }
.post-card { background:#fff; border:1px solid #e6e6e6; border-radius:10px; }
.post-card .card-head { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:#FFE27A; border-top-left-radius:10px; border-top-right-radius:10px; border-bottom:1px solid #e6e6e6; }
.post-card .card-head .title { font-weight:800; color:#0B3A82; }
.post-card .card-head .more { color:#b91c1c; text-decoration:none; font-size:12px; }
.post-card .card-head .more:hover { text-decoration:underline; }
.post-card .card-items { list-style:none; margin:0; padding:8px 10px 12px; }
.post-card .card-item { background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:12px 8px; text-align:center; margin-bottom:8px; transition:box-shadow .15s ease, transform .05s ease; }
.post-card .card-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-1px); background: var(--item-hover-bg, #fafafa); }
.post-card .card-item a { color:#111827; text-decoration:none; font-size:16px; }
.post-card .card-item a:hover { text-decoration:underline; }
.post-card .card-ad { padding:6px 0; }
.post-detail { background:#fff; border:1px solid #e6e6e6; border-radius:10px; padding:14px; }
.post-title { margin:0 0 6px 0; font-size:18px; line-height:1.4; }
.post-title a { color:#0B3A82; text-decoration:none; }
.post-title a:hover { text-decoration:underline; }
.post-meta { color:#768390; font-size:12px; margin-bottom:8px; }
.post-excerpt { color:#444; font-size:14px; line-height:1.6; }
@media (min-width: 768px) {
  .post-list { grid-template-columns: 1fr 1fr; }
}

/* 标签样式（来源于标题中的【xxx】） */
.tag { display:inline-block; padding:2px 6px; border-radius:4px; background:#f1f5f9; color:#0f172a; font-size:12px; margin:0 2px; }
.tag-red { background:#fee2e2; color:#b91c1c; }
.tag-green { background:#dcfce7; color:#166534; }
.tag-blue { background:#dbeafe; color:#1e40af; }
.tag-black { background:#e5e7eb; color:#111827; }
.tag-purple { background:#ede9fe; color:#5b21b6; }
.tag-gold { background:#fef3c7; color:#92400e; }
.site-footer { padding:20px 0; color:#666; text-align:center; border-top:1px solid #eee; background:#fff; }

/* ZodiacAttrs responsive grid */
.zodiac-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.zodiac-cell { border:1px solid #e6e6e6; border-radius:8px; padding:8px 10px; background:#fff; display:grid; grid-template-columns: 48px 1fr; gap:8px; align-items:center; }
.zodiac-img { width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.zodiac-img img { max-width:48px; max-height:48px; }
.zodiac-title { font-weight:800; margin-bottom:6px; font-size:14px; }
.zodiac-title .clash { font-weight:400; color:#6b7280; margin-left:6px; }
.zodiac-numbers { display:flex; flex-wrap:wrap; gap:6px; }

@media (max-width: 640px) {
  .zodiac-grid { grid-template-columns: repeat(2, 1fr); gap:8px; }
  .zodiac-cell { grid-template-columns: 40px 1fr; padding:8px; }
  .zodiac-img { width:40px; height:40px; }
  .zodiac-img img { max-width:40px; max-height:40px; }
  .zodiac-title { font-size:13px; margin-bottom:4px; }
  .zodiac-numbers .tag { font-size:11px; padding:2px 5px; }
}
@media (max-width: 380px) {
  .zodiac-grid { grid-template-columns: 1fr 1fr; gap:6px; }
  .zodiac-cell { grid-template-columns: 36px 1fr; padding:6px; }
  .zodiac-img { width:36px; height:36px; }
  .zodiac-img img { max-width:36px; max-height:36px; }
  .zodiac-title { font-size:12px; }
  .zodiac-numbers .tag { font-size:10px; padding:1px 4px; }
}

/* Draw bar component (reference style) */
.drawbar { background:#fff; border:1px solid #e6e6e6; border-radius:10px; padding:8px 10px; }
.drawbar-head { display:flex; align-items:center; gap:10px; padding:2px 4px; }
.drawbar-head .label { display:inline-block; padding:2px 8px; border-radius:6px; color:#fff; font-weight:800; font-size:14px; }
.drawbar-head .label.mo { background:#2ecc71; }
.drawbar-head .label.nmo { background:#e74c3c; }
.drawbar-head .label.hk { background:#FFD84D; color:#0B3A82; }
.drawbar-head .period { color:#333; font-weight:700; }
.drawbar-head .spacer { flex:1; }
.drawbar-head .history { color:#d00000; font-weight:800; text-decoration:none; }
.drawbar-balls { display:grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap:10px; padding:6px 0 2px; align-items:stretch; }
.drawbar-balls .pill { display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:6px; padding:6px 8px; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.08) inset; height:56px; min-width:0; }
.drawbar-balls .pill.red { background:#e53935; }
.drawbar-balls .pill.blue { background:#1e88e5; }
.drawbar-balls .pill.green { background:#2ecc71; }
.drawbar-balls .pill .num { font-size:20px; font-weight:900; line-height:1; }
.drawbar-balls .pill .meta { font-size:12px; margin-top:4px; background:#fff; color:#333; padding:1px 6px; border-radius:4px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.drawbar-balls .pill .meta .sep { opacity:.6; }
.drawbar-balls .plus { font-size:18px; font-weight:900; color:#333; display:flex; align-items:center; justify-content:center; height:56px; border-radius:6px; background:#fff; border:1px dashed #e0e0e0; min-width:0; }

/* DrawStrip responsive tweaks for very small screens */
@media (max-width: 420px) {
  .drawbar-balls { gap:6px; }
  .drawbar-balls .pill { height:48px; padding:4px 6px; }
  .drawbar-balls .pill .num { font-size:18px; }
  .drawbar-balls .pill .meta { font-size:10px; }
  /* 移动端仅显示五行，隐藏生肖与分隔符，保证不换行 */
  .drawbar-balls .pill .meta .zodiac,
  .drawbar-balls .pill .meta .sep { display:none; }
  .drawbar-balls .plus { height:48px; }
}

/* Autopost draw result card (used by autopost recipes) */
.draw-card { background:#fff; border:1px solid #e6e6e6; border-radius:10px; padding:10px 12px; margin:8px 0; }
.draw-card .draw-head { font-weight:800; color:#0B3A82; margin-bottom:6px; }
.draw-card .draw-balls { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.draw-card .ball { width:26px; height:26px; border-radius:50%; color:#fff; display:inline-flex; justify-content:center; align-items:center; font-weight:700; font-size:12px; }
.draw-card .ball.red { background:#e53935; }
.draw-card .ball.blue { background:#1e88e5; }
.draw-card .ball.green { background:#43a047; }
.draw-card .ball.special { box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset; }
.draw-card .plus { font-weight:800; margin:0 4px; }
.draw-card .draw-src { color:#6b7280; font-size:12px; margin-top:6px; }


/* Recipe card styles */
.recipe-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.recipe-card h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-blue);
  text-align: center;
}
.recipe-card h4 {
  margin: 12px 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.recipe-card .zodiac-list {
  margin: 12px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}
.recipe-card .zodiac-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.recipe-card .wave-group {
  margin: 16px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}
.recipe-card .lucky-num {
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  text-align: center;
}
.recipe-card .lucky-num h4 {
  color: #fff;
  margin: 0 0 12px 0;
}
.recipe-card .tip {
  margin: 16px 0 0 0;
  padding: 12px;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  color: #856404;
  font-size: 13px;
  border-radius: 4px;
}