/* ============================================================
   开奖记录页样式
   参考用户截图：橙框标题 + 两个下拉框 + 灰底记录区
   ============================================================ */
:root{
  --bg:#eef2f7;
  --paper:#ffffff;
  --panel:#ffffff;
  --line:#d9e1ea;
  --accent:#f08429;
  --accent2:#ff8f31;
  --txt:#111111;
  --sub:#5e6875;
  --red:#ef1f0f;
  --blue:#2f86e9;
  --green:#26b314;
  --shadow:0 10px 30px rgba(31,49,78,.10);
  --shadow-soft:0 6px 18px rgba(31,49,78,.08);
  --page-pad:clamp(6px,2vw,14px);
  --card-radius:clamp(14px,2.6vw,20px);
  --control-radius:clamp(12px,2.2vw,16px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#edf2f8 0%,#e8eef5 100%);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-size:clamp(16px,1vw + 12px,20px);
  line-height:1.4;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
select,button{font:inherit}

.page{
  width:min(100%,760px);
  margin:0 auto;
  padding:
    max(var(--page-pad), env(safe-area-inset-top))
    max(var(--page-pad), env(safe-area-inset-right))
    max(var(--page-pad), env(safe-area-inset-bottom))
    max(var(--page-pad), env(safe-area-inset-left));
}

.hero{
  position:sticky;
  top:0;
  z-index:30;
  background:linear-gradient(180deg,rgba(238,242,247,.96) 0%,rgba(238,242,247,.84) 100%);
  backdrop-filter:blur(10px);
  padding-top:4px;
  padding-bottom:8px;
}

.hero-title{
  text-align:center;
  color:#e51717;
  font-weight:900;
  font-size:clamp(28px,2vw + 18px,42px);
  border:4px solid var(--accent);
  background:#fff;
  padding:6px 10px;
}

.lottery-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:6px;
}
.lottery-switch button{
  min-height:clamp(38px,9vw,42px);
  border:0;
  border-radius:var(--control-radius);
  background:#fff;
  color:var(--accent2);
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
}
.lottery-switch button.on{
  background:linear-gradient(180deg,#fff7ef 0%,#ffe9d6 100%);
  color:#d96500;
}

.filters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:6px;
}
.select-wrap{
  display:block;
  background:#fff;
  border:0;
  border-radius:var(--control-radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.select-wrap select{
  width:100%;
  min-height:clamp(38px,9vw,42px);
  border:0;
  background:#fff;
  color:#111;
  padding:0 12px;
  outline:none;
}

.routepicker{
  position:relative;
  margin-top:6px;
}
.route-current{
  width:100%;
  min-height:clamp(36px,8.5vw,40px);
  border:0;
  border-radius:var(--control-radius);
  background:linear-gradient(180deg,#fff8f0 0%,#fff1e3 100%);
  color:#d26d00;
  font-weight:900;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
}
.routebar{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  z-index:40;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  padding:8px;
  background:#fff;
  border:0;
  border-radius:calc(var(--card-radius) - 2px);
  box-shadow:var(--shadow);
}
.routebar[hidden]{display:none}
.routebar button{
  min-height:clamp(34px,8vw,38px);
  border:0;
  border-radius:calc(var(--control-radius) - 2px);
  background:#fff7f0;
  color:#d26d00;
  font-weight:800;
  cursor:pointer;
}
.routebar button.on{
  background:#ffe7d1;
  color:#c65400;
  box-shadow:inset 0 0 0 1px rgba(240,132,41,.20);
}

#drawbar{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:0;
  border-radius:var(--card-radius);
  padding:8px 10px;
  margin-bottom:8px;
  box-shadow:var(--shadow);
  --draw-gap:clamp(2px,.4vw,5px);
  --draw-tile-pad-y:clamp(3px,.45vw,6px);
  --draw-tile-pad-x:clamp(2px,.35vw,5px);
  --draw-num-size:clamp(16px,4.3vw,28px);
  --draw-zod-size:clamp(12px,3vw,18px);
  --draw-meta-size:clamp(10px,1.1vw,14px);
}
.draw-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:6px;
  font-size:var(--draw-meta-size);
}
.draw-issue{
  justify-self:start;
  font-size:clamp(12px,3.2vw,18px);
  font-weight:900;
}
.draw-issue strong,
.draw-clock,
.draw-link{
  font-weight:900;
}
.draw-issue em{
  font-size:clamp(14px,3.8vw,22px);
  font-weight:900;
}
.draw-clock{justify-self:center}
.draw-issue em,
.draw-link{
  color:#e51616;
  font-style:normal;
}
.draw-link{
  justify-self:end;
  font-size:clamp(12px,3.2vw,18px);
  font-weight:900;
}
.draw-balls{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)) auto minmax(0,1fr);
  align-items:center;
  gap:var(--draw-gap);
  margin-top:6px;
}
.plus{
  justify-self:center;
  align-self:center;
  font-size:clamp(14px,1.4vw,20px);
  font-weight:900;
}
.draw-tile{
  min-width:0;
  width:100%;
  padding:var(--draw-tile-pad-y) var(--draw-tile-pad-x);
  border-radius:clamp(8px,2vw,10px);
  color:#fff;
  text-align:center;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.14);
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .35s ease, transform .35s ease;
}
.draw-tile--wait{
  opacity:0;
  transform:translateY(8px) scale(.85);
}
.draw-tile--show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.draw-tile.red{background:var(--red)}
.draw-tile.blue{background:var(--blue)}
.draw-tile.green{background:var(--green)}
.draw-tile.zero{background:#8a8a8a}
.draw-tile .num{
  display:block;
  font-size:var(--draw-num-size);
  line-height:1;
  font-weight:900;
}
.draw-tile .zod{
  display:block;
  font-size:var(--draw-zod-size);
  line-height:1;
  font-weight:900;
}
.draw-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-top:6px;
  font-size:var(--draw-meta-size);
}
.draw-date{
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(12px,3.3vw,18px);
  font-weight:900;
}
.draw-refresh{
  appearance:none;
  border:0;
  background:linear-gradient(180deg,#ffa522 0%,#ff8d00 100%);
  color:#fff;
  padding:6px 10px;
  font-weight:900;
  border-radius:10px;
  cursor:pointer;
  flex:0 0 auto;
  margin-left:auto;
}
@media (max-width:480px){
  #drawbar{
    padding:8px;
  }
  .draw-top,
  .draw-bottom{
    gap:3px;
  }
  .draw-bottom{
    flex-wrap:nowrap;
    align-items:center;
  }
}

main{
  margin-top:0;
  background:var(--panel);
  border:0;
  border-radius:var(--card-radius);
  min-height:420px;
  max-height:none;
  overflow:visible;
  padding:16px 14px;
  box-shadow:var(--shadow);
}
.state{
  padding:24px 10px;
  text-align:center;
  color:#555;
}

.knowledge-footer{
  margin-top:10px;
}
.knowledge-hero{
  margin-bottom:8px;
}
.knowledge-title{
  background:linear-gradient(180deg,#fff8f0 0%,#fff1e3 100%);
  color:#d26d00;
  text-align:center;
  font-weight:900;
  font-size:clamp(22px,1.2vw + 15px,30px);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:var(--shadow-soft);
}
.knowledge-panel{
  background:var(--panel);
  border-radius:var(--card-radius);
  padding:12px;
  box-shadow:var(--shadow);
  margin-bottom:8px;
}
.knowledge-subtitle{
  margin:0 0 10px;
  text-align:center;
  font-size:clamp(18px,1vw + 13px,24px);
  font-weight:900;
  letter-spacing:.08em;
  color:#222;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.knowledge-subtitle::-webkit-scrollbar{display:none}
.knowledge-grid{
  display:grid;
  gap:10px;
}
.knowledge-grid--zodiac{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.knowledge-grid--group,
.knowledge-grid--tags{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.knowledge-card{
  background:linear-gradient(180deg,#ffffff 0%,#f7fafc 100%);
  border-radius:16px;
  padding:10px;
  box-shadow:inset 0 0 0 1px rgba(217,225,234,.9);
}
.knowledge-card-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
  font-weight:900;
  font-size:clamp(17px,.8vw + 13px,22px);
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.knowledge-card-title::-webkit-scrollbar{display:none}
.knowledge-card-title--single{
  justify-content:flex-start;
  color:#d26d00;
}
.knowledge-zodiac{
  color:#111;
}
.knowledge-chong{
  color:#111;
  font-size:.92em;
}
.knowledge-nums{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.knowledge-num{
  min-width:32px;
  padding:4px 6px;
  border-radius:8px;
  color:#fff;
  text-align:center;
  font-weight:900;
  font-size:clamp(14px,.5vw + 11px,18px);
  line-height:1;
}
.knowledge-num.red{background:var(--red)}
.knowledge-num.blue{background:var(--blue)}
.knowledge-num.green{background:var(--green)}
.knowledge-num.zero{background:#8a8a8a}
.knowledge-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.knowledge-tag{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  background:#fff3e3;
  color:#b85b00;
  font-weight:900;
  font-size:clamp(14px,.4vw + 11px,17px);
  white-space:nowrap;
}

.site-footer{
  margin-top:10px;
  padding:14px 10px calc(14px + env(safe-area-inset-bottom));
  text-align:center;
  color:#6a6f78;
  font-size:clamp(14px,.45vw + 12px,18px);
  line-height:1.5;
}
.site-footer p{
  margin:0;
}

.site-ad-slot{
  margin-top:12px;
}
.site-ad-card{
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg,#fff8f0 0%,#fff2e3 100%);
  box-shadow:0 8px 22px rgba(34,42,58,.08);
}
.site-ad-card + .site-ad-card{
  margin-top:10px;
}
.site-ad-media-link{
  display:block;
  width:100%;
  color:inherit;
}
.site-ad-media{
  width:100%;
}
.site-ad-media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:14px;
}
.site-ad-body{
  min-width:0;
  padding:10px 12px 12px;
}
.site-ad-title{
  font-size:clamp(18px,.7vw + 15px,24px);
  font-weight:900;
  color:#d26d00;
  line-height:1.2;
}
.site-ad-text{
  margin-top:6px;
  font-size:clamp(14px,.4vw + 12px,18px);
  color:#364152;
  line-height:1.5;
}
@media (max-width:640px){
  .site-ad-card{
    border-radius:14px;
  }
  .site-ad-media img{
    border-radius:12px;
  }
  .site-ad-body{
    padding:8px 10px 10px;
  }
}

.round{
  margin-bottom:18px;
}
.round:last-child{margin-bottom:0}
.round-title{
  font-weight:900;
  color:#000;
  margin-bottom:6px;
  font-size:clamp(20px,1vw + 15px,28px);
}
.round-line{
  font-size:clamp(15px,.65vw + 11px,22px);
  color:#111;
  margin-bottom:4px;
  word-break:normal;
  overflow-wrap:anywhere;
}
.round-line b{
  font-weight:900;
}
.round-line.plan{
  color:#111;
}
.round-line.result{
  color:#111;
  font-weight:700;
}
.round-line.pending{
  color:#555;
}
.tag-ok{color:#1a9d10;font-weight:900}
.tag-miss{color:#d71717;font-weight:900}
.tag-run{color:#555;font-weight:900}

.skeleton{
  height:12px;
  border-radius:4px;
  background:linear-gradient(90deg,#e9e9e9,#f7f7f7,#e9e9e9);
  background-size:200% 100%;
  animation:sk 1s linear infinite;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width:520px){
  .page{padding:6px}
  .routebar{grid-template-columns:repeat(4,1fr)}
  .lottery-switch,
  .filters{
    gap:6px;
  }
  .lottery-switch button,
  .select-wrap select,
  .route-current{
    min-height:38px;
  }
  main{
    padding:14px 12px;
    border-radius:18px;
  }
  .knowledge-panel{
    padding:10px;
    border-radius:18px;
  }
}
@media (max-width:430px){
  :root{
    --page-pad:8px;
  }
  .lottery-switch,
  .filters{
    gap:5px;
  }
  #drawbar{
    padding:7px 8px;
  }
  .draw-top{
    grid-template-columns:minmax(0,1fr) auto;
    row-gap:2px;
  }
  .draw-link{
    grid-column:2;
    grid-row:1;
  }
  .draw-issue{
    grid-column:1;
    grid-row:1;
  }
  .draw-clock{
    grid-column:1 / -1;
    grid-row:2;
  }
  main{
    min-height:360px;
  }
  .knowledge-grid--zodiac{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:390px){
  body{
    font-size:clamp(15px,3.8vw,18px);
  }
  .page{
    width:100%;
  }
  .draw-balls{
    gap:2px;
  }
  .draw-tile{
    padding:3px 1px;
  }
  .draw-refresh{
    padding:5px 8px;
  }
  .round-title{
    font-size:clamp(18px,5.3vw,22px);
  }
  .round-line{
    font-size:clamp(14px,4.1vw,18px);
  }
  .knowledge-grid--group,
  .knowledge-grid--tags{
    grid-template-columns:1fr;
  }
  .site-ad-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .site-ad-media{
    width:100%;
    flex-basis:auto;
  }
  .knowledge-grid--zodiac{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .knowledge-card{
    padding:8px;
  }
  .knowledge-card-title{
    gap:4px;
    margin-bottom:6px;
    font-size:clamp(14px,4vw,18px);
  }
  .knowledge-nums{
    gap:4px;
  }
  .knowledge-num{
    min-width:28px;
    padding:3px 5px;
    font-size:clamp(12px,3.6vw,15px);
  }
  .knowledge-title{
    font-size:clamp(20px,5.2vw,24px);
  }
  .knowledge-subtitle{
    letter-spacing:0;
    text-align:left;
  }
}
@media (max-width:360px){
  .lottery-switch,
  .filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
  }
  .select-wrap select,
  .lottery-switch button{
    font-size:14px;
  }
  .routebar{
    grid-template-columns:repeat(3,1fr);
  }
  #drawbar{
    --draw-meta-size:10px;
  }
  .knowledge-grid--zodiac{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .knowledge-card{
    padding:7px;
  }
  .knowledge-card-title{
    font-size:clamp(13px,3.9vw,16px);
  }
  .knowledge-num{
    min-width:26px;
    padding:3px 4px;
    font-size:clamp(11px,3.5vw,14px);
  }
}
@media (orientation:landscape) and (max-height:520px){
  .hero{
    padding-top:2px;
    padding-bottom:6px;
  }
  #drawbar{
    padding:6px 8px;
    margin-bottom:6px;
  }
  .draw-balls{
    margin-top:4px;
  }
  .lottery-switch button,
  .select-wrap select,
  .route-current{
    min-height:34px;
  }
  main{
    min-height:280px;
    padding:12px;
  }
  .round{
    margin-bottom:14px;
  }
}