/* ========== 全局样式重置 ========== */
*{margin:0;padding:0;box-sizing:border-box}



/* ========== 页面背景与布局 ========== */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#000;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:0;
  padding-bottom:100px
}

/* 移动端背景图 - 使用img标签实现 */
.mobile-bg{
  display:none
}
@media screen and (max-width:480px){
  .mobile-bg{
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    z-index:-1
  }
}

/* 树洞页独立背景 */
.treehole-bg{
  display:none
}
@media screen and (max-width:480px){
  .treehole-bg{
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    z-index:-1
  }
}

/* 打料页独立背景 */
.processing-bg{
  display:none
}
@media screen and (max-width:480px){
  .processing-bg{
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    z-index:-1
  }
}

/* 平板和桌面端使用纯色背景 */
@media screen and (min-width:481px){
  body{
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)
  }
}
#app{
  border-radius:0;
  padding:0;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  width:100%;
  max-width:480px;
  min-height:100vh;
  position:relative;
  overflow:hidden
}


/* ========== 顶部渐变标题栏 ========== */
.header{
  background:linear-gradient(135deg,#4361ee 0%,#3a0ca3 100%);
  padding:20px;
  padding-top:max(20px, env(safe-area-inset-top));
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 4px 20px rgba(67,97,238,0.3);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  max-width:480px;
  margin:0 auto
}
h1{
  text-align:left;
  color:white;
  font-size:20px;
  margin:0;
  font-weight:600;
  letter-spacing:0.5px;
  transition:font-size 0.3s ease
}

/* 头部天气小部件 */
.header-weather{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.15);
  padding:4px 10px;
  border-radius:16px;
  opacity:0;
  transform:scale(0.8) translateX(-10px);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
  margin-left:8px
}
.header-weather.show{
  opacity:1;
  transform:scale(1) translateX(0);
  pointer-events:auto
}
.header-weather-icon{
  font-size:14px
}
.header-weather-temp{
  font-size:13px;
  color:white;
  font-weight:500
}
.header-title-wrapper{
  display:flex;
  align-items:center;
  flex:1
}

/* ========== 历史记录按钮 ========== */
.history-btn{
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:20px;
  padding:8px 16px;
  cursor:pointer;
  font-size:13px;
  color:white;
  transition:all 0.3s
}
.history-btn:hover{
  background:rgba(255,255,255,0.3);
  transform:translateY(-1px)
}

/* ========== 历史记录弹窗 ========== */
.history-popup{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:linear-gradient(-45deg,#d9a2ea,#eeaec4,#edc0a9,#f0db9a);
  background-size:400% 400%;
  animation:gradientBG 15s ease infinite;
  z-index:200;
  display:none;
  flex-direction:column
}
.history-popup.show{display:flex}
.history-popup-header{
  background:rgba(255,248,240,0.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.5);
  padding:20px;
  font-weight:600;
  color:#6B5344;
  font-size:16px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.history-popup-header>div{display:flex;align-items:center;gap:15px}
.clear-history-btn{
  background:rgba(212,165,116,0.2);
  color:#6B5344;
  border:1px solid rgba(212,165,116,0.3);
  border-radius:15px;
  padding:6px 14px;
  font-size:13px;
  cursor:pointer;
  transition:all 0.3s
}
.clear-history-btn:hover{background:rgba(212,165,116,0.35)}
.history-popup-close{cursor:pointer;font-size:24px;color:#6B5344;opacity:0.7}
.history-popup-close:hover{opacity:1}
.history-list{flex:1;overflow-y:auto;padding:15px}
.history-item{
  background:rgba(255,248,240,0.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:12px;
  padding:15px;
  margin-bottom:12px;
  box-shadow:0 2px 8px rgba(139,115,85,0.08);
  border-left:4px solid #D4A574
}
.history-empty{padding:50px 30px;text-align:center;color:#8B7355;font-size:14px}

/* ========== 内容区域 ========== */
.content{padding:20px;padding-top:80px}

/* ========== 卡片样式 ========== */
.card:not(.weather-card){
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:16px;
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
  transition:transform 0.3s,box-shadow 0.3s,background 0.3s
}
.card:not(.weather-card):hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,0.15);
  background:rgba(255,255,255,0.35)
}
.weather-card{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border-radius:16px;
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  transition:transform 0.3s,box-shadow 0.3s
}
.weather-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,0.12)
}
.card-title{
  font-size:14px;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  margin-bottom:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px
}
.card-title::before{
  content:'';
  width:4px;
  height:16px;
  background:linear-gradient(135deg,#4361ee 0%,#3a0ca3 100%);
  border-radius:2px
}

/* ========== 时间显示 ========== */
.time-display{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.time-value{
  font-size:42px;
  font-weight:700;
  color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:2px;
  text-shadow:0 2px 4px rgba(0,0,0,0.5);
  background:linear-gradient(135deg,#fff 0%,#e0e0e0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent
}
.time-hint{font-size:12px;color:#fff;margin-top:8px;text-shadow:0 1px 2px rgba(0,0,0,0.5)}

/* ========== 刷新按钮 ========== */
.refresh-btn{
  background:linear-gradient(135deg,#4361ee 0%,#3a0ca3 100%);
  color:white;
  border:none;
  border-radius:12px;
  padding:12px 20px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:all 0.3s;
  box-shadow:0 4px 15px rgba(67,97,238,0.3)
}
.refresh-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(67,97,238,0.4)
}
.refresh-btn:active{transform:translateY(0)}

/* ========== 下班时间 ========== */
.shift-info{display:flex;align-items:center;gap:20px}
.shift-badge{
  background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
  color:white;
  padding:10px 20px;
  border-radius:25px;
  font-size:14px;
  font-weight:600;
  box-shadow:0 4px 15px rgba(245,87,108,0.3)
}
.shift-badge.night{
  background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
  box-shadow:0 4px 15px rgba(79,172,254,0.3)
}
.shift-hint{font-size:13px;color:#fff;flex:1;font-weight:600;display:flex;align-items:center;gap:6px;text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.shift-class-text{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(102,126,234,0.4)}

/* ========== 输入框 ========== */
.input-group{position:relative}
.input-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:#666
}
.number-input{
  width:100%;
  padding:16px 16px 16px 50px;
  border:2px solid rgba(255,255,255,0.5);
  border-radius:12px;
  font-size:18px;
  font-weight:600;
  color:#fff;
  background:rgba(0,0,0,0.3);
  transition:all 0.3s
}
.number-input:focus{
  outline:none;
  border-color:#4361ee;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 4px rgba(67,97,238,0.15)
}
.number-input:not(:placeholder-shown){
  color:#333;
  background:rgba(255,255,255,0.95)
}
.number-input::placeholder{color:#fff}
.number-input:focus::placeholder{color:#333}
.input-hint{font-size:12px;color:#ffffff;margin-top:10px;padding-left:5px;text-shadow:0 1px 2px rgba(0,0,0,0.5)}

/* ========== 结果展示区域 - 液态水效果瓶子 ========== */
.result-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.1) 100%);
  border-radius:20px;
  padding:30px 20px;
  margin-bottom:16px;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  box-shadow:0 10px 40px rgba(67,97,238,0.2),inset 0 0 0 2px rgba(255,255,255,0.5);
  position:relative;
  overflow:hidden;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.result-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.4) 0%,transparent 50%,rgba(255,255,255,0.2) 100%);
  pointer-events:none;
  z-index:2
}
/* 液态水效果 */
.liquid-container{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:var(--liquid-percent,0%);
  background:linear-gradient(180deg,#4facfe 0%,#00f2fe 50%,#0099ff 100%);
  transition:height 1s ease-out;
  z-index:1;
  overflow:hidden
}
.liquid-container::before{
  content:'';
  position:absolute;
  top:-10px;
  left:0;
  right:0;
  height:20px;
  background:linear-gradient(180deg,rgba(79,172,254,0.8) 0%,rgba(0,242,254,0.4) 100%);
  border-radius:50%;
  animation:wave 3s ease-in-out infinite
}
.liquid-container::after{
  content:'';
  position:absolute;
  top:-5px;
  left:-50%;
  right:-50%;
  height:30px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,0.4) 0%,transparent 70%);
  animation:wave-surface 2s ease-in-out infinite
}
@keyframes wave{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(-3px) scaleY(1.1)}
}
@keyframes wave-surface{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(25px)}
}
/* 气泡效果 */
.bubbles{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:100%;
  overflow:hidden;
  pointer-events:none
}
.bubble{
  position:absolute;
  bottom:-20px;
  width:10px;
  height:10px;
  background:rgba(255,255,255,0.4);
  border-radius:50%;
  animation:bubble-rise 4s ease-in infinite
}
.bubble:nth-child(1){left:10%;animation-delay:0s;width:8px;height:8px}
.bubble:nth-child(2){left:20%;animation-delay:1s;width:12px;height:12px}
.bubble:nth-child(3){left:35%;animation-delay:2s;width:6px;height:6px}
.bubble:nth-child(4){left:50%;animation-delay:0.5s;width:10px;height:10px}
.bubble:nth-child(5){left:65%;animation-delay:1.5s;width:7px;height:7px}
.bubble:nth-child(6){left:80%;animation-delay:2.5s;width:9px;height:9px}
.bubble:nth-child(7){left:90%;animation-delay:3s;width:5px;height:5px}
@keyframes bubble-rise{
  0%{bottom:-20px;opacity:0;transform:translateX(0)}
  10%{opacity:1}
  90%{opacity:0.5}
  100%{bottom:100%;opacity:0;transform:translateX(-10px)}
}
/* 刻度线 */
.bottle-scale{
  position:absolute;
  right:10px;
  top:20px;
  bottom:20px;
  width:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  z-index:3;
  font-size:10px;
  color:rgba(0,0,0,0.4);
  font-weight:500
}
.scale-mark{
  display:flex;
  align-items:center;
  gap:4px
}
.scale-mark::before{
  content:'';
  width:8px;
  height:1px;
  background:rgba(0,0,0,0.3)
}
/* 百分比显示 */
.percentage-badge{
  position:absolute;
  top:15px;
  left:15px;
  background:rgba(79,172,254,0.9);
  color:white;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  z-index:3;
  box-shadow:0 2px 10px rgba(79,172,254,0.4)
}
.result-label{
  font-size:14px;
  color:#fff;
  margin-bottom:10px;
  font-weight:500;
  z-index:3;
  position:relative;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}
.result-value{
  font-size:56px;
  font-weight:800;
  margin-bottom:8px;
  color:#fff;
  z-index:3;
  position:relative;
  text-shadow:
    2px 2px 0 #0077b6,
    4px 4px 0 #023e8a,
    6px 6px 12px rgba(0,0,0,0.4);
  letter-spacing:1px
}
.result-unit{
  font-size:16px;
  color:#fff;
  font-weight:500;
  z-index:3;
  position:relative;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}
.result-formula{
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid rgba(0,0,0,0.1);
  font-size:13px;
  color:#0162ff;
  font-weight:600;
  font-family:'Courier New',monospace;
  z-index:3;
  position:relative
}

/* ========== 排料计划区域 ========== */
.discharge-section{margin-top:5px}
.discharge-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px
}
.discharge-title{
  font-size:16px;
  font-weight:600;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}
.discharge-count{
  background:rgba(197, 197, 197, 0.5);
  color:#ffffff;
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
  font-weight:600
}
.discharge-cards{display:flex;flex-direction:column;gap:12px}

/* 排料卡片样式 - 毛玻璃效果 */
.discharge-card{
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:14px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.05);
  border:1px solid rgba(255,255,255,0.5);
  border-left:0;
  position:relative;
  overflow:hidden;
  transition:all 0.3s
}
.discharge-card.glass-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.85)
}
.discharge-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px
}
.discharge-card.speed-up::before{background:linear-gradient(180deg,#28a745 0%,#20c997 100%)}
.discharge-card.speed-down::before{background:linear-gradient(180deg,#ffc107 0%,#ff9800 100%)}
.discharge-card.final::before{background:linear-gradient(180deg,#dc3545 0%,#f5576c 100%)}
.discharge-card.current::before{background:linear-gradient(180deg,#4361ee 0%,#3a0ca3 100%)}
.discharge-card.speed-change-only::before{background:linear-gradient(180deg,#9c27b0 0%,#e91e63 100%)}
.discharge-card.speed-change-only{
  background:linear-gradient(135deg,#fff8ff 0%,#ffeff5 100%);
  border:1px dashed rgba(156,39,176,0.3)
}
.discharge-card.current{
  background:linear-gradient(135deg,#f8f9ff 0%,#eef0ff 100%);
  box-shadow:0 4px 20px rgba(67,97,238,0.15)
}
.discharge-left{flex:1}
.discharge-time{
  font-size:20px;
  font-weight:700;
  color:#000000;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px
}
.shift-class-badge{
  font-size:11px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);
  padding:2px 8px;
  border-radius:10px;
  box-shadow:0 2px 4px rgba(238,90,111,0.3)
}
.discharge-detail{
  font-size:12px;
  color:#000000;
  display:flex;
  align-items:center;
  gap:8px
}
.discharge-right{text-align:right}
.discharge-times{
  font-size:18px;
  font-weight:700;
  color:#4361ee;
  margin-bottom:4px
}
.discharge-amount{
  font-size:12px;
  color:#000000;
  font-weight:500;
}
.speed-change-badge{
  font-size:13px;
  font-weight:700;
  color:#9c27b0;
  padding:6px 12px;
  background:linear-gradient(135deg,#f3e5f5 0%,#fce4ec 100%);
  border-radius:20px;
  border:1px solid rgba(156,39,176,0.2)
}

/* 标签样式 */
.speed-change-tag{
  font-size:11px;
  padding:4px 10px;
  border-radius:12px;
  margin-top:8px;
  display:inline-block;
  font-weight:600
}
.speed-up .speed-change-tag{background:#d4edda;color:#155724}
.speed-down .speed-change-tag{background:#fff3cd;color:#856404}
.current-tag{
  font-size:11px;
  padding:4px 10px;
  border-radius:12px;
  background:#4361ee;
  color:white;
  margin-top:8px;
  display:inline-block;
  font-weight:600
}

/* 折叠/展开按钮 */
.collapse-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:16px;
  cursor:pointer;
  padding:8px 0
}
.toggle-line{
  flex:1;
  height: 2px;
  background:linear-gradient(90deg,transparent,rgb(255, 255, 255),transparent)
}
.toggle-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:rgba(197, 197, 197, 0.5);
  border-radius:20px;
  color:#ffffff;
  font-size:13px;
  font-weight:500;
  transition:all 0.3s;
  white-space:nowrap
}
.toggle-btn:hover{
  background:rgba(197, 197, 197, 0.5);
  transform:translateY(-1px)
}
.toggle-btn.expanded{
  background:rgba(197, 197, 197, 0.5);
}
.toggle-btn.expanded .toggle-icon{
  transform:rotate(180deg)
}
.toggle-icon{
  transition:transform 0.3s ease
}

/* 折叠卡片的容器 */
.collapsed-cards{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(0,0,0,0.1)
}

/* 向下滑入动画 */
.slide-down-enter-active,
.slide-down-leave-active{
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  max-height:2000px;
  opacity:1;
  transform:translateY(0)
}
.slide-down-enter-from,
.slide-down-leave-to{
  max-height:0;
  opacity:0;
  transform:translateY(-20px);
  overflow:hidden
}

/* ========== 底部固定按钮 ========== */
.next-btn-fixed{
  position:fixed;
  bottom:60px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  padding:15px 20px 25px;
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.3);
  box-shadow:0 -4px 30px rgba(0,0,0,0.1);
  z-index:100
}
.next-btn{
  width:100%;
  padding:16px;
  background:linear-gradient(135deg,#28a745 0%,#20c997 100%);
  color:white;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s;
  box-shadow:0 6px 20px rgba(40,167,69,0.3)
}
.next-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(40,167,69,0.4)
}
.next-btn:active{transform:translateY(0)}

/* ========== 遮罩层 ========== */
.overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  z-index:150
}

/* ========== 按钮下方的页脚 ========== */
.footer-below-btn{
  text-align:center;
  margin-top:12px;
  font-size:11px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
  line-height:1.5
}
.footer-below-btn .footer-star{
  color:#ffc107;
  margin-right:3px;
  font-size:12px
}
.footer-below-btn .footer-divider{
  margin:0 8px;
  color:#fff
}

/* ========== 空调控制卡片样式 ========== */
.ac-card{
  background:linear-gradient(135deg,#e0e0e0 0%,#f5f5f5 100%);
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
  transition:all 0.3s ease
}
.ac-card.ac-on{
  background:linear-gradient(135deg,#4fc3f7 0%,#29b6f6 100%);
  box-shadow:0 4px 20px rgba(79,195,247,0.4)
}
.ac-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}
.ac-title{
  font-size:14px;
  font-weight:600;
  color:#333
}
.ac-card.ac-on .ac-title{
  color:#fff
}
.ac-power-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#ccc;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 2px 5px rgba(0,0,0,0.2)
}
.ac-power-btn.on{
  background:#00c853;
  box-shadow:0 0 15px rgba(0,200,83,0.5)
}
.power-icon{
  font-size:18px;
  color:#fff
}
.ac-body{
  animation:fadeIn 0.3s ease
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.ac-display{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding:10px;
  background:rgba(255,255,255,0.3);
  border-radius:8px
}
.ac-temp-display{
  display:flex;
  align-items:baseline;
  gap:2px
}
.ac-temp-num{
  font-size:36px;
  font-weight:700;
  color:#333;
  line-height:1
}
.ac-card.ac-on .ac-temp-num{
  color:#fff
}
.ac-temp-unit{
  font-size:16px;
  color:#666
}
.ac-card.ac-on .ac-temp-unit{
  color:rgba(255,255,255,0.8)
}
.ac-wind-animation{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:40px
}
.wind-line{
  height:3px;
  background:rgba(255,255,255,0.6);
  border-radius:2px;
  animation:windFlow 1s ease-in-out infinite;
  transform-origin:left
}
@keyframes windFlow{
  0%,100%{transform:scaleX(0.3);opacity:0.3}
  50%{transform:scaleX(1);opacity:1}
}
.ac-controls{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px
}
.ac-temp-control{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px
}
.ac-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.8);
  font-size:20px;
  font-weight:600;
  color:#333;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:0 2px 5px rgba(0,0,0,0.1)
}
.ac-btn:active{
  transform:scale(0.95);
  box-shadow:0 1px 3px rgba(0,0,0,0.2)
}
.ac-label{
  font-size:12px;
  color:#666;
  font-weight:500
}
.ac-card.ac-on .ac-label{
  color:rgba(255,255,255,0.9)
}
.ac-wind-control{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px
}
.wind-slider{
  display:flex;
  gap:4px
}
.wind-bar{
  width:20px;
  height:8px;
  background:rgba(0,0,0,0.1);
  border-radius:4px;
  cursor:pointer;
  transition:all 0.2s ease
}
.wind-bar.active{
  background:#00c853;
  box-shadow:0 0 8px rgba(0,200,83,0.5)
}
.ac-card.ac-on .wind-bar.active{
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,0.6)
}
.ac-tips{
  text-align:center;
  font-size:11px;
  color:#666;
  padding:6px;
  background:rgba(255,255,255,0.4);
  border-radius:6px;
  min-height:20px;
  line-height:1.4
}
.ac-card.ac-on .ac-tips{
  color:#fff;
  background:rgba(255,255,255,0.2)
}
.ac-off-text{
  text-align:center;
  font-size:12px;
  color:#999;
  padding:15px;
  font-style:italic
}

/* ========== 数据可视化图表样式 ========== */
.chart-section{margin-top:16px}

    /* 空调卡片样式 */
    .ac-card-wrapper {
      background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
      padding: 20px;
    }
    /* 空调室内机 */
    .ac-unit {
      background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
      border-radius: 12px;
      height: 110px;
      position: relative;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      padding: 0 15px;
      margin-bottom: 8px;
    }
    /* 能效标识 */
    .ac-energy-label {
      width: 38px;
      height: 48px;
      background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
      border-radius: 3px;
      padding: 3px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .energy-bars {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .e-bar {
      height: 3px;
      border-radius: 1px;
    }
    .e-bar.red { background: #e53935; width: 100%; }
    .e-bar.orange { background: #fb8c00; width: 85%; }
    .e-bar.yellow { background: #fdd835; width: 70%; }
    .e-bar.green { background: #7cb342; width: 55%; }
    .e-bar.dark-green { background: #2e7d32; width: 40%; }
    .energy-text {
      margin-top: 2px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .e-line {
      height: 2px;
      background: rgba(255,255,255,0.8);
      border-radius: 1px;
    }
    .e-line.short { width: 60%; }
    /* 显示屏 */
    .ac-screen {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 5px;
    }
    .screen-icon {
      font-size: 14px;
      opacity: 0.8;
    }
    .screen-temp {
      display: flex;
      align-items: flex-start;
      color: #9e9e9e;
      font-family: 'Courier New', monospace;
    }
    .ac-unit.ac-on .screen-temp {
      color: #00bcd4;
      text-shadow: 0 0 5px rgba(0, 188, 212, 0.5);
    }
    .lcd-num {
      font-size: 40px;
      font-weight: 300;
      line-height: 1;
    }
    .lcd-unit {
      font-size: 14px;
      margin-left: 2px;
    }
    .screen-wind {
      display: flex;
      gap: 3px;
    }
    .wind-dot {
      width: 4px;
      height: 4px;
      background: #00bcd4;
      border-radius: 50%;
      animation: windBlink 0.8s ease-in-out infinite;
    }
    .wind-dot:nth-child(2) { animation-delay: 0.1s; }
    .wind-dot:nth-child(3) { animation-delay: 0.2s; }
    .wind-dot:nth-child(4) { animation-delay: 0.3s; }
    .wind-dot:nth-child(5) { animation-delay: 0.4s; }
    @keyframes windBlink {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }
    /* 中央铭牌 */
    .ac-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 4px;
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 25%, #b8860b 50%, #ffd700 75%, #b8860b 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      animation: shimmer 3s linear infinite;
    }
    @keyframes shimmer {
      0% { background-position: 0% center; }
      100% { background-position: 200% center; }
    }
    /* 运行指示灯 */
    .ac-led {
      position: absolute;
      right: 10px;
      bottom: 8px;
      width: 6px;
      height: 6px;
      background: #ccc;
      border-radius: 50%;
      transition: all 0.3s;
    }
    .ac-led.on {
      background: #00e676;
      box-shadow: 0 0 8px #00e676;
      animation: ledPulse 1.5s ease-in-out infinite;
    }
    @keyframes ledPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    /* 出风口和气流动画 */
    .ac-air-outlet {
      position: relative;
      height: 100px;
      margin-bottom: 15px;
      overflow: hidden;
    }
    .ac-air-outlet.cool .air-flow {
      background: linear-gradient(180deg, rgba(135, 206, 235, 0.8) 0%, rgba(0, 191, 255, 0.4) 50%, transparent 100%);
      animation: airFlow 1.2s ease-out infinite;
    }
    .ac-air-outlet.heat .air-flow {
      background: linear-gradient(180deg, rgba(255, 180, 120, 0.8) 0%, rgba(255, 140, 80, 0.4) 50%, transparent 100%);
      animation: airFlow 1.2s ease-out infinite;
    }
    .air-flow {
      position: absolute;
      top: 0;
      width: 3px;
      height: 100%;
      border-radius: 2px;
      will-change: transform, opacity;
    }
    /* 简化的气流动画：性能优化 */
    @keyframes airFlow {
      0% { transform: translateY(-100%) scaleX(0.5); opacity: 0; }
      20% { opacity: 0.8; transform: translateY(-20%) scaleX(0.8); }
      60% { transform: translateY(40%) scaleX(1.2); opacity: 0.6; }
      100% { transform: translateY(100%) scaleX(1.8); opacity: 0; }
    }
    /* 遥控器 */
    .ac-remote {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 15px;
    }
    .remote-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }
    .remote-btn:active {
      transform: scale(0.95);
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .mode-cool {
      background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    }
    .mode-cool.active {
      box-shadow: 0 0 15px rgba(92, 107, 192, 0.6);
    }
    .power-btn {
      background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
      color: white;
      font-size: 24px;
    }
    .power-btn.on {
      background: linear-gradient(135deg, #ef5350 0%, #f44336 100%);
      animation: powerGlow 2s ease-in-out infinite;
    }
    @keyframes powerGlow {
      0%, 100% { box-shadow: 0 0 10px rgba(244, 67, 54, 0.5); }
      50% { box-shadow: 0 0 20px rgba(244, 67, 54, 0.8); }
    }
    .mode-heat {
      background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
    }
    .mode-heat.active {
      box-shadow: 0 0 15px rgba(255, 167, 38, 0.6);
    }
    /* 控制面板 */
    .ac-controls-panel {
      background: rgba(255,255,255,0.6);
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 10px;
      animation: slideUp 0.3s ease;
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .control-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-bottom: 10px;
    }
    .control-row:last-child {
      margin-bottom: 0;
    }
    .ctrl-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
      color: white;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3);
    }
    .ctrl-btn:active {
      transform: scale(0.9);
    }
    .ctrl-label {
      font-size: 14px;
      color: #616161;
      font-weight: 500;
      min-width: 40px;
      text-align: center;
    }
    .wind-levels {
      display: flex;
      gap: 8px;
    }
    .w-level {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #9e9e9e;
      cursor: pointer;
      transition: all 0.2s;
    }
    .w-level.active {
      background: linear-gradient(135deg, #26c6da 0%, #00bcd4 100%);
      color: white;
      box-shadow: 0 0 10px rgba(0, 188, 212, 0.4);
    }
    /* 提示文字 */
    .ac-tips-text {
      text-align: center;
      font-size: 12px;
      color: #757575;
      padding: 8px;
      background: rgba(255,255,255,0.5);
      border-radius: 6px;
    }
    .ac-off-hint {
      text-align: center;
      color: #9e9e9e;
      font-size: 14px;
      padding: 15px 0;
    }

/* 作者申明卡片样式 */
.author-notice{
  margin-top:16px
}
.author-notice .card-title::before{
  background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)
}
.notice-content{
  display:flex;
  flex-direction:column;
  gap:12px
}
.notice-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.4);
  border-radius:10px;
  transition:all 0.3s
}
.notice-item:hover{
  background:rgba(255,255,255,0.6);
  transform:translateX(4px)
}
.notice-num{
  width:28px;
  height:28px;
  min-width:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#4361ee 0%,#3a0ca3 100%);
  border-radius:50%;
  text-align:center;
  line-height:1;
  box-shadow:0 2px 8px rgba(67,97,238,0.4)
}
.notice-text{
  font-size:14px;
  color:#121212;
  line-height:1.6;
  flex:1;
}

/* 进度条 - 霓虹科技风格 */
.progress-container{
  margin-bottom:30px;
  padding:20px;
  background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%);
  backdrop-filter:blur(10px);
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1)
}
.progress-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  font-size:15px;
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,0.5)
}
.progress-percent{
  font-weight:800;
  color:#00f2ff;
  font-size:20px;
  text-shadow:0 0 20px rgba(0,242,255,0.8),0 0 40px rgba(0,242,255,0.4);
  animation:pulse-glow 2s ease-in-out infinite
}
@keyframes pulse-glow{
  0%,100%{text-shadow:0 0 20px rgba(0,242,255,0.8),0 0 40px rgba(0,242,255,0.4)}
  50%{text-shadow:0 0 30px rgba(0,242,255,1),0 0 60px rgba(0,242,255,0.6)}
}
.progress-bar-bg{
  position:relative;
  height:32px;
  background:linear-gradient(180deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 100%);
  border-radius:16px;
  overflow:visible;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.5),0 2px 4px rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.1)
}
.progress-bar-fill{
  height:100%;
  background:linear-gradient(90deg,#00f2ff 0%,#00c6ff 25%,#0072ff 50%,#3a0ca3 75%,#7209b7 100%);
  background-size:200% 100%;
  border-radius:14px;
  transition:width 1s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 30px rgba(0,242,255,0.6),0 0 60px rgba(0,114,255,0.4),inset 0 2px 4px rgba(255,255,255,0.4);
  position:relative;
  overflow:hidden;
  animation:gradient-flow 3s linear infinite
}
@keyframes gradient-flow{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.progress-bar-fill::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);
  animation:shimmer 1.5s infinite
}
@keyframes shimmer{
  0%{left:-100%}
  100%{left:100%}
}
.progress-bar-fill::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  background:radial-gradient(circle,#fff 0%,#00f2ff 50%,transparent 70%);
  border-radius:50%;
  box-shadow:0 0 20px rgba(0,242,255,1),0 0 40px rgba(0,242,255,0.8),0 0 60px rgba(0,114,255,0.6);
  margin-right:-8px;
  animation:pulse-tip 1.5s ease-in-out infinite
}
@keyframes pulse-tip{
  0%,100%{transform:translateY(-50%) scale(1);opacity:1}
  50%{transform:translateY(-50%) scale(1.3);opacity:0.8}
}
.progress-marker{
  position:absolute;
  top:-8px;
  width:12px;
  height:36px;
  background:linear-gradient(180deg,#ffd700 0%,#ff8c00 100%);
  border:2px solid #fff;
  border-radius:6px;
  transform:translateX(-50%);
  cursor:pointer;
  box-shadow:0 0 15px rgba(255,215,0,0.8),0 4px 8px rgba(0,0,0,0.3);
  transition:all 0.3s;
  z-index:10
}
.progress-marker:hover{
  transform:translateX(-50%) scale(1.2);
  box-shadow:0 0 25px rgba(255,215,0,1),0 0 40px rgba(255,140,0,0.8)
}
.progress-marker::before{
  content:attr(title);
  position:absolute;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.8);
  color:#ffd700;
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  transition:all 0.3s;
  pointer-events:none;
  border:1px solid rgba(255,215,0,0.5)
}
.progress-marker:hover::before{
  opacity:1;
  top:-35px
}
.progress-range{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  font-size:13px;
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,0.5);
  font-weight:600
}

/* 料速变化曲线图 */
.speed-chart{margin-top:20px}
.chart-title{
  font-size:14px;
  color:#fff;
  margin-bottom:12px;
  font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}
.chart-svg-container{
  background:rgba(255,255,255,0.4);
  border-radius:12px;
  padding:15px;
  margin-bottom:12px
}
.speed-svg{width:100%;height:auto}
.chart-legend{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap
}
.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}
.legend-dot{
  width:10px;
  height:10px;
  border-radius:50%
}

/* 统计信息网格 */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:20px
}
.stat-item{
  background:rgba(255,255,255,0.4);
  border-radius:12px;
  padding:15px;
  text-align:center;
  transition:all 0.3s
}
.stat-item:hover{
  background:rgba(67,97,238,0.15);
  transform:translateY(-2px)
}
.stat-value{
  font-size:20px;
  font-weight:700;
  color:#4361ee;
  margin-bottom:4px
}
.stat-value.stat-value-with-shift{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px
}
.stat-value.stat-value-with-shift .time-part{
  font-size:18px
}
.stat-value.stat-value-with-shift .shift-part{
  margin-top:2px
}
.stat-value.stat-value-with-shift .shift-class-badge{
  font-size:10px;
  padding:2px 8px
}
.stat-label{
  font-size:14px;
  color:#000000;
}

/* 排末时间区域样式 */
.final-discharge-section{
  margin-top:20px;
  background:rgba(255,255,255,0.25);
  border-radius:16px;
  padding:16px;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
}
.final-discharge-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
  color:#4361ee;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(67,97,238,0.3);
}
.title-icon{
  font-size:20px;
}
.final-discharge-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.final-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.7) 100%);
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
  transition:all 0.3s ease;
  border:1px solid rgba(255,255,255,0.5);
}
.final-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(67,97,238,0.2);
}
.final-label{
  font-size:13px;
  color:#666;
  margin-bottom:8px;
  font-weight:500;
}
.final-time{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.final-time .time-text{
  font-size:16px;
  font-weight:700;
  color:#4361ee;
}
.final-time .shift-badge{
  font-size:11px;
  padding:3px 10px;
  background:linear-gradient(135deg,#4361ee 0%,#3a0ca3 100%);
  color:#fff;
  border-radius:12px;
  font-weight:500;
}

/* 中奖卡片样式 - 豪华版 */
.lucky-card{
  position:relative;
  background:linear-gradient(135deg,#ff6b6b 0%,#feca57 25%,#ff9ff3 50%,#54a0ff 75%,#5f27cd 100%);
  background-size:400% 400%;
  border-radius:16px;
  padding:16px 12px;
  text-align:center;
  box-shadow:0 8px 30px rgba(255,107,107,0.5),0 0 40px rgba(255,159,243,0.3);
  border:2px solid rgba(255,255,255,0.6);
  margin-top:12px;
  overflow:hidden;
  animation:gradientShift 3s ease infinite,luckyBounce 2s ease-in-out infinite;
}

/* 流光效果 */
.lucky-shine{
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shine 2s infinite;
}

/* 粒子效果 */
.lucky-particles{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
}
.particle{
  position:absolute;
  width:8px;
  height:8px;
  background:#fff;
  border-radius:50%;
  opacity:0;
  animation:particleFloat 3s ease-in-out infinite;
}
.particle:nth-child(1){left:10%;animation-delay:0s}
.particle:nth-child(2){left:25%;animation-delay:0.5s}
.particle:nth-child(3){left:50%;animation-delay:1s}
.particle:nth-child(4){left:75%;animation-delay:1.5s}
.particle:nth-child(5){left:90%;animation-delay:2s}
.particle:nth-child(6){left:40%;animation-delay:2.5s}

.lucky-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* 图标 */
.lucky-icon{
  font-size:32px;
  animation:iconBounce 1s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* 标题 */
.lucky-title{
  font-size:22px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 20px rgba(255,255,255,0.8),0 4px 8px rgba(0,0,0,0.3);
  letter-spacing:2px;
  animation:titleGlow 1.5s ease-in-out infinite;
}

/* 文字 */
.lucky-text{
  font-size:14px;
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
  letter-spacing:0;
  background:rgba(0,0,0,0.15);
  padding:6px 12px;
  border-radius:16px;
  white-space:nowrap;
}

/* 班次高亮 */
.shift-highlight{
  display:inline-block;
  background:linear-gradient(135deg,#ffd700 0%,#ffed4e 50%,#ffd700 100%);
  background-size:200% 200%;
  color:#d63031;
  padding:2px 8px;
  border-radius:8px;
  margin:0 2px;
  font-weight:900;
  font-size:16px;
  text-shadow:none;
  box-shadow:0 4px 15px rgba(255,215,0,0.6),inset 0 2px 4px rgba(255,255,255,0.5);
  animation:shiftGlow 1.5s ease-in-out infinite,shiftBgMove 2s linear infinite;
  position:relative;
  overflow:hidden;
}
.shift-highlight::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.8) 50%,transparent 70%);
  animation:shineSweep 2s infinite;
}
@keyframes shiftGlow{
  0%,100%{transform:scale(1);box-shadow:0 4px 15px rgba(255,215,0,0.6)}
  50%{transform:scale(1.1);box-shadow:0 6px 25px rgba(255,215,0,0.9),0 0 30px rgba(255,215,0,0.5)}
}
@keyframes shiftBgMove{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
@keyframes shineSweep{
  0%{transform:translateX(-100%) rotate(45deg)}
  100%{transform:translateX(100%) rotate(45deg)}
}

/* GIF */
.lucky-gif{
  width:120px;
  height:auto;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  border:3px solid rgba(255,255,255,0.9);
  animation:gifPulse 1.5s ease-in-out infinite;
}

/* 徽章 */
.lucky-badge{
  display:flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg,#ffd700 0%,#ffed4e 100%);
  padding:4px 12px;
  border-radius:16px;
  box-shadow:0 4px 15px rgba(255,215,0,0.5);
  animation:badgeRotate 3s ease-in-out infinite;
}
.badge-star{
  font-size:14px;
  color:#ff6b6b;
  animation:starTwinkle 0.8s ease-in-out infinite;
}
.badge-text{
  font-size:12px;
  font-weight:800;
  color:#d63031;
  letter-spacing:2px;
}

/* 动画定义 */
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes luckyBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes shine{
  0%{left:-100%}
  100%{left:100%}
}
@keyframes particleFloat{
  0%{transform:translateY(100%) scale(0);opacity:0}
  50%{opacity:1}
  100%{transform:translateY(-100vh) scale(1);opacity:0}
}
@keyframes iconBounce{
  0%,100%{transform:scale(1) rotate(0deg)}
  25%{transform:scale(1.2) rotate(-10deg)}
  75%{transform:scale(1.2) rotate(10deg)}
}
@keyframes titleGlow{
  0%,100%{text-shadow:0 0 20px rgba(255,255,255,0.8),0 4px 8px rgba(0,0,0,0.3)}
  50%{text-shadow:0 0 40px rgba(255,255,255,1),0 0 60px rgba(255,215,0,0.8),0 4px 8px rgba(0,0,0,0.3)}
}
@keyframes gifPulse{
  0%,100%{transform:scale(1);box-shadow:0 8px 30px rgba(0,0,0,0.4)}
  50%{transform:scale(1.05);box-shadow:0 12px 40px rgba(0,0,0,0.5)}
}
@keyframes badgeRotate{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}
@keyframes starTwinkle{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.3)}
}

/* ========== 动画效果 ========== */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
.card{animation:fadeInUp 0.5s ease-out}
.discharge-card{animation:fadeInUp 0.4s ease-out}

/* 天气卡片样式 - 根据天气状态动态背景 */
.weather-card{
  color:white;
  position:relative;
  overflow:hidden;
  transition:background 0.5s ease
}

/* 晴天 - 蓝天太阳 - 增强版 */
.weather-card.sunny{
  background:linear-gradient(180deg,#00c6ff 0%,#0072ff 60%,#4facfe 100%);
  position:relative
}
.weather-card.sunny::before{
  content:'';
  position:absolute;
  top:-30px;
  right:-30px;
  width:150px;
  height:150px;
  background:radial-gradient(circle,#ffd700 0%,#ff8c00 40%,transparent 70%);
  border-radius:50%;
  box-shadow:0 0 60px 20px rgba(255,215,0,0.6),0 0 100px 40px rgba(255,140,0,0.3);
  animation:sunPulse 3s ease-in-out infinite
}
.weather-card.sunny::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 80% 20%,rgba(255,255,255,0.3) 0%,transparent 50%);
  animation:sunShine 4s ease-in-out infinite
}
@keyframes sunPulse{
  0%,100%{transform:scale(1);opacity:0.9}
  50%{transform:scale(1.1);opacity:1}
}
@keyframes sunShine{
  0%,100%{opacity:0.3}
  50%{opacity:0.6}
}

/* 多云 - 真实云朵效果 */
.weather-card.cloudy{
  background:linear-gradient(180deg,#6b8cae 0%,#4a5d75 50%,#3a4a5c 100%);
  position:relative
}

/* 云朵主体 - 使用多个圆形组合 */
/* 默认背景 */
.weather-card{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  position:relative;
  overflow:hidden
}
/* 天气背景动画容器 */
.weather-bg-animation{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  overflow:hidden;
  pointer-events:none
}
/* CSS 天气动画容器 */
.weather-bg-animation > *{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1
}

/* ========== 晴天动画 ========== */
/* 太阳本体 */
.sun-core{
  position:absolute;
  top:20px;
  right:40px;
  width:60px;
  height:60px;
  background:radial-gradient(circle at 30% 30%,#fff9e6 0%,#ffd700 30%,#ffaa00 70%,#ff8800 100%);
  border-radius:50%;
  box-shadow:
    0 0 30px rgba(255,200,50,0.8),
    0 0 60px rgba(255,180,30,0.5),
    0 0 100px rgba(255,150,20,0.3);
  animation:sunPulse 4s ease-in-out infinite
}
@keyframes sunPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(255,200,50,0.8),0 0 60px rgba(255,180,30,0.5),0 0 100px rgba(255,150,20,0.3)}
  50%{transform:scale(1.1);box-shadow:0 0 50px rgba(255,200,50,1),0 0 100px rgba(255,180,30,0.7),0 0 150px rgba(255,150,20,0.5)}
}

/* 太阳光晕 - 多层 */
.sun-glow{
  position:absolute;
  top:-30px;
  right:-10px;
  width:180px;
  height:180px;
  background:radial-gradient(circle,rgba(255,200,50,0.4) 0%,rgba(255,180,30,0.2) 30%,rgba(255,150,20,0.1) 50%,transparent 70%);
  border-radius:50%;
  animation:sunGlow 6s ease-in-out infinite;
  filter:blur(20px)
}
.sun-glow-2{
  position:absolute;
  top:-10px;
  right:10px;
  width:140px;
  height:140px;
  background:radial-gradient(circle,rgba(255,220,100,0.3) 0%,rgba(255,200,80,0.15) 40%,transparent 60%);
  border-radius:50%;
  animation:sunGlow 8s ease-in-out infinite reverse;
  filter:blur(15px)
}
@keyframes sunGlow{
  0%,100%{transform:scale(1);opacity:0.6}
  50%{transform:scale(1.3);opacity:1}
}

/* 太阳光线 - 更细腻 */
.sun-rays{
  position:absolute;
  top:-20px;
  right:-20px;
  width:140px;
  height:140px;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(255,230,150,0.4) 5deg,transparent 10deg,
    transparent 30deg,rgba(255,230,150,0.3) 35deg,transparent 40deg,
    transparent 60deg,rgba(255,230,150,0.4) 65deg,transparent 70deg,
    transparent 90deg,rgba(255,230,150,0.3) 95deg,transparent 100deg,
    transparent 120deg,rgba(255,230,150,0.4) 125deg,transparent 130deg,
    transparent 150deg,rgba(255,230,150,0.3) 155deg,transparent 160deg,
    transparent 180deg,rgba(255,230,150,0.4) 185deg,transparent 190deg,
    transparent 210deg,rgba(255,230,150,0.3) 215deg,transparent 220deg,
    transparent 240deg,rgba(255,230,150,0.4) 245deg,transparent 250deg,
    transparent 270deg,rgba(255,230,150,0.3) 275deg,transparent 280deg,
    transparent 300deg,rgba(255,230,150,0.4) 305deg,transparent 310deg,
    transparent 330deg,rgba(255,230,150,0.3) 335deg,transparent 340deg,
    transparent 360deg);
  border-radius:50%;
  animation:sunRaysRotate 30s linear infinite;
  filter:blur(1px)
}
@keyframes sunRaysRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* 阳光照射效果 */
.sun-light{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,rgba(255,240,200,0.25) 0%,rgba(255,220,150,0.1) 30%,transparent 60%);
  animation:sunLight 8s ease-in-out infinite
}
@keyframes sunLight{
  0%,100%{opacity:0.4}
  50%{opacity:0.7}
}

/* 飘动的白云 */
.sun-cloud{
  position:absolute;
  background:rgba(255,255,255,0.15);
  border-radius:100px;
  filter:blur(15px)
}
.sun-cloud-1{
  width:100px;
  height:35px;
  top:60%;
  left:-100px;
  animation:cloudMove1 40s linear infinite
}
.sun-cloud-2{
  width:80px;
  height:28px;
  top:75%;
  left:-80px;
  animation:cloudMove2 50s linear infinite;
  animation-delay:15s
}

/* ========== 多云/阴天动画 ========== */
.clouds-layer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden
}
/* 立体云朵效果 */
.cloud{
  position:absolute;
  background:linear-gradient(180deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.2) 100%);
  border-radius:100px;
  filter:blur(5px);
  box-shadow:0 5px 15px rgba(0,0,0,0.1)
}
.cloud::before,.cloud::after{
  content:'';
  position:absolute;
  background:linear-gradient(180deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.3) 100%);
  border-radius:100px;
  box-shadow:0 3px 10px rgba(0,0,0,0.08)
}
/* 云朵底部阴影 */
.cloud-shadow{
  position:absolute;
  background:rgba(0,0,0,0.05);
  border-radius:100px;
  filter:blur(10px);
  transform:translateY(10px) scaleY(0.3)
}
.cloud-1{
  width:140px;
  height:45px;
  top:8%;
  left:-140px;
  animation:cloudMove1 35s linear infinite
}
.cloud-1::before{
  width:70px;
  height:70px;
  top:-35px;
  left:25px
}
.cloud-1::after{
  width:55px;
  height:50px;
  top:-20px;
  right:25px
}
.cloud-2{
  width:120px;
  height:40px;
  top:22%;
  left:-120px;
  animation:cloudMove2 42s linear infinite;
  animation-delay:7s
}
.cloud-2::before{
  width:60px;
  height:60px;
  top:-30px;
  left:20px
}
.cloud-2::after{
  width:45px;
  height:40px;
  top:-12px;
  right:18px
}
.cloud-3{
  width:160px;
  height:50px;
  top:3%;
  left:-160px;
  animation:cloudMove3 50s linear infinite;
  animation-delay:14s
}
.cloud-3::before{
  width:80px;
  height:80px;
  top:-40px;
  left:30px
}
.cloud-3::after{
  width:65px;
  height:55px;
  top:-22px;
  right:30px
}
.cloud-4{
  width:100px;
  height:35px;
  top:38%;
  left:-100px;
  animation:cloudMove1 38s linear infinite;
  animation-delay:21s
}
.cloud-4::before{
  width:50px;
  height:50px;
  top:-25px;
  left:15px
}
.cloud-4::after{
  width:40px;
  height:35px;
  top:-10px;
  right:12px
}
.cloud-5{
  width:130px;
  height:42px;
  top:12%;
  left:-130px;
  animation:cloudMove2 45s linear infinite;
  animation-delay:28s
}
.cloud-5::before{
  width:65px;
  height:65px;
  top:-32px;
  left:22px
}
.cloud-5::after{
  width:50px;
  height:42px;
  top:-15px;
  right:22px
}
/* 飘动动画带上下浮动 */
@keyframes cloudMove1{
  0%{transform:translateX(0) translateY(0)}
  25%{transform:translateX(25vw) translateY(-8px)}
  50%{transform:translateX(50vw) translateY(0)}
  75%{transform:translateX(75vw) translateY(8px)}
  100%{transform:translateX(calc(100vw + 180px)) translateY(0)}
}
@keyframes cloudMove2{
  0%{transform:translateX(0) translateY(0)}
  25%{transform:translateX(25vw) translateY(6px)}
  50%{transform:translateX(50vw) translateY(0)}
  75%{transform:translateX(75vw) translateY(-6px)}
  100%{transform:translateX(calc(100vw + 160px)) translateY(0)}
}
@keyframes cloudMove3{
  0%{transform:translateX(0) translateY(0)}
  25%{transform:translateX(25vw) translateY(-10px)}
  50%{transform:translateX(50vw) translateY(0)}
  75%{transform:translateX(75vw) translateY(10px)}
  100%{transform:translateX(calc(100vw + 200px)) translateY(0)}
}

/* ========== 雨天动画 ========== */
.rain-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden
}
/* 乌云层 - 更厚重 */
.rain-clouds{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:70%;
  background:
    radial-gradient(ellipse at 20% 20%,rgba(60,70,90,0.8) 0%,transparent 50%),
    radial-gradient(ellipse at 60% 30%,rgba(50,60,80,0.7) 0%,transparent 40%),
    radial-gradient(ellipse at 80% 25%,rgba(55,65,85,0.6) 0%,transparent 45%),
    linear-gradient(180deg,rgba(40,50,70,0.9) 0%,rgba(60,70,90,0.4) 60%,transparent 100%);
  filter:blur(15px);
  animation:rainClouds 4s ease-in-out infinite
}
@keyframes rainClouds{
  0%,100%{opacity:0.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.02)}
}
/* 雨滴 - 多种大小和速度 */
.rain-drops{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}
.drop{
  position:absolute;
  background:linear-gradient(180deg,rgba(200,210,230,0.9) 0%,rgba(180,190,210,0.4) 50%,transparent 100%);
  border-radius:0 0 50% 50%;
  animation:rainDrop linear infinite;
  opacity:0.7
}
/* 大雨滴 */
.drop-heavy{
  width:3px;
  height:25px;
  filter:blur(0.5px)
}
/* 中雨滴 */
.drop-medium{
  width:2px;
  height:18px;
  filter:blur(0.3px)
}
/* 小雨滴 */
.drop-light{
  width:1px;
  height:12px;
  opacity:0.5
}
@keyframes rainDrop{
  0%{transform:translateY(-30px) translateX(0);opacity:0}
  5%{opacity:0.7}
  95%{opacity:0.7}
  100%{transform:translateY(250px) translateX(5px);opacity:0}
}
/* 雨滴倾斜效果 */
@keyframes rainDropSlant{
  0%{transform:translateY(-30px) translateX(0) rotate(10deg);opacity:0}
  5%{opacity:0.7}
  95%{opacity:0.7}
  100%{transform:translateY(250px) translateX(15px) rotate(10deg);opacity:0}
}
/* 地面水花 */
.rain-splash{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:40px;
  background:
    radial-gradient(ellipse at 20% 100%,rgba(180,190,210,0.3) 0%,transparent 30%),
    radial-gradient(ellipse at 50% 100%,rgba(180,190,210,0.4) 0%,transparent 35%),
    radial-gradient(ellipse at 80% 100%,rgba(180,190,210,0.3) 0%,transparent 30%);
  animation:rainSplash 0.8s ease-in-out infinite
}
@keyframes rainSplash{
  0%,100%{opacity:0.2;transform:scaleY(1)}
  50%{opacity:0.5;transform:scaleY(1.1)}
}
/* 闪电效果 */
.lightning{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0);
  animation:lightningFlash 8s infinite;
  pointer-events:none
}
@keyframes lightningFlash{
  0%,90%,100%{background:rgba(255,255,255,0)}
  91%{background:rgba(255,255,255,0.3)}
  92%{background:rgba(255,255,255,0)}
  93%{background:rgba(255,255,255,0.5)}
  94%{background:rgba(255,255,255,0)}
}

/* ========== 雪天动画 ========== */
.snow-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden
}
/* 雪天背景渐变 */
.snow-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,0.1) 0%,transparent 30%),
    radial-gradient(circle at 20% 80%,rgba(255,255,255,0.08) 0%,transparent 25%);
  animation:snowBgPulse 10s ease-in-out infinite
}
@keyframes snowBgPulse{
  0%,100%{opacity:0.5}
  50%{opacity:0.8}
}
.snowflakes{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}
/* 多种雪花样式 */
.snowflake{
  position:absolute;
  top:-30px;
  color:rgba(255,255,255,0.9);
  text-shadow:0 0 8px rgba(255,255,255,0.8),0 0 15px rgba(255,255,255,0.4);
  animation:snowFall linear infinite;
  opacity:0.9
}
/* 大雪花 - 六角形 */
.snowflake-large::before{
  content:'❄';
  filter:drop-shadow(0 0 3px rgba(255,255,255,0.8))
}
/* 中雪花 */
.snowflake-medium::before{
  content:'❅';
  filter:drop-shadow(0 0 2px rgba(255,255,255,0.6))
}
/* 小雪花 - 点状 */
.snowflake-small{
  width:4px;
  height:4px;
  background:rgba(255,255,255,0.8);
  border-radius:50%;
  box-shadow:0 0 4px rgba(255,255,255,0.6)
}
/* 飘雪动画 - 带左右摇摆 */
@keyframes snowFall{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}
  5%{opacity:0.9}
  25%{transform:translateY(55px) translateX(15px) rotate(90deg)}
  50%{transform:translateY(110px) translateX(-10px) rotate(180deg)}
  75%{transform:translateY(165px) translateX(20px) rotate(270deg)}
  95%{opacity:0.9}
  100%{transform:translateY(220px) translateX(0) rotate(360deg);opacity:0}
}
/* 快速飘落 */
@keyframes snowFallFast{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}
  5%{opacity:0.8}
  100%{transform:translateY(220px) translateX(30px) rotate(720deg);opacity:0}
}
/* 缓慢飘落 */
@keyframes snowFallSlow{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:0.9}
  50%{transform:translateY(110px) translateX(-20px) rotate(-180deg)}
  100%{transform:translateY(220px) translateX(10px) rotate(-360deg);opacity:0}
}

/* ========== 雾天动画 ========== */
.fog-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden
}
/* 多层雾气 */
.fog-layer{
  position:absolute;
  width:250%;
  height:120%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(220,225,230,0.2) 10%,
    rgba(200,210,220,0.4) 25%,
    rgba(180,190,200,0.5) 40%,
    rgba(200,210,220,0.4) 55%,
    rgba(220,225,230,0.3) 70%,
    rgba(200,210,220,0.2) 85%,
    transparent 100%);
  filter:blur(40px)
}
.fog-1{
  top:5%;
  animation:fogMove1 25s linear infinite
}
.fog-2{
  top:35%;
  animation:fogMove2 35s linear infinite;
  animation-delay:-8s
}
.fog-3{
  top:65%;
  animation:fogMove1 45s linear infinite;
  animation-delay:-15s
}
/* 雾气颗粒 */
.fog-particles{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}
.fog-particle{
  position:absolute;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  filter:blur(8px);
  animation:fogParticle 15s ease-in-out infinite
}
@keyframes fogParticle{
  0%,100%{transform:translateX(0) translateY(0);opacity:0.1}
  25%{transform:translateX(20px) translateY(-10px);opacity:0.3}
  50%{transform:translateX(-10px) translateY(15px);opacity:0.2}
  75%{transform:translateX(15px) translateY(5px);opacity:0.25}
}
@keyframes fogMove1{
  0%{transform:translateX(-60%)}
  100%{transform:translateX(0%)}
}
@keyframes fogMove2{
  0%{transform:translateX(0%)}
  100%{transform:translateX(-60%)}
}

/* ========== 沙尘暴动画 ========== */
.sandstorm-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(180,140,80,0.4) 0%,rgba(160,120,60,0.3) 50%,rgba(140,100,40,0.2) 100%),
    radial-gradient(ellipse at 30% 20%,rgba(200,160,80,0.3) 0%,transparent 40%),
    radial-gradient(ellipse at 70% 60%,rgba(180,140,60,0.2) 0%,transparent 35%)
}
/* 多层黄褐色沙尘 */
.sand-layer{
  position:absolute;
  top:0;
  left:0;
  width:300%;
  height:100%;
  filter:blur(25px)
}
.sand-1{
  top:10%;
  background:linear-gradient(90deg,transparent 0%,rgba(194,140,60,0.5) 10%,rgba(180,120,40,0.7) 30%,rgba(194,140,60,0.6) 50%,rgba(160,100,30,0.5) 70%,rgba(180,120,40,0.4) 90%,transparent 100%);
  animation:sandMove1 6s linear infinite
}
.sand-2{
  top:35%;
  background:linear-gradient(90deg,transparent 0%,rgba(200,150,70,0.4) 15%,rgba(170,130,50,0.6) 35%,rgba(190,145,65,0.5) 55%,transparent 100%);
  animation:sandMove2 10s linear infinite;
  animation-delay:-2s
}
.sand-3{
  top:60%;
  background:linear-gradient(90deg,transparent 0%,rgba(180,130,50,0.6) 20%,rgba(160,110,35,0.8) 40%,rgba(175,125,45,0.6) 60%,rgba(150,100,30,0.5) 80%,transparent 100%);
  animation:sandMove1 8s linear infinite;
  animation-delay:-4s
}
@keyframes sandMove1{
  0%{transform:translateX(-66%)}
  100%{transform:translateX(0%)}
}
@keyframes sandMove2{
  0%{transform:translateX(0%)}
  100%{transform:translateX(-66%)}
}
/* 飞沙粒子 - 多种大小 */
.sand-particles{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}
.sand-particle{
  position:absolute;
  border-radius:50%;
  animation:sandFly linear infinite
}
/* 大沙粒 */
.sand-large{
  width:5px;
  height:5px;
  background:rgba(190,145,70,0.9);
  box-shadow:0 0 3px rgba(200,150,80,0.5);
  filter:blur(0.5px)
}
/* 中沙粒 */
.sand-medium{
  width:3px;
  height:3px;
  background:rgba(180,135,65,0.8);
  box-shadow:0 0 2px rgba(190,145,75,0.4)
}
/* 小沙粒 */
.sand-small{
  width:2px;
  height:2px;
  background:rgba(170,125,55,0.7);
  filter:blur(0.3px)
}
@keyframes sandFly{
  0%{transform:translateX(-30px) translateY(0) scale(1);opacity:0}
  5%{opacity:0.9}
  95%{opacity:0.9}
  100%{transform:translateX(calc(100% + 30px)) translateY(30px) scale(0.8);opacity:0}
}
/* 快速飞沙 */
@keyframes sandFlyFast{
  0%{transform:translateX(-30px) translateY(0);opacity:0}
  5%{opacity:1}
  100%{transform:translateX(calc(100% + 30px)) translateY(10px);opacity:0}
}
/* 沙尘暴闪烁效果 */
.sandstorm-flash{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 25% 25%,rgba(255,200,100,0.4) 0%,transparent 40%),
    radial-gradient(circle at 75% 75%,rgba(255,180,80,0.3) 0%,transparent 35%);
  animation:sandFlash 4s ease-in-out infinite
}
@keyframes sandFlash{
  0%,100%{opacity:0.2}
  50%{opacity:0.5}
}
/* 沙尘暴风纹 */
.sand-wind{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:repeating-linear-gradient(90deg,transparent 0px,transparent 50px,rgba(200,160,100,0.05) 50px,rgba(200,160,100,0.05) 100px);
  animation:sandWind 2s linear infinite
}
@keyframes sandWind{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100px)}
}

.weather-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  position:relative;
  z-index:2
}
.weather-location{
  font-size:13px;
  font-weight:500;
  opacity:0.95
}
.weather-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  position:relative;
  z-index:2
}
.weather-left{
  display:flex;
  align-items:center;
  gap:6px
}
.weather-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px
}
.weather-info-row{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.weather-temp{
  font-size:28px;
  font-weight:800;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,0.3)
}
.weather-feels{
  font-size:9px;
  opacity:0.85;
  background:rgba(255,255,255,0.15);
  padding:1px 6px;
  border-radius:6px
}
.weather-icon{
  font-size:48px;
  line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  animation:weatherIconFloat 3s ease-in-out infinite;
  color:#fff;
}
.weather-icon.qi-sunny,.weather-icon.qi-sunny-fill{
  color:#ffd700;
  animation:sunRotate 10s linear infinite,weatherIconFloat 3s ease-in-out infinite
}
.weather-icon.qi-cloudy,.weather-icon.qi-cloudy-fill,.weather-icon.qi-partly-cloudy,.weather-icon.qi-partly-cloudy-fill{
  animation:cloudBob 4s ease-in-out infinite
}
.weather-icon.qi-overcast,.weather-icon.qi-overcast-fill{
  animation:cloudBob 5s ease-in-out infinite
}
.weather-icon[class*="rain"],.weather-icon[class*="shower"],.weather-icon[class*="storm"]{
  animation:rainShake 0.5s ease-in-out infinite
}
.weather-icon[class*="snow"],.weather-icon[class*="sleet"]{
  animation:snowFall 3s ease-in-out infinite
}
.weather-icon[class*="fog"],.weather-icon[class*="haze"],.weather-icon[class*="mist"],.weather-icon[class*="dust"],.weather-icon[class*="sandstorm"]{
  animation:fogPulse 4s ease-in-out infinite
}
@keyframes sunRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes cloudBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes rainShake{
  0%,100%{transform:translateX(0) translateY(0)}
  25%{transform:translateX(-2px) translateY(2px)}
  75%{transform:translateX(2px) translateY(2px)}
}
@keyframes snowFall{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(5px) rotate(10deg)}
}
@keyframes fogPulse{
  0%,100%{opacity:1}
  50%{opacity:0.7}
}
.weather-desc{
  font-size:13px;
  font-weight:600;
  opacity:1;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
  text-align:right
}
.weather-wind{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:rgba(255,255,255,0.2);
  padding:1px 5px;
  border-radius:6px;
  font-size:9px;
  backdrop-filter:blur(10px);
  white-space:nowrap
}
.wind-icon{
  font-size:9px
}
.wind-text{
  font-weight:500
}
.weather-pressure{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:rgba(255,255,255,0.15);
  padding:1px 5px;
  border-radius:6px;
  font-size:9px;
  white-space:nowrap
}
.pressure-icon{
  font-size:9px
}
.pressure-text{
  font-weight:500
}

/* 天气详情网格 - 单行4列紧凑布局 */
.weather-details{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin-bottom:8px;
  position:relative;
  z-index:2
}
.detail-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  padding:4px 2px;
  border-radius:6px;
  font-size:9px
}
.detail-icon{
  font-size:12px
}
.detail-text{
  font-size:8px;
  opacity:0.9;
  white-space:nowrap
}
.weather-wind{
  display:inline-flex;
  align-items:center;
  gap:3px;
  background:rgba(255,255,255,0.2);
  padding:3px 8px;
  border-radius:10px;
  font-size:11px;
  backdrop-filter:blur(10px)
}
.wind-icon{
  font-size:11px
}
.wind-text{
  font-weight:500
}

/* 天气详情网格 - 单行4列紧凑布局 */
.weather-details{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:10px;
  position:relative;
  z-index:2
}
.detail-item{
  background:rgba(255,255,255,0.15);
  border-radius:6px;
  padding:6px 2px;
  text-align:center;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.1);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px
}
.detail-icon{
  font-size:12px
}
.detail-text{
  font-size:10px;
  font-weight:500;
  white-space:nowrap
}
.weather-tips{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  padding:6px 10px;
  border-radius:8px;
  font-size:11px;
  line-height:1.4;
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:6px
}
.tips-icon{
  font-size:18px;
  flex-shrink:0
}
.tips-text{
  font-size:13px;
  line-height:1.5;
  opacity:0.95
}
.weather-loading{
  text-align:center;
  padding:30px;
  font-size:14px;
  opacity:0.8
}

/* 下班倒计时进度条 - 全新设计 */
.countdown-container{
  margin-top:15px;
  padding:15px;
  background:rgba(255,255,255,0.3);
  backdrop-filter:blur(10px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 15px rgba(0,0,0,0.08)
}
.countdown-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px
}
.countdown-label{
  font-size:14px;
  color:#fff;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}
.countdown-label::before{
  content:'⏰';
  font-size:16px
}
.countdown-time{
  font-size:20px;
  color:#fff;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  text-shadow:0 2px 4px rgba(0,0,0,0.5)
}
.countdown-bar-bg{
  height:24px;
  background:rgba(255,255,255,0.5);
  border-radius:12px;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)
}
.countdown-bar-fill{
  height:100%;
  background:linear-gradient(90deg,
    #00c6ff 0%,
    #0072ff 25%,
    #4361ee 50%,
    #7c3aed 75%,
    #a855f7 100%);
  background-size:200% 100%;
  animation:gradient-flow 3s linear infinite, shimmer 2s ease-in-out infinite;
  border-radius:12px;
  transition:width 0.5s ease;
  box-shadow:0 0 20px rgba(67,97,238,0.4),0 0 40px rgba(124,58,237,0.2);
  position:relative;
  overflow:hidden
}
.countdown-bar-fill::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);
  animation:shimmer-slide 2s ease-in-out infinite
}
.countdown-bar-fill::after{
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.4) 100%);
  border-radius:0 12px 12px 0;
  box-shadow:0 0 10px rgba(255,255,255,0.8)
}
@keyframes gradient-flow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes shimmer{
  0%,100%{opacity:1}
  50%{opacity:0.9}
}
@keyframes shimmer-slide{
  0%{left:-100%}
  100%{left:100%}
}
.countdown-bar-text{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:rgb(255, 255, 255);
  font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
  white-space:nowrap;
  z-index:2
}
.countdown-stats{
  display:flex;
  justify-content:space-around;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(67,97,238,0.2)
}
.countdown-stat{
  text-align:center
}
.countdown-stat-value{
  font-size:18px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}
.countdown-stat-label{
  font-size:11px;
  color:#fff;
  margin-top:2px;
  text-shadow:0 1px 2px rgba(0,0,0,0.5)
}

/* ========== 流星雨动画效果 ========== */
.meteor-shower{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  overflow:hidden
}
.meteor{
  position:absolute;
  width:2px;
  height:2px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 4px 1px rgba(255,255,255,1),
             0 0 8px 2px rgba(255,255,255,0.8),
             0 0 15px 3px rgba(255,255,255,0.5);
  opacity:0;
  animation:meteor-fall cubic-bezier(0.25,0.46,0.45,0.94) infinite
}
.meteor::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 20%,rgba(255,255,255,0.2) 60%,rgba(255,255,255,0) 100%);
  transform:translate(-100%,-50%) rotate(-45deg);
  transform-origin:left center;
  filter:blur(0.3px)
}
@keyframes meteor-fall{
  0%{
    opacity:0;
    transform:translateX(0) translateY(0);
    filter:blur(0px)
  }
  5%{
    opacity:1
  }
  15%{
    opacity:1
  }
  85%{
    opacity:0.8
  }
  100%{
    opacity:0;
    transform:translateX(-100vw) translateY(70vh);
    filter:blur(1px)
  }
}

/* ========== 肥皂水泡泡动画效果 ========== */
.bubble-canvas{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0
}

/* ========== 樱花飘落动画效果 ========== */
.sakura-canvas{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0
}

/* ========== 页面容器与底部导航 ========== */
.page{
  width:100%;
  min-height:100vh;
  position:relative
}
.page-feeding .content{
  padding-top:80px;
  padding-bottom:20px
}
.page-weather{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:72px;
  z-index:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
}
.page-about .content-about{
  padding-top:20px;
  padding-bottom:20px
}

/* 底部导航 */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  height:72px;
  background:rgba(26,26,30,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  display:flex;
  justify-content:space-around;
  align-items:center;
  z-index:200;
  box-shadow:0 -1px 0 rgba(255,255,255,0.06),0 -8px 32px rgba(0,0,0,0.35);
  border-top:0.5px solid rgba(255,255,255,0.08);
  padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom);
  border-radius:24px 24px 0 0;
  overflow:visible
}
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.45);
  font-size:10px;
  cursor:pointer;
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  flex:1;
  height:100%;
  position:relative
}
.nav-item.active{
  color:#fff;
  font-weight:600
}
.nav-item.active .nav-label{
  text-shadow:0 0 10px rgba(255,255,255,0.3)
}
.nav-icon-circle{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden;
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%)
}
.nav-item.active .nav-icon-circle{
  bottom:44px;
  background:transparent;
  box-shadow:none;
  width:68px;
  height:68px;
  overflow:visible;
  z-index:10;
  transform:translateX(-50%)
}
.nav-item:active .nav-icon-circle{
  transform:translateX(-50%) scale(0.9)
}
.nav-icon-img{
  width:26px;
  height:26px;
  object-fit:contain;
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  opacity:0.7
}
.nav-item.active .nav-icon-img{
  opacity:1;
  width:70px;
  height:70px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4))
}
.nav-label{
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  letter-spacing:0.5px;
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap
}

/* ========== 天气全屏页面 ========== */
.weather-fullscreen{
  width:100%;
  min-height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0 16px 80px;
  -webkit-overflow-scrolling:touch;
  background-attachment:fixed
}

/* 晴天 - 更真实的天空渐变，上部湛蓝，下部接近地平线渐暖 */
.weather-fullscreen.sunny{
  background:linear-gradient(180deg,#2980b9 0%,#3498db 25%,#5dade2 50%,#85c1e9 75%,#aed6f1 100%)
}
/* 多云 - 天空带云层的层次感 */
.weather-fullscreen.cloudy{
  background:linear-gradient(180deg,#5d7a96 0%,#7a9ab5 30%,#9bb5c8 60%,#b8c9d6 100%)
}
/* 阴天 - 灰蒙但有层次 */
.weather-fullscreen.overcast{
  background:linear-gradient(180deg,#4a5568 0%,#5c6b7f 30%,#7a8a9e 60%,#95a5b8 100%)
}
/* 雨天 - 深沉稳重但不压抑 */
.weather-fullscreen.rainy{
  background:linear-gradient(180deg,#1a2a3a 0%,#2c3e50 30%,#3d566e 60%,#4a6b85 100%)
}
/* 雪天 - 冷色调但明亮 */
.weather-fullscreen.snowy{
  background:linear-gradient(180deg,#5d7ea0 0%,#7a9cc0 30%,#a0b8d8 60%,#c8d8ec 100%)
}
/* 雾天 - 朦胧的灰白色调 */
.weather-fullscreen.foggy{
  background:linear-gradient(180deg,#6b7b8c 0%,#8a9aa8 35%,#a8b8c4 70%,#c4d0d8 100%)
}
/* 沙尘暴 - 黄褐色调 */
.weather-fullscreen.sandstorm{
  background:linear-gradient(180deg,#7a5c3c 0%,#a07c50 30%,#c49c6a 60%,#dcb880 100%)
}

/* 夜间主题背景 - 深邃夜空 */
.weather-fullscreen.night{
  background:linear-gradient(180deg,#070a1a 0%,#0c1028 25%,#11183a 50%,#0d1230 75%,#080c20 100%)
}
.weather-fullscreen.night.sunny{
  background:linear-gradient(180deg,#06091a 0%,#0b0f2a 30%,#10163a 60%,#0c1230 100%)
}
.weather-fullscreen.night.cloudy{
  background:linear-gradient(180deg,#080c22 0%,#0d132e 30%,#121a3a 60%,#0e1530 100%)
}
.weather-fullscreen.night.overcast{
  background:linear-gradient(180deg,#090e24 0%,#0e152e 30%,#131a38 60%,#0f162e 100%)
}
.weather-fullscreen.night.rainy{
  background:linear-gradient(180deg,#050818 0%,#080e24 30%,#0c1430 60%,#081020 100%)
}
.weather-fullscreen.night.snowy{
  background:linear-gradient(180deg,#060a1e 0%,#0b102c 30%,#101638 60%,#0c1228 100%)
}
.weather-fullscreen.night.foggy{
  background:linear-gradient(180deg,#080c22 0%,#0d132e 30%,#121a38 60%,#0e152c 100%)
}
.weather-fullscreen.night.sandstorm{
  background:linear-gradient(180deg,#151008 0%,#221810 30%,#2e2018 60%,#1a140c 100%)
}

/* 星星 */
.star{
  position:absolute;
  width:2px;
  height:2px;
  background:white;
  border-radius:50%;
  opacity:0;
  animation:starTwinkle ease-in-out infinite;
  z-index:1;
  will-change:opacity
}
.star:nth-child(3n){
  width:3px;
  height:3px;
  box-shadow:0 0 4px rgba(255,255,255,0.6)
}
.star:nth-child(5n){
  width:1px;
  height:1px
}
@keyframes starTwinkle{
  0%,100%{opacity:0.15}
  50%{opacity:1}
}

/* 月亮 */
.moon{
  position:absolute;
  top:30px;
  right:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#f5f5f5 0%,#e0e0e0 50%,#c0c0c0 100%);
  box-shadow:0 0 20px rgba(255,255,255,0.15),0 0 40px rgba(255,255,255,0.08),inset -8px -4px 12px rgba(0,0,0,0.15);
  z-index:2;
  will-change:transform
}
.moon::before{
  content:'';
  position:absolute;
  top:14px;
  left:10px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(0,0,0,0.08)
}
.moon::after{
  content:'';
  position:absolute;
  top:28px;
  left:22px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(0,0,0,0.06)
}

/* 天气背景动画层 */
.weather-bg-full{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  contain:layout style paint
}

/* 晴天 - 太阳 */
.sun-full{
  position:absolute;
  top:50px;
  right:40px;
  width:72px;
  height:72px;
  background:radial-gradient(circle at 35% 35%,#fff9e6 0%,#ffd700 30%,#ffaa00 70%,#ff8800 100%);
  border-radius:50%;
  box-shadow:0 0 30px rgba(255,200,50,0.6),0 0 60px rgba(255,180,30,0.3);
  animation:sunPulseFull 5s ease-in-out infinite;
  z-index:1;
  will-change:transform,box-shadow
}
.night .sun-full,.night .sun-rays-full{
  display:none
}
@keyframes sunPulseFull{
  0%,100%{transform:scale(1) translate3d(0,0,0);box-shadow:0 0 30px rgba(255,200,50,0.6),0 0 60px rgba(255,180,30,0.3)}
  50%{transform:scale(1.12) translate3d(0,0,0);box-shadow:0 0 50px rgba(255,200,50,0.9),0 0 90px rgba(255,180,30,0.5)}
}
.sun-rays-full{
  position:absolute;
  top:15px;
  right:5px;
  width:150px;
  height:150px;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,230,150,0.25) 12deg,transparent 24deg,transparent 48deg,rgba(255,230,150,0.18) 60deg,transparent 72deg,transparent 96deg,rgba(255,230,150,0.25) 108deg,transparent 120deg,transparent 144deg,rgba(255,230,150,0.18) 156deg,transparent 168deg,transparent 192deg,rgba(255,230,150,0.25) 204deg,transparent 216deg,transparent 240deg,rgba(255,230,150,0.18) 252deg,transparent 264deg,transparent 288deg,rgba(255,230,150,0.25) 300deg,transparent 312deg,transparent 336deg,rgba(255,230,150,0.18) 348deg,transparent 360deg);
  border-radius:50%;
  animation:sunRaysRotate 24s linear infinite;
  z-index:0;
  will-change:transform
}
@keyframes sunRaysRotate{
  from{transform:rotate(0deg) translate3d(0,0,0)}
  to{transform:rotate(360deg) translate3d(0,0,0)}
}

/* 飘动的云 - 晴天小白云 */
.cloud-float{
  position:absolute;
  left:-200px;
  background:rgba(255,255,255,0.75);
  border-radius:50px;
  opacity:0.8;
  z-index:2;
  animation:cloudFloat linear infinite;
  will-change:transform;
  box-shadow:0 4px 15px rgba(0,0,0,0.05), inset 0 -2px 6px rgba(0,0,0,0.03)
}
.cloud-float::before,.cloud-float::after{
  content:'';
  position:absolute;
  background:rgba(255,255,255,0.75);
  border-radius:50%
}
.cloud-float:nth-child(2){width:70px;height:26px;top:12%;animation-duration:26s}
.cloud-float:nth-child(2)::before{width:35px;height:35px;top:-18px;left:8px}
.cloud-float:nth-child(2)::after{width:45px;height:30px;top:-12px;right:4px}
.cloud-float:nth-child(3){width:90px;height:32px;top:22%;animation-duration:32s;animation-delay:-6s}
.cloud-float:nth-child(3)::before{width:45px;height:45px;top:-20px;left:12px}
.cloud-float:nth-child(3)::after{width:50px;height:38px;top:-16px;right:8px}
.cloud-float:nth-child(4){width:55px;height:22px;top:8%;animation-duration:22s;animation-delay:-12s}
.cloud-float:nth-child(4)::before{width:32px;height:32px;top:-16px;left:6px}
.cloud-float:nth-child(4)::after{width:38px;height:28px;top:-10px;right:4px}
.cloud-float:nth-child(5){width:80px;height:30px;top:32%;animation-duration:28s;animation-delay:-18s}
.cloud-float:nth-child(5)::before{width:42px;height:40px;top:-18px;left:10px}
.cloud-float:nth-child(5)::after{width:48px;height:36px;top:-14px;right:6px}
.cloud-float:nth-child(6){width:65px;height:26px;top:18%;animation-duration:24s;animation-delay:-9s}
.cloud-float:nth-child(6)::before{width:35px;height:35px;top:-16px;left:8px}
.cloud-float:nth-child(6)::after{width:40px;height:32px;top:-12px;right:5px}
.cloud-float:nth-child(7){width:75px;height:28px;top:28%;animation-duration:30s;animation-delay:-4s}
.cloud-float:nth-child(7)::before{width:40px;height:40px;top:-18px;left:10px}
.cloud-float:nth-child(7)::after{width:45px;height:34px;top:-14px;right:6px}
.cloud-float:nth-child(8){width:60px;height:24px;top:15%;animation-duration:27s;animation-delay:-14s}
.cloud-float:nth-child(8)::before{width:32px;height:32px;top:-15px;left:7px}
.cloud-float:nth-child(8)::after{width:38px;height:30px;top:-11px;right:5px}
.cloud-float:nth-child(9){width:85px;height:30px;top:25%;animation-duration:34s;animation-delay:-8s}
.cloud-float:nth-child(9)::before{width:42px;height:42px;top:-19px;left:11px}
.cloud-float:nth-child(9)::after{width:48px;height:36px;top:-15px;right:7px}

/* 多云/阴天 - 大云朵 */
.cloud-full{
  position:absolute;
  left:-250px;
  background:linear-gradient(180deg,#e2e8f0 0%,#cbd5e0 100%);
  border-radius:80px;
  opacity:0.55;
  z-index:1;
  animation:cloudFloat linear infinite;
  will-change:transform
}
.cloud-full::before,.cloud-full::after{
  content:'';
  position:absolute;
  background:linear-gradient(180deg,#e2e8f0 0%,#cbd5e0 100%);
  border-radius:50%
}
.cloud-full:nth-child(1){width:140px;height:48px;top:8%;animation-duration:36s}
.cloud-full:nth-child(1)::before{width:65px;height:65px;top:-32px;left:18px}
.cloud-full:nth-child(1)::after{width:75px;height:58px;top:-22px;right:12px}
.cloud-full:nth-child(2){width:170px;height:58px;top:18%;animation-duration:42s;animation-delay:-8s}
.cloud-full:nth-child(2)::before{width:80px;height:80px;top:-40px;left:22px}
.cloud-full:nth-child(2)::after{width:85px;height:68px;top:-28px;right:18px}
.cloud-full:nth-child(3){width:110px;height:38px;top:5%;animation-duration:32s;animation-delay:-16s}
.cloud-full:nth-child(3)::before{width:50px;height:52px;top:-25px;left:12px}
.cloud-full:nth-child(3)::after{width:60px;height:48px;top:-20px;right:8px}
.cloud-full:nth-child(4){width:150px;height:52px;top:28%;animation-duration:40s;animation-delay:-5s}
.cloud-full:nth-child(4)::before{width:70px;height:72px;top:-36px;left:20px}
.cloud-full:nth-child(4)::after{width:80px;height:62px;top:-26px;right:16px}
.cloud-full:nth-child(5){width:130px;height:46px;top:14%;animation-duration:34s;animation-delay:-22s}
.cloud-full:nth-child(5)::before{width:60px;height:62px;top:-30px;left:16px}
.cloud-full:nth-child(5)::after{width:70px;height:56px;top:-24px;right:10px}
.cloud-full:nth-child(6){width:95px;height:34px;top:24%;animation-duration:30s;animation-delay:-13s}
.cloud-full:nth-child(6)::before{width:48px;height:48px;top:-22px;left:10px}
.cloud-full:nth-child(6)::after{width:52px;height:40px;top:-16px;right:6px}

@keyframes cloudFloat{
  0%{transform:translate3d(-200px,0,0)}
  100%{transform:translate3d(calc(100vw + 200px),0,0)}
}

/* 雨天 */
.rain-cloud-full{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:180px;
  background:linear-gradient(180deg,#1a252f 0%,rgba(26,37,47,0.8) 50%,rgba(30,45,60,0.3) 80%,transparent 100%);
  z-index:1
}
.rain-cloud-full-2{
  position:absolute;
  top:20px;
  left:0;
  width:100%;
  height:140px;
  background:radial-gradient(ellipse at 30% 30%,rgba(40,55,70,0.6) 0%,transparent 60%),
              radial-gradient(ellipse at 70% 40%,rgba(35,50,65,0.5) 0%,transparent 50%);
  z-index:1;
  filter:blur(20px);
  animation:rainCloudDrift 8s ease-in-out infinite
}
@keyframes rainCloudDrift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(20px)}
}
.rain-drop-full{
  position:absolute;
  top:-20px;
  width:2px;
  height:14px;
  background:linear-gradient(180deg,transparent 0%,rgba(174,194,224,0.8) 40%,rgba(174,194,224,0.4) 100%);
  border-radius:0 0 2px 2px;
  animation:rainFall linear infinite;
  z-index:2;
  will-change:transform,opacity;
  contain:layout style
}
.rain-drop-full.heavy{
  width:3px;
  height:20px;
  background:linear-gradient(180deg,transparent 0%,rgba(160,180,210,0.9) 40%,rgba(160,180,210,0.5) 100%);
  filter:blur(0.5px)
}
.rain-drop-full.light{
  width:1px;
  height:10px;
  opacity:0.5
}
@keyframes rainFall{
  0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}
  10%{opacity:0.8}
  90%{opacity:0.6}
  100%{transform:translate3d(5px,100vh,0) rotate(2deg);opacity:0}
}
.lightning-full{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.08);
  opacity:0;
  z-index:3;
  animation:lightningFlash 10s infinite;
  pointer-events:none
}
@keyframes lightningFlash{
  0%,88%,100%{opacity:0}
  89%{opacity:0.5}
  90%{opacity:0}
  91%{opacity:0.7}
  92%{opacity:0}
}

/* 雪天 */
.snowflake-full{
  position:absolute;
  top:-30px;
  color:white;
  opacity:0.8;
  animation:snowFall linear infinite;
  z-index:2;
  text-shadow:0 0 6px rgba(255,255,255,0.6), 0 0 12px rgba(255,255,255,0.3);
  will-change:transform,opacity;
  contain:layout style
}
.snowflake-full.large{
  font-size:20px;
  animation-duration:5s;
  filter:drop-shadow(0 0 4px rgba(255,255,255,0.5))
}
.snowflake-full.medium{
  font-size:14px;
  animation-duration:4s;
  opacity:0.6
}
.snowflake-full.small{
  font-size:8px;
  animation-duration:3s;
  opacity:0.4
}
@keyframes snowFall{
  0%{transform:translate3d(0,-30px,0) rotate(0deg);opacity:0}
  10%{opacity:0.9}
  25%{transform:translate3d(15px,25vh,0) rotate(90deg)}
  50%{transform:translate3d(-10px,50vh,0) rotate(180deg);opacity:0.8}
  75%{transform:translate3d(20px,75vh,0) rotate(270deg)}
  90%{opacity:0.7}
  100%{transform:translate3d(0,100vh,0) rotate(360deg);opacity:0}
}

/* 雾天 */
.fog-full{
  position:absolute;
  width:200%;
  height:180px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.14) 30%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.14) 70%,transparent 100%);
  animation:fogMove linear infinite;
  z-index:1;
  will-change:transform;
  filter:blur(8px)
}
.fog-full:nth-child(1){top:20%;animation-duration:22s}
.fog-full:nth-child(2){top:50%;animation-duration:28s;animation-delay:-10s}
.fog-full:nth-child(3){top:80%;animation-duration:20s;animation-delay:-18s}
.fog-full:nth-child(4){top:35%;animation-duration:26s;animation-delay:-6s}
.fog-full:nth-child(5){top:65%;animation-duration:32s;animation-delay:-16s}
@keyframes fogMove{
  0%{transform:translate3d(-50%,0,0)}
  100%{transform:translate3d(0,0,0)}
}

/* 沙尘暴 */
.sand-particle-full{
  position:absolute;
  left:-10px;
  width:3px;
  height:3px;
  background:#D2691E;
  border-radius:50%;
  opacity:0.5;
  animation:sandMove linear infinite;
  z-index:2;
  will-change:transform,opacity;
  contain:layout style
}
.sand-particle-full.large{
  width:5px;
  height:5px;
  background:#c48a3c;
  opacity:0.6;
  filter:blur(0.5px)
}
.sand-particle-full.small{
  width:2px;
  height:2px;
  background:#b87830;
  opacity:0.4
}
@keyframes sandMove{
  0%{transform:translate3d(-10px,0,0) scale(1);opacity:0}
  10%{opacity:0.6}
  50%{transform:translate3d(50vw,5px,0) scale(0.9)}
  90%{opacity:0.5}
  100%{transform:translate3d(100vw,0,0) scale(0.8);opacity:0}
}

/* ========== 天气内容层（Apple/小米风格）========== */
.weather-content-full{
  position:relative;
  z-index:10;
  color:white;
  width:100%;
  max-width:420px;
  margin:0 auto;
  padding-top:85px;
  padding-bottom:20px;
  display:flex;
  flex-direction:column;
  align-items:center
}

.weather-main{
  text-align:center;
  margin-bottom:40px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px
}

.weather-location-label{
  font-size:13px;
  font-weight:500;
  opacity:0.7;
  letter-spacing:1px;
  margin-bottom:2px
}
.weather-city-full{
  font-size:28px;
  font-weight:500;
  opacity:0.95;
  margin-bottom:6px;
  letter-spacing:0.5px
}

.weather-temp-full{
  font-size:96px;
  font-weight:200;
  line-height:1;
  margin-bottom:4px;
  letter-spacing:-4px;
  font-variant-numeric:tabular-nums
}
.temp-unit-full{
  font-size:36px;
  font-weight:200;
  vertical-align:super;
  margin-left:2px;
  opacity:0.9
}

.weather-temp-highlow{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:4px;
  font-size:17px;
  font-weight:400;
  opacity:0.9;
  letter-spacing:0.3px
}
.weather-desc-full{
  font-size:20px;
  font-weight:500;
  opacity:0.9;
  margin-bottom:4px
}

/* ========== 苹果风格大卡片 ========== */
.weather-section{
  width:100%;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-radius:22px;
  padding:14px 0;
  border:1px solid rgba(255,255,255,0.18);
  margin-bottom:12px;
  overflow:hidden;
  transition:transform 0.2s,background 0.2s;
  box-shadow:0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2)
}
.weather-section:active{
  transform:scale(0.98);
  background:rgba(255,255,255,0.26)
}
.night .weather-section{
  background:rgba(20,25,48,0.5);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06)
}
.night .weather-section:active{
  background:rgba(30,35,60,0.6)
}
.section-header{
  font-size:12px;
  font-weight:500;
  opacity:0.65;
  letter-spacing:0.5px;
  padding:0 16px 10px;
  display:flex;
  align-items:center;
  gap:6px;
  border-bottom:0.5px solid rgba(255,255,255,0.1);
  margin-bottom:10px;
  text-transform:uppercase
}

/* 小时预报横向滚动 */
.hourly-scroll{
  display:flex;
  overflow-x:auto;
  gap:0;
  padding:0 12px;
  scrollbar-width:none;
  -ms-overflow-style:none
}
.hourly-scroll::-webkit-scrollbar{
  display:none
}
.hourly-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:56px;
  padding:8px 6px;
  border-radius:14px;
  transition:background 0.2s, transform 0.2s;
  cursor:pointer
}
.hourly-item:hover{
  background:rgba(255,255,255,0.15);
  transform:translateY(-2px)
}
.hourly-item:first-child{
  font-weight:700;
  background:rgba(255,255,255,0.12);
  border-radius:14px
}
.hourly-time{
  font-size:12px;
  opacity:0.85;
  white-space:nowrap
}
.hourly-icon{
  font-size:22px;
  line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.15))
}
.hourly-temp{
  font-size:15px;
  font-weight:600;
  opacity:0.95
}

/* 10日预报 */
.daily-list{
  padding:0 16px
}
.daily-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:0.5px solid rgba(255,255,255,0.08);
  font-size:15px;
  transition:background 0.2s;
  margin:0 16px;
  border-radius:8px;
  padding-left:8px;
  padding-right:8px
}
.daily-row:hover{
  background:rgba(255,255,255,0.08)
}
.daily-row:last-child{
  border-bottom:none
}
.daily-day{
  width:44px;
  font-weight:600
}
.daily-date{
  width:42px;
  font-size:12px;
  opacity:0.7
}
.daily-icon{
  font-size:20px;
  width:32px;
  text-align:center;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.12))
}
.daily-bar-wrap{
  flex:1;
  height:5px;
  position:relative;
  margin:0 10px;
  border-radius:3px;
  background:rgba(0,0,0,0.08)
}
.daily-bar{
  position:absolute;
  top:0;
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg,#4dabf7 0%,#74c0fc 40%,#ffd43b 70%,#ff6b6b 100%);
  box-shadow:0 1px 3px rgba(0,0,0,0.1)
}
.daily-low{
  width:36px;
  text-align:right;
  opacity:0.75;
  font-size:14px;
  font-weight:500
}
.daily-high{
  width:36px;
  text-align:right;
  font-weight:700;
  font-size:14px
}

/* 详情网格 */
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 8px;
  padding:4px 16px 12px
}
.detail-item{
  padding:10px 0;
  display:flex;
  flex-direction:column;
  gap:6px
}
.detail-label{
  font-size:12px;
  opacity:0.7;
  font-weight:500;
  letter-spacing:0.3px
}
.detail-value{
  font-size:22px;
  font-weight:600;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,0.15)
}
.detail-value span{
  font-size:15px;
  opacity:0.75;
  font-weight:400;
  margin-left:1px
}

/* 温馨提示 */
.tips-text{
  padding:0 16px;
  font-size:15px;
  line-height:1.6;
  opacity:0.95;
  font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,0.08)
}

.weather-update-full{
  font-size:11px;
  opacity:0.55;
  text-align:center;
  margin-top:8px;
  font-weight:500;
  letter-spacing:0.5px
}

/* ========== 天气预警 ========== */
.warning-section{
  background:rgba(255,59,48,0.2) !important;
  border:1px solid rgba(255,59,48,0.35) !important;
  box-shadow:0 8px 32px rgba(255,59,48,0.1), inset 0 1px 0 rgba(255,255,255,0.15) !important
}
.warning-list{
  padding:0 14px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.warning-item{
  background:rgba(0,0,0,0.2);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid rgba(255,59,48,0.15)
}
.warning-badge{
  display:inline-flex;
  align-self:flex-start;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:8px;
  background:rgba(255,59,48,0.9);
  color:white;
  letter-spacing:0.5px;
  box-shadow:0 2px 8px rgba(255,59,48,0.3)
}
.warning-title{
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,0.15)
}
.warning-text{
  font-size:13px;
  opacity:0.9;
  line-height:1.5
}

/* ========== 逐日预报增强 ========== */
.daily-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  width:44px
}
.daily-mid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:48px
}
.daily-weather-text{
  font-size:11px;
  opacity:0.7;
  text-align:center;
  white-space:nowrap
}
.daily-right{
  display:flex;
  align-items:center;
  gap:10px
}
.daily-extra{
  display:flex;
  justify-content:space-around;
  padding:12px 16px 4px;
  border-top:0.5px solid rgba(255,255,255,0.06);
  margin-top:6px
}
.daily-extra-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px
}
.daily-extra-label{
  font-size:11px;
  opacity:0.5
}
.daily-extra-value{
  font-size:14px;
  font-weight:500
}

/* ========== 分钟降水 ========== */
.minutely-summary{
  padding:0 16px 10px;
  font-size:14px;
  opacity:0.9;
  line-height:1.4;
  font-weight:500
}
.minutely-chart{
  display:flex;
  align-items:flex-end;
  height:80px;
  padding:0 12px;
  gap:2px
}
.minutely-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  height:100%
}
.minutely-bar{
  width:100%;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#74c0fc,#4dabf7,#2b6cb0);
  transition:height 0.3s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.1)
}
.minutely-time{
  font-size:9px;
  opacity:0.6;
  white-space:nowrap;
  font-weight:500
}

/* ========== 空气质量 ========== */
.air-main{
  display:flex;
  align-items:center;
  gap:16px;
  padding:4px 16px 12px
}
.air-aqi-ring{
  width:72px;
  height:72px;
  border-radius:50%;
  border:4px solid rgba(76,175,80,0.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  flex-shrink:0
}
.air-aqi-value{
  font-size:26px;
  font-weight:600;
  line-height:1
}
.air-aqi-label{
  font-size:10px;
  opacity:0.6;
  letter-spacing:1px
}
.air-info{
  display:flex;
  flex-direction:column;
  gap:4px
}
.air-category{
  font-size:20px;
  font-weight:600
}
.air-primary{
  font-size:13px;
  opacity:0.7
}
.air-pollutant-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,0.12);
  border-radius:0 0 22px 22px;
  overflow:hidden
}
.air-pollutant-item{
  background:rgba(255,255,255,0.1);
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  transition:background 0.2s
}
.air-pollutant-item:hover{
  background:rgba(255,255,255,0.18)
}
.air-pollutant-name{
  font-size:11px;
  opacity:0.65
}
.air-pollutant-value{
  font-size:16px;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,0.1)
}

/* ========== 生活指数 ========== */
.indices-list{
  padding:0 16px;
  display:flex;
  flex-direction:column;
  gap:0
}
.indices-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:0.5px solid rgba(255,255,255,0.1);
  transition:background 0.2s;
  margin:0 16px;
  padding:10px 8px
}
.indices-item:last-child{
  border-bottom:none
}
.indices-item:hover{
  background:rgba(255,255,255,0.08);
  border-radius:8px
}
.indices-left{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
  padding-right:12px
}
.indices-name{
  font-size:14px;
  font-weight:600
}
.indices-text{
  font-size:12px;
  opacity:0.75;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.indices-badge{
  font-size:13px;
  font-weight:600;
  padding:4px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.18);
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,0.08)
}

/* ============================================================
   打料页面 —— 马卡其（Macaron）暖色调设计
   ============================================================ */

/* 内容区域 */
.content-processing{
  padding-top:24px;
  padding-bottom:20px
}

/* 打料卡片 */
.processing-card{
  background:rgba(255,248,240,0.5) !important;
  border:1px solid rgba(255,255,255,0.65) !important;
  box-shadow:0 4px 20px rgba(139,115,85,0.08) !important;
  border-radius:18px !important;
  margin-bottom:16px
}
.processing-card .card-title{
  color:#6B5344;
  text-shadow:none;
  font-weight:700
}
.processing-card .card-title::before{
  background:linear-gradient(180deg,#D4A574 0%,#E8B4B8 100%);
  width:4px;
  height:18px;
  border-radius:3px
}

/* 输入行 */
.processing-input-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:4px
}
.processing-input{
  flex:1;
  border:2px solid rgba(212,165,116,0.4) !important;
  background:rgba(255,255,255,0.5);
  color:#5C4A3D;
  font-size:20px;
  font-weight:600;
  padding:12px 16px;
  border-radius:12px;
  height:auto;
  transition:all 0.3s
}
.processing-input:focus{
  border-color:#D4A574;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 4px rgba(212,165,116,0.15)
}
.processing-input::placeholder{
  color:#B8A090;
  font-weight:400;
  font-size:15px
}
.processing-unit{
  font-size:18px;
  font-weight:600;
  color:#8B7355;
  min-width:36px;
  text-align:center;
  padding:6px 12px;
  background:rgba(212,165,116,0.12);
  border-radius:10px
}

/* 结果列表 */
.processing-result-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
  background:rgba(255,248,240,0.4);
  border-radius:16px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.5)
}
.processing-result-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 8px
}
.processing-result-label{
  flex:1;
  font-size:14px;
  color:#8B7355;
  font-weight:500
}
.processing-result-value{
  font-size:28px;
  font-weight:700;
  color:#D4A574;
  text-shadow:0 2px 8px rgba(212,165,116,0.2);
  min-width:60px;
  text-align:right
}
.processing-result-unit{
  font-size:14px;
  color:#8B7355;
  font-weight:500;
  min-width:20px
}
.processing-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,0.2),transparent);
  margin:4px 0
}

/* 计算公式提示 */
.processing-formula-hint{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(139,115,85,0.1);
  font-size:11px;
  color:#B8A090;
  text-align:center
}

/* 竖排计算结果 */
.processing-result-vertical{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
  background:rgba(255,248,240,0.4);
  border-radius:16px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.5)
}
.processing-result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 8px
}
.processing-result-num{
  display:flex;
  align-items:baseline;
  gap:6px
}

/* 按钮区域 */
.processing-actions{
  display:flex;
  gap:12px;
  margin-top:8px;
  margin-bottom:16px
}
.processing-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 20px;
  border-radius:14px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1)
}
.processing-btn-history{
  background:rgba(255,248,240,0.5);
  color:#6B5344;
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 2px 8px rgba(139,115,85,0.06)
}
.processing-btn-history:hover{
  background:rgba(255,248,240,0.7);
  transform:translateY(-2px)
}
.processing-btn-history:active{
  transform:translateY(0)
}
.processing-btn-next{
  background:linear-gradient(135deg,#D4A574 0%,#C9A87C 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(212,165,116,0.3)
}
.processing-btn-next:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(212,165,116,0.4)
}
.processing-btn-next:active{
  transform:translateY(0)
}

/* ========== 树洞页 Footer ========== */
.footer-about{
  text-align:center;
  padding:20px;
  font-size:12px;
  color:rgba(255,255,255,0.6);
  margin-top:10px
}

/* ICP备案号 */
.icp-footer{
  text-align:center;
  padding:8px 0 16px;
}
.icp-link{
  display:inline-block;
  font-size:11px;
  color:rgba(255,255,255,0.45) !important;
  text-decoration:none !important;
  transition:color 0.2s
}
.icp-link:hover,.icp-link:active{
  color:rgba(255,255,255,0.75) !important
}

/* ============================================================
   加料页面 —— 马卡其（Macaron）暖色调重设计
   ============================================================ */

/* 浮动历史记录按钮 */
.page-feeding .history-btn{
  position:fixed;
  top:16px;
  right:16px;
  z-index:101;
  background:rgba(255,255,255,0.45);
  border:1px solid rgba(255,255,255,0.6);
  color:#5C4A3D;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(92,74,61,0.1)
}
.page-feeding .history-btn:hover{
  background:rgba(255,255,255,0.6);
  transform:translateY(-1px)
}

/* 内容区域 —— 去掉固定头部后顶部留白减少 */
.page-feeding .content{
  padding-top:24px
}

/* 卡片 —— 暖奶油色毛玻璃 */
.page-feeding .card:not(.weather-card){
  background:rgba(255,248,240,0.5);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:0 4px 20px rgba(139,115,85,0.08);
  border-radius:18px
}
.page-feeding .card:not(.weather-card):hover{
  background:rgba(255,248,240,0.65);
  box-shadow:0 8px 30px rgba(139,115,85,0.12)
}

/* 卡片标题 —— 暖棕色文字 + 马卡其色装饰条 */
.page-feeding .card-title{
  color:#6B5344;
  text-shadow:none;
  font-weight:700
}
.page-feeding .card-title::before{
  background:linear-gradient(180deg,#D4A574 0%,#E8B4B8 100%);
  width:4px;
  height:18px;
  border-radius:3px
}

/* 时间显示 —— 暖色渐变文字 */
.page-feeding .time-value{
  background:linear-gradient(135deg,#8B7355 0%,#D4A574 50%,#E8B4B8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none
}

/* 刷新按钮 —— 焦糖色 */
.page-feeding .refresh-btn{
  background:linear-gradient(135deg,#D4A574 0%,#C9A87C 100%);
  box-shadow:0 4px 15px rgba(212,165,116,0.3);
  border-radius:14px
}
.page-feeding .refresh-btn:hover{
  box-shadow:0 6px 20px rgba(212,165,116,0.4)
}

/* 班次标签 —— 马卡其粉 / 薄荷绿 */
.page-feeding .shift-badge{
  background:linear-gradient(135deg,#E8B4B8 0%,#D4A0A4 100%);
  box-shadow:0 4px 15px rgba(232,180,184,0.3)
}
.page-feeding .shift-badge.night{
  background:linear-gradient(135deg,#B5D8C7 0%,#9CC9B3 100%);
  box-shadow:0 4px 15px rgba(181,216,199,0.3)
}
.page-feeding .shift-hint{
  color:#6B5344;
  text-shadow:none
}
.page-feeding .shift-class-text{
  background:linear-gradient(135deg,#D4A574 0%,#C9A87C 100%);
  box-shadow:0 2px 8px rgba(212,165,116,0.3)
}

/* 下班倒计时区域 —— 暖色 */
.page-feeding .countdown-container{
  background:rgba(255,248,240,0.4);
  border:1px solid rgba(255,255,255,0.5)
}
.page-feeding .countdown-label{
  color:#6B5344;
  text-shadow:none
}
.page-feeding .countdown-time{
  color:#D4A574;
  text-shadow:none
}
.page-feeding .countdown-bar-bg{
  background:rgba(255,255,255,0.6);
  box-shadow:inset 0 2px 4px rgba(139,115,85,0.1)
}
.page-feeding .countdown-bar-fill{
  background:linear-gradient(90deg,#F0D9B5 0%,#E8B4B8 30%,#D4A574 60%,#C9A87C 100%);
  box-shadow:0 0 15px rgba(212,165,116,0.3)
}
.page-feeding .countdown-bar-text{
  color:#fff;
  text-shadow:0 1px 2px rgba(92,74,61,0.3)
}

/* 输入框 —— 暖色边框 */
.page-feeding .number-input{
  border:2px solid rgba(212,165,116,0.4);
  background:rgba(255,255,255,0.5);
  color:#5C4A3D
}
.page-feeding .number-input:focus{
  border-color:#D4A574;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 4px rgba(212,165,116,0.15)
}
.page-feeding .number-input::placeholder{
  color:#B8A090
}
.page-feeding .number-input:focus::placeholder{
  color:#8B7355
}
.page-feeding .input-hint{
  color:#8B7355;
  text-shadow:none
}

/* 结果卡片 —— 暖色液态效果 */
.page-feeding .result-card{
  background:linear-gradient(135deg,rgba(255,248,240,0.5) 0%,rgba(255,240,230,0.3) 100%);
  box-shadow:0 10px 40px rgba(139,115,85,0.1),inset 0 0 0 2px rgba(255,255,255,0.5);
  border-radius:22px
}
.page-feeding .liquid-container{
  background:linear-gradient(180deg,#F0D9B5 0%,#E8B4B8 50%,#D4A574 100%)
}
.page-feeding .liquid-container::before{
  background:linear-gradient(180deg,rgba(240,217,181,0.8) 0%,rgba(232,180,184,0.4) 100%)
}
.page-feeding .percentage-badge{
  background:rgba(212,165,116,0.9);
  box-shadow:0 2px 10px rgba(212,165,116,0.3)
}
.page-feeding .result-label{
  color:#6B5344;
  text-shadow:none
}
.page-feeding .result-value{
  color:#6B5344;
  text-shadow:
    2px 2px 0 rgba(212,165,116,0.4),
    4px 4px 0 rgba(201,168,124,0.25),
    6px 6px 12px rgba(139,115,85,0.15)
}
.page-feeding .result-unit{
  color:#8B7355;
  text-shadow:none
}
.page-feeding .result-formula{
  color:#6B5344;
  border-top:1px solid rgba(139,115,85,0.15)
}

/* 进度条 —— 马卡其暖色渐变 */
.page-feeding .progress-bar-bg{
  background:rgba(255,248,240,0.7);
  border:2px solid rgba(212,165,116,0.2);
  box-shadow:inset 0 2px 8px rgba(139,115,85,0.08),0 2px 4px rgba(255,255,255,0.3)
}
.page-feeding .progress-bar-fill{
  background:linear-gradient(90deg,#F0D9B5 0%,#E8B4B8 25%,#D4A574 50%,#C9A87C 75%,#B5D8C7 100%);
  box-shadow:0 0 20px rgba(212,165,116,0.3),inset 0 2px 4px rgba(255,255,255,0.4)
}
.page-feeding .progress-bar-fill::after{
  background:radial-gradient(circle,#fff 0%,#D4A574 50%,transparent 70%);
  box-shadow:0 0 15px rgba(212,165,116,0.5)
}
.page-feeding .progress-label{
  color:#6B5344
}
.page-feeding .progress-label span:first-child{
  text-shadow:none
}
.page-feeding .progress-percent{
  color:#D4A574
}
.page-feeding .progress-range{
  color:#8B7355
}

/* 排料卡片 —— 暖色毛玻璃 */
.page-feeding .discharge-card{
  background:rgba(255,248,240,0.65);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 20px rgba(139,115,85,0.06),0 1px 3px rgba(139,115,85,0.04)
}
.page-feeding .discharge-card.glass-card:hover{
  background:rgba(255,248,240,0.85);
  box-shadow:0 8px 30px rgba(139,115,85,0.1)
}
.page-feeding .discharge-card.speed-up::before{
  background:linear-gradient(180deg,#B5D8C7 0%,#9CC9B3 100%)
}
.page-feeding .discharge-card.speed-down::before{
  background:linear-gradient(180deg,#F0D9B5 0%,#E8C9A0 100%)
}
.page-feeding .discharge-card.final::before{
  background:linear-gradient(180deg,#E8B4B8 0%,#D4A0A4 100%)
}
.page-feeding .discharge-card.current::before{
  background:linear-gradient(180deg,#D4A574 0%,#C9A87C 100%)
}
.page-feeding .discharge-card.speed-change-only{
  background:linear-gradient(135deg,#FFF8F5 0%,#FFF0F0 100%);
  border:1px dashed rgba(212,165,116,0.3)
}
.page-feeding .discharge-card.current{
  background:linear-gradient(135deg,#FFF8F0 0%,#FFF5E8 100%);
  box-shadow:0 4px 20px rgba(212,165,116,0.12)
}
.page-feeding .discharge-title{
  color:#6B5344;
  text-shadow:none
}
.page-feeding .discharge-count{
  background:rgba(212,165,116,0.2);
  color:#6B5344
}
.page-feeding .discharge-time{
  color:#5C4A3D
}
.page-feeding .shift-class-badge{
  background:linear-gradient(135deg,#E8B4B8 0%,#D4A0A4 100%);
  box-shadow:0 2px 4px rgba(232,180,184,0.25)
}
.page-feeding .discharge-detail{
  color:#8B7355
}
.page-feeding .discharge-times{
  color:#D4A574
}
.page-feeding .discharge-amount{
  color:#8B7355
}
.page-feeding .speed-change-badge{
  color:#B8956A;
  background:linear-gradient(135deg,#FFF5E8 0%,#FFEEE0 100%);
  border:1px solid rgba(184,149,106,0.2)
}
.page-feeding .speed-up .speed-change-tag{
  background:#E8F5E9;
  color:#4A7C59
}
.page-feeding .speed-down .speed-change-tag{
  background:#FFF8E1;
  color:#8B7355
}
.page-feeding .current-tag{
  background:#D4A574;
  color:#fff
}

/* 折叠按钮 —— 暖色 */
.page-feeding .toggle-line{
  background:linear-gradient(90deg,transparent,rgba(212,165,116,0.4),transparent)
}
.page-feeding .toggle-btn{
  background:rgba(212,165,116,0.2);
  color:#6B5344
}
.page-feeding .toggle-btn:hover{
  background:rgba(212,165,116,0.3)
}
.page-feeding .toggle-btn.expanded{
  background:rgba(212,165,116,0.25)
}
.page-feeding .collapsed-cards{
  border-top:1px dashed rgba(212,165,116,0.2)
}

/* 统计网格 —— 暖色 */
.page-feeding .stats-grid .stat-item{
  background:rgba(255,248,240,0.5);
  border:1px solid rgba(255,255,255,0.5)
}
.page-feeding .stats-grid .stat-item:hover{
  background:rgba(255,248,240,0.7)
}
.page-feeding .stat-value{
  color:#D4A574
}
.page-feeding .stat-label{
  color:#8B7355
}

/* 排末时间 —— 暖色 */
.page-feeding .final-discharge-section{
  background:rgba(255,248,240,0.35);
  border-top:1px solid rgba(212,165,116,0.15)
}
.page-feeding .final-discharge-title{
  color:#6B5344
}
.page-feeding .final-discharge-title .title-icon{
  color:#D4A574
}
.page-feeding .final-card{
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 2px 10px rgba(139,115,85,0.06)
}
.page-feeding .final-label{
  color:#8B7355
}
.page-feeding .final-time .time-text{
  color:#5C4A3D
}
.page-feeding .final-time .shift-badge{
  background:linear-gradient(135deg,#E8B4B8 0%,#D4A0A4 100%);
  color:#fff
}

/* 中奖卡片 —— 暖色 */
.page-feeding .lucky-card{
  background:linear-gradient(135deg,#FFF5E8 0%,#FFE8E0 50%,#FFF0F5 100%);
  border:1px solid rgba(212,165,116,0.2);
  box-shadow:0 4px 20px rgba(212,165,116,0.15)
}
.page-feeding .lucky-title{
  color:#D4A574
}
.page-feeding .lucky-text{
  color:#8B7355
}
.page-feeding .lucky-text .shift-highlight{
  color:#E8B4B8
}
.page-feeding .lucky-badge{
  background:linear-gradient(135deg,#D4A574 0%,#E8B4B8 100%);
  box-shadow:0 2px 10px rgba(212,165,116,0.3)
}
.page-feeding .lucky-shine{
  background:linear-gradient(135deg,transparent 0%,rgba(240,217,181,0.15) 50%,transparent 100%)
}
.page-feeding .lucky-particles .particle{
  background:#D4A574;
  box-shadow:0 0 6px #E8B4B8
}

/* 底部按钮 —— 焦糖色 */
.page-feeding .next-btn-fixed{
  background:rgba(255,248,240,0.4);
  border-top:1px solid rgba(255,255,255,0.5)
}
.page-feeding .next-btn{
  background:linear-gradient(135deg,#D4A574 0%,#C9A87C 100%);
  box-shadow:0 6px 20px rgba(212,165,116,0.3)
}
.page-feeding .next-btn:hover{
  box-shadow:0 8px 25px rgba(212,165,116,0.4)
}

/* 去掉底部footer文字 */
.page-feeding .footer-below-btn{
  display:none
}

/* ========== 抄记录提醒弹窗 ========== */
.reminder-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:reminder-fadein 0.28s ease
}
@keyframes reminder-fadein{
  from{opacity:0}
  to{opacity:1}
}

.reminder-card{
  background:linear-gradient(160deg,#fffef9 0%,#fdf6f0 40%,#fef9f3 100%);
  border-radius:20px;
  width:calc(100% - 48px);
  max-width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,0.18),0 4px 16px rgba(0,0,0,0.08);
  position:relative;
  overflow:hidden;
  animation:reminder-popup 0.32s cubic-bezier(0.34,1.56,0.64,1)
}
@keyframes reminder-popup{
  from{transform:scale(0.85) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}

.reminder-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#F2A7B3,#E8B4B8,#D4A574,#C9A87C)
}

.reminder-close{
  position:absolute;
  top:12px;
  right:14px;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#C4A88C;
  cursor:pointer;
  z-index:2;
  transition:all .2s;
  background:rgba(0,0,0,0.03)
}
.reminder-close:hover{
  background:rgba(0,0,0,0.06);
  color:#8B7355
}

.reminder-body{
  padding:28px 24px 16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px
}

.reminder-img{
  width:200px;
  height:100px;
  border-radius:10px;
  object-fit:contain;
  background:#f5f0ea;
  box-shadow:0 4px 16px rgba(0,0,0,0.1)
}

.reminder-text{
  font-size:17px;
  font-weight:600;
  color:#5C4A3D;
  line-height:1.5;
  letter-spacing:0.3px
}

.reminder-btns{
  display:flex;
  gap:12px;
  padding:8px 24px 24px
}

.reminder-btn{
  flex:1;
  padding:13px 0;
  border:none;
  border-radius:14px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  letter-spacing:0.4px;
  outline:none
}
.reminder-btn.primary{
  background:linear-gradient(135deg,#E8B4B8,#D4A574);
  color:#fff;
  box-shadow:0 4px 14px rgba(212,165,116,0.35)
}
.reminder-btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(212,165,116,0.45)
}
.reminder-btn.primary:active{
  transform:scale(0.97)
}
.reminder-btn.secondary{
  background:rgba(139,115,85,0.08);
  color:#8B7355;
  border:1.5px solid rgba(139,115,85,0.15)
}
.reminder-btn.secondary:hover{
  background:rgba(139,115,85,0.14)
}
.reminder-btn.secondary:active{
  transform:scale(0.97)
}