*{
box-sizing:border-box;
}


body{

margin:0;

font-family:

Arial,
"Microsoft YaHei",
sans-serif;


background:#111;

color:white;

}


.app{

max-width:600px;

margin:auto;

padding:15px;

}



.top{

border:1px solid #555;

border-radius:15px;

padding:15px;

text-align:center;

}



.top h1{

margin:0;

font-size:28px;

}



#period{

font-size:22px;

margin-top:10px;

}



#time{

font-size:16px;

color:#aaa;

}





.draw-box{

margin-top:25px;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

flex-wrap:wrap;

}



.numbers{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:8px;

flex:1;

}



.ball{

height:90px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

font-size:32px;

font-weight:bold;

color:white;

}



.zodiac{

font-size:18px;

margin-top:5px;

}



.red{

background:red;

}


.blue{

background:#001cff;

}


.green{

background:#009900;

}




.plus{

font-size:40px;

font-weight:bold;

}



.special{

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

font-weight:bold;

}



button{

width:100%;

margin-top:25px;

padding:15px;

border-radius:10px;

border:none;

font-size:18px;

}



nav{

position:fixed;

bottom:0;

left:0;

right:0;


height:65px;

background:#222;

display:flex;

justify-content:space-around;

align-items:center;

}





@media(prefers-color-scheme:light){


body{

background:#eee;

color:#111;

}


.top{

background:white;

}


nav{

background:white;

}



}
/* =========================================
   历史开奖
   ========================================= */


.history-tools{

    display:flex;

    gap:10px;

    margin-top:15px;

}


.history-tools select{

    flex:1;

    min-width:0;

    padding:12px;

    border-radius:8px;

    border:1px solid #555;

    background:#222;

    color:white;

    font-size:16px;

}


.history-tools button{

    width:auto;

    margin:0;

    padding:12px 20px;

    background:#174cff;

    color:white;

}


#historyStatus{

    margin-top:12px;

    font-size:14px;

    color:#999;

}



/* 历史列表 */

#historyList{

    margin-top:20px;

    padding-bottom:90px;

}



/* 历史卡片 */

.history-card{

    margin-bottom:18px;

    padding:14px;

    background:#080808;

    border:1px solid #333;

    border-radius:10px;

}


.history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}


.history-period{

    font-size:19px;

    font-weight:bold;

}


.history-time{

    font-size:13px;

    color:#999;

}


.history-label{

    margin-top:12px;

    margin-bottom:10px;

    color:#aaa;

    font-size:14px;

}


/* 历史号码 */

.history-numbers{

    display:grid;

    grid-template-columns:repeat(7,minmax(0,1fr));

    align-items:stretch;

    gap:4px;

    width:100%;

    overflow:visible;

}


.history-ball{

    min-width:0;

    width:100%;

    height:62px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    border-radius:5px;

    position:relative;

}


.history-number{

    font-size:20px;

    font-weight:bold;

    line-height:1;

}


.history-zodiac{

    margin-top:3px;

    font-size:12px;

    line-height:1;

}


/* 特码与前面的正码之间用小加号分隔，不占用额外宽度 */
.history-ball.special-ball::before{
    content:"+";
    position:absolute;
    left:-8px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
    font-weight:bold;
    color:#888;
    z-index:2;
}


.history-plus{
    display:none;
}



/* 红蓝绿 */

.history-ball.red{

    background:#ff0000;

}


.history-ball.blue{

    background:#001cff;

}


.history-ball.green{

    background:#009900;

}


.history-ball.unknown-wave{

    background:#555;

}


.loading,
.empty,
.error{

    text-align:center;

    padding:40px 10px;

    color:#999;

}


/* =========================================
   底部导航
   ========================================= */

.bottom-nav{

    position:fixed;

    bottom:0;

    left:0;

    right:0;

    height:65px;

    background:rgba(20,20,20,.96);

    border-top:1px solid #333;

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:1000;

}


.bottom-nav a{

    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#888;

}


.bottom-nav a span{

    font-size:22px;

}


.bottom-nav a small{

    margin-top:3px;

    font-size:12px;

}


.bottom-nav a.active{

    color:#fff;

}


/* 浅色模式 */

@media(prefers-color-scheme:light){

    .history-card{

        background:#fff;

        border-color:#ddd;

    }


    .history-tools select{

        background:#fff;

        color:#111;

        border-color:#ccc;

    }


    .bottom-nav{

        background:rgba(255,255,255,.96);

        border-color:#ddd;

    }


    .bottom-nav a{

        color:#888;

    }


    .bottom-nav a.active{

        color:#111;

    }

}
/* =========================================
   挑码助手
   ========================================= */


.picker-page{

    padding-bottom:90px;

}


.picker-header{

    position:sticky;

    top:0;

    z-index:20;

    backdrop-filter:blur(10px);

}


.picker-content{

    margin-top:15px;

}


/* 当前结果 */

.result-panel{

    padding:15px;

    border-radius:12px;

    background:#1a1a1a;

    border:1px solid #333;

}


.result-title{

    font-size:16px;

    color:#aaa;

    margin-bottom:12px;

}


.result-numbers{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    min-height:55px;

}


.result-empty{

    color:#777;

    padding:15px 0;

}


.result-number{

    width:52px;

    height:62px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:6px;

    color:white;

}


.result-number[data-wave="红波"]{

    background:#e60000;

}


.result-number[data-wave="蓝波"]{

    background:#174cff;

}


.result-number[data-wave="绿波"]{

    background:#009900;

}


.result-number-main{

    font-size:21px;

    font-weight:bold;

}


.result-number-zodiac{

    font-size:13px;

    margin-top:2px;

}


.result-actions{

    display:flex;

    gap:8px;

    margin-top:15px;

}


.action-button{

    flex:1;

    margin:0;

    padding:11px;

    background:#333;

    color:white;

    border:1px solid #555;

}


/* 筛选区域 */

.filter-section{

    margin-top:15px;

    padding:15px;

    border-radius:12px;

    background:#151515;

    border:1px solid #2c2c2c;

}


.filter-title{

    font-size:16px;

    font-weight:bold;

    margin-bottom:12px;

}


.filter-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:8px;

}


.filter-grid button{

    margin:0;

    width:100%;

    padding:11px 5px;

    background:#262626;

    color:#ddd;

    border:1px solid #444;

    border-radius:7px;

    font-size:15px;

    transition:.15s;

}


/* 被选中的按钮 */

.filter-grid button.selected{

    background:#fff;

    color:#111;

    border-color:#fff;

    font-weight:bold;

    transform:scale(.97);

}


/* =========================================
   浅色模式
   ========================================= */

@media(prefers-color-scheme:light){

    .result-panel{

        background:#fff;

        border-color:#ddd;

    }


    .filter-section{

        background:#fff;

        border-color:#ddd;

    }


    .filter-grid button{

        background:#f3f3f3;

        color:#222;

        border-color:#ddd;

    }


    .filter-grid button.selected{

        background:#111;

        color:#fff;

        border-color:#111;

    }


    .action-button{

        background:#eee;

        color:#111;

        border-color:#ccc;

    }

}


/* =========================================
   小屏幕优化
   ========================================= */

@media(max-width:360px){

    .filter-grid{

        grid-template-columns:
            repeat(3,1fr);

    }


    .result-number{

        width:48px;

    }

}
/* =========================================
   挑码助手新版移动端布局
   ========================================= */

.picker-page{
    padding-bottom:90px;
}

.picker-header{
    position:sticky;
    top:0;
    z-index:30;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.picker-content{
    margin-top:8px;
}

/* 结果框固定在顶部：滚动筛选条件时始终可见 */
.result-panel{
    position:sticky;
    top:82px;
    z-index:25;
    padding:10px;
    min-height:62px;
    border-radius:12px;
    background:rgba(26,26,26,.96);
    border:1px solid #333;
    box-shadow:0 5px 18px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.result-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13px;
    color:#999;
    margin:0 0 6px;
}

.result-numbers{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    min-height:0;
}

/* 未选择条件时，结果区域保持空白 */
.result-numbers:not(.has-result){
    min-height:0;
}

.result-numbers.has-result{
    max-height:118px;
    overflow-y:auto;
    padding-right:2px;
}

.result-empty{
    color:#888;
    padding:8px 0;
    font-size:13px;
}

.result-number{
    width:44px;
    height:48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    color:white;
    flex:0 0 auto;
}

.result-number-main{
    font-size:18px;
    font-weight:bold;
    line-height:1;
}

.result-number-zodiac{
    font-size:11px;
    margin-top:3px;
}

.result-actions{
    display:none;
    gap:6px;
    margin-top:8px;
}

.result-actions.show{
    display:flex;
}

.action-button{
    flex:1;
    margin:0;
    padding:8px;
    background:#333;
    color:white;
    border:1px solid #555;
    border-radius:7px;
    font-size:13px;
}

/* 筛选区域更紧凑 */
.filter-section{
    margin-top:8px;
    padding:10px;
    border-radius:10px;
    background:#151515;
    border:1px solid #2c2c2c;
}

.filter-title{
    font-size:14px;
    font-weight:bold;
    margin-bottom:7px;
}

.filter-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:5px;
}

.filter-grid button{
    margin:0;
    width:100%;
    min-height:34px;
    padding:6px 3px;
    background:#262626;
    color:#ddd;
    border:1px solid #444;
    border-radius:6px;
    font-size:13px;
    line-height:1.1;
    transition:transform .12s, background .12s, color .12s;
}

.filter-grid button:active{
    transform:scale(.96);
}

.filter-grid button.selected{
    background:#fff;
    color:#111;
    border-color:#fff;
    font-weight:bold;
    transform:scale(.97);
}

/* 浅色模式 */
@media(prefers-color-scheme:light){

    .result-panel{
        background:rgba(255,255,255,.96);
        border-color:#ddd;
        box-shadow:0 5px 18px rgba(0,0,0,.10);
    }

    .filter-section{
        background:#fff;
        border-color:#ddd;
    }

    .filter-grid button{
        background:#f3f3f3;
        color:#222;
        border-color:#ddd;
    }

    .filter-grid button.selected{
        background:#111;
        color:#fff;
        border-color:#111;
    }

    .action-button{
        background:#eee;
        color:#111;
        border-color:#ccc;
    }
}

@media(max-width:360px){

    .filter-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .filter-grid button{
        min-height:32px;
        font-size:12px;
    }

    .result-number{
        width:42px;
        height:46px;
    }
}

/* =========================================
   挑码助手：紧凑筛选布局
   ========================================= */

.picker-page .picker-content {
    padding-bottom: 90px;
}

.picker-page .filter-section {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
}

.picker-page .filter-title {
    font-size: 14px;
    margin-bottom: 8px;
}

.picker-page .filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.picker-page .filter-grid button {
    padding: 8px 2px;
    min-height: 34px;
    font-size: 13px;
    border-radius: 6px;
}

/* 结果区域真正固定在顶部：紧跟标题栏 */
.picker-page .result-panel {
    position: sticky;
    top: 76px;
    z-index: 15;
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(26, 26, 26, .96);
    backdrop-filter: blur(12px);
}

.picker-page .result-title {
    font-size: 14px;
    margin-bottom: 7px;
}

.picker-page .result-numbers {
    min-height: 0;
    gap: 4px;
}

.picker-page .result-number {
    width: 43px;
    height: 51px;
}

.picker-page .result-number-main {
    font-size: 18px;
}

.picker-page .result-number-zodiac {
    font-size: 11px;
}

.picker-page .result-actions {
    display: none;
    margin-top: 8px;
}

.picker-page .result-actions.show {
    display: flex;
}

.picker-page .action-button {
    padding: 8px;
    font-size: 13px;
}

@media (prefers-color-scheme: light) {
    .picker-page .result-panel {
        background: rgba(255, 255, 255, .96);
        border-color: #ddd;
    }
}

@media (max-width: 360px) {
    .picker-page .filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ===============================
   开奖倒计时 / 实时开奖状态
   =============================== */
.countdown{
    margin-top:10px;
    font-size:16px;
    font-weight:600;
    letter-spacing:.5px;
}

.draw-status{
    margin-top:7px;
    color:#999;
    font-size:14px;
}

.countdown.drawing,
.draw-status.drawing{
    color:#ffb000;
    font-weight:700;
}

.plus{
    visibility:hidden;
}

.ball-in{
    animation:ballIn .35s ease-out both;
}

@keyframes ballIn{
    from{
        opacity:0;
        transform:scale(.55) translateY(-10px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

/* 开奖过程中避免旧号码与新号码挤在一起 */
.numbers:empty{
    min-height:90px;
}

@media(prefers-color-scheme:light){
    .draw-status{
        color:#777;
    }
}


/* =========================================
   历史开奖：七球一屏显示
   ========================================= */
.history-card{
    padding:11px;
    margin-bottom:10px;
}

.history-header{
    gap:6px;
}

.history-period{
    font-size:16px;
}

.history-time{
    font-size:11px;
    white-space:nowrap;
}

.history-label{
    margin-top:8px;
    margin-bottom:7px;
    font-size:12px;
}

.history-numbers{
    gap:3px;
}

.history-ball{
    height:58px;
}

.history-number{
    font-size:18px;
}

.history-zodiac{
    font-size:11px;
}

.history-ball.special-ball::before{
    left:-7px;
    font-size:14px;
}

@media(max-width:360px){
    .history-card{
        padding:9px;
    }
    .history-period{
        font-size:15px;
    }
    .history-time{
        font-size:10px;
    }
    .history-ball{
        height:54px;
    }
    .history-number{
        font-size:16px;
    }
    .history-zodiac{
        font-size:10px;
    }
    .history-ball.special-ball::before{
        left:-6px;
        font-size:13px;
    }
}