:root{--primary-color:#ffffff;--secondary-color:#f4f4f4;--navbar-bg:#ffffff;--navbar-text:#333333;--link-hover-bg:#e0e0e0;--footer-bg:#ffffff;--footer-text:#333333;--font-primary:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;--font-monospace:'Courier New',Courier,monospace;--transition-speed:0.3s;--animation-duration:0.3s;--animation-ease:ease-in-out;--color-red:#e74c3c;--color-blue:#3498db;--color-blue-dark:#2980b9;--color-green:#2ecc71;--color-purple:#9b59b6;--color-yellow:#f1c40f;--color-teal:#1abc9c;--color-white:#ffffff;--shadow-default:rgba(0,0,0,0.1) 0px 2px 4px;--shadow-hover:rgba(0,0,0,0.25) 0px 8px 16px;--box-shadow:rgba(0,0,0,0.1) 0px 4px 6px -1px,rgba(0,0,0,0.06) 0px 2px 4px -1px;--border-radius:8px;--border-radius-circle:50%;--max-width:1200px;--number-size:40px;--number-font-size:16px;--number-responsive-small:14px;--number-responsive-large:18px;--number-font-weight:700;--number-hover-scale:1.15;--spinner-color:#3498db;--z-index-navbar:1000;--z-index-loading:2000;}

/* Loading Overlay */
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.95);display:flex;justify-content:center;align-items:center;z-index:var(--z-index-loading);transition:opacity var(--transition-speed);display:none;}
.spinner{border:8px solid #f3f3f3;border-top:8px solid var(--spinner-color);border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite;}
/* Error Message */
.error-message{color:var(--error-color);text-align:center;margin-top:20px;font-size:16px;font-weight:500;}

#lottery-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2rem;}
@media (min-width:992px){#lottery-container{grid-template-columns:1fr;}}
/* Lottery Card */
.lottery{padding:0px;border-radius:var(--border-radius);width:100%;display:flex;flex-direction:column;}
.lottery:hover{}
.lottery h2{margin-bottom:10px;font-size:20px;color:#333333;font-weight:bold;}
.lottery h2 i{margin-right:8px;color:var(--color-blue);}

/* Open Time */
.open-time{display:flex;flex-wrap:nowrap;align-items:center;padding:12px 24px;border-radius:var(--border-radius);box-shadow:0 4px 8px rgba(0,0,0,0.05);margin-bottom:20px;font-size:18px;color:#333333;transition:background var(--transition-speed);}
.open-time-label{font-weight:600;color:var(--color-blue);margin-right:10px;white-space:nowrap;flex-shrink:0;}
.open-time-time{font-size:18px;font-weight:700;background:linear-gradient(90deg,#007AFF,#34C759);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:5px 12px 5px 0px;white-space:nowrap;flex-shrink:1;}

@media (max-width: 576px){
.open-time{padding:8px 16px;font-size:16px;}
.open-time-label{margin-right:8px;font-size:16px;}
.open-time-time{font-size:15px;padding:4px 16px 4px 0px;}
}

/* Numbers */
.numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:0px;padding-bottom:12px;border-bottom:1px solid #e0e0e0;}
@media (min-width:577px){
.numbers{flex-wrap:wrap;}
}
@media (min-width:992px){
.numbers{flex-wrap:nowrap;}
}

/* CSS Variables for Number Components */
/* 已在上方 :root 合并 */

/* Number Container */
.number-container{display:flex;flex-direction:column;align-items:center;animation:fadeInScale var(--animation-duration) forwards;margin-top:10px;}
.number-containerPlus{height:auto;padding-top:1.5rem;font-size:var(--number-responsive-large);font-weight:bold}
/* Number Circle */
.number-circle{width:var(--number-size);height:var(--number-size);border-radius:var(--border-radius-circle);background-color:var(--color-blue);display:flex;justify-content:center;align-items:center;color:var(--color-white);font-size:var(--number-font-size);font-weight:var(--number-font-weight);transition:transform var(--transition-speed) var(--animation-ease),box-shadow var(--transition-speed) var(--animation-ease);box-shadow:var(--shadow-default);cursor:default;}

/* Hover Effect */
.number-circle:hover{transform:scale(var(--number-hover-scale));box-shadow:var(--shadow-hover);}

/* Color Variants */
.number-circle.red{background-color:var(--color-red);}
.number-circle.blue{background-color:var(--color-blue);}
.number-circle.green{background-color:var(--color-green);}
.number-circle.purple{background-color:var(--color-purple);}
.number-circle.yellow{background-color:var(--color-yellow);}
.number-circle.teal{background-color:var(--color-teal);}

/* Responsive Adjustments */
@media (max-width:576px){
.number-containerPlus{width:35px;font-size:var(--number-responsive-small);}
.number-circle{width:35px;height:35px;font-size:var(--number-responsive-small);}
.zodiac{font-size:12px;}
}
@media (min-width:992px){
.number-containerPlus{width:45px;}
.number-circle{width:45px;height:45px;font-size:var(--number-responsive-large);}
}

/* Keyframes for Animation */
@keyframes fadeInScale{
from{opacity:0;transform:scale(0.8);}
to{opacity:1;transform:scale(1);}
}

/* Zodiac */
.zodiac{margin-top:6px;font-size:14px;color:#555555;text-align:center;}

/* 历史记录 */
.history h3{margin-bottom:12px;font-size:20px;color:#333333;font-weight:700;border-bottom:2px solid #e0e0e0;padding-bottom:18px;}
.history-records{overflow:hidden;transition:max-height 0.5s ease;display:flex;flex-direction:column;gap:20px;margin-bottom:0px;overflow:hidden;transition:max-height 0.5s ease;max-height:0;display:block;}
.history-record{line-height:1.4;box-sizing:border-box;display:flex;flex-direction:column;padding:12px;margin-bottom:15px;border-radius:var(--border-radius);box-shadow:var(--box-shadow);background-color:#fefefe;transition:opacity 0.3s ease;opacity:0;}
.history-record.visible{opacity:1;}
.history-record:hover{background-color:#f0f8ff;box-shadow:rgba(0,0,0,0.1) 0px 6px 12px -3px;}
.history-record .record-title{font-size:18px;margin-bottom:10px;font-weight:600;text-align:left;color:#333333;}
.history-numbers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
@media (max-width:768px){
.history-numbers{flex-wrap:nowrap;overflow-x:auto;}
}
.history-number{display:flex;flex-direction:column;align-items:center;width:55px;padding:5px;border-radius:6px;background-color:#ffffff;box-shadow:inset 0 0 5px rgba(0,0,0,0.05);transition:background-color var(--transition-speed),box-shadow var(--transition-speed);}
.history-number .number{color:#ffffff;font-size:16px;margin-bottom:4px;font-weight:600;}
@media (max-width:768px){
.history-number .number{font-size:13px;}
}
.history-number .zodiac-wuxing{width:100%;background-color:#ffffff;text-align:center;font-size:14px;color:#555555;padding:2px 0;border-radius:6px;border:1px solid #e0e0e0;font-weight:400;}
@media (max-width:576px){
.history-number .zodiac-wuxing{font-size:9px;border-radius:3px;white-space:nowrap;}
}

/* Toggle History Button */
.toggle-history{display:flex;justify-content:flex-end;}
@media (max-width:576px){
.toggle-history{margin-top:8px;}
}
.toggle-history button{background-color:var(--color-blue);color:#ffffff;border:none;padding:10px 20px;border-radius:var(--border-radius);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-speed),transform var(--transition-speed);font-weight:500;}
.toggle-history button i{margin-left:8px;transition:transform var(--transition-speed);}
.toggle-history button:hover{background-color:var(--color-blue-dark);transform:scale(1.05);}
.toggle-history button:focus{outline:none;box-shadow:none;}

/* 响应式按钮样式调整 */
/* 手机设备（最大宽度576px）的样式调整 */
@media (max-width:576px){
.toggle-history button{padding:6px 12px;font-size:14px;}
.toggle-history button i{margin-left:6px;font-size:12px;}
}
/* 中等设备（最大宽度768px）和非手机的样式调整 */
@media (max-width:768px) and (min-width:577px){
.toggle-history button{padding:8px 16px;font-size:15px;}
.toggle-history button i{margin-left:7px;font-size:13px;}
}
@keyframes spin{to{transform:rotate(360deg);}}

.chinesezodiac .side{width:100%;margin:0px;padding:0px;list-style:none;display:flex;flex-wrap:wrap;gap:11px;justify-content:center;}
.chinesezodiac .side li{background-color: #fff;width:24%;height:50px;overflow:hidden;margin:0rem;padding:0px;cursor:pointer;border:1px solid #ddd;border-radius:0.25rem;}
.chinesezodiac .side li p{width:100%;text-align:center;padding:0px;margin:0;padding:3px 0 0 0;}
.chinesezodiac .side li p span{display:inline-block;width:100%;height:20px;line-height:20px;color:#ff3e3e;}
.chinesezodiac .side li p span:nth-child(2){font-size:12px;}
.chinesezodiac .side li.active{background-color:#ff3e3e;}
.chinesezodiac .side li.active span{border-color:#ff3e3e;color:#fff;}
.chinesezodiac .title{padding:0;}
.chinesezodiac .subTitle{height:34px;padding:5px 0 5px 10px;}
.chinesezodiac .subTitle .op li{display:inline-block;height:24px;border-radius:0.25rem;margin-left:0px;line-height:22px;min-width:24px;text-align:center;color:#999;border:1px solid #e9e9e9;cursor:pointer;}

@media (max-width:768px) and (min-width:577px){
.chinesezodiac .side{gap:8px;}
}

@media (max-width:576px){
.chinesezodiac .side{gap:4px;}
}

@media (max-width:390px){
.history-number{padding:3px 5px 5px 5px;}
.history-number .number{margin-bottom:0px;}
}

/* countdown-container */
.countdown-container{display:flex;flex-wrap:nowrap;align-items:center;border-radius:var(--border-radius);font-size:18px;padding:0px 24px;transition:background var(--transition-speed);}
.countdown-container .status-text{font-weight:600;color:var(--color-blue);white-space:nowrap;flex-shrink:0;}/* 在CSS文件中添加 */
.status-text {
    text-align: center;
}

/* 或者更具体一点 */
#status {
    text-align: center;
}
.countdown-container .timer{font-size:18px;font-weight:700;background:linear-gradient(90deg,#007AFF,#34C759);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:5px;white-space:nowrap;flex-shrink:1;}

.fox-lottery-tips{font-size:18px;color:var(--color-blue);}
@media (max-width:576px){
.fox-lottery-tips{font-size:16px;}
}

@media (max-width:390px){
.fox-lottery-tips{font-size:14px;}
}

.fox-user-login{width:200px;margin:0 auto;font-size:18px;font-weight:700;background:linear-gradient(90deg,#007AFF,#34C759);-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;flex-shrink:1;}