:root{
    --yellow:#f6b93b;
    --blue:#a0d2ff;
    --white:rgba(255,255,255,0.95);
    --glass:rgba(255,255,255,0.1);
    --glass-border:rgba(255,255,255,0.15);
    --rgb-color:255,255,255
}

body{
    min-height:100vh;
    color:var(--white);
    background:#111;
    overflow-x:hidden;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

.bg-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-2
}

.bg-image{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    transition:opacity 1.5s
}

.bg-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:-1;
    transition:background 0.3s ease
}

.hide-ui .bg-overlay{
    background:rgba(0,0,0,0.2)
}

.ui-element{
    transition:opacity 0.3s ease,transform 0.3s ease;
    opacity:1;
    pointer-events:auto
}

.hide-ui .ui-element{
    opacity:0;
    pointer-events:none;
    transform:translateY(15px)
}

.hide-btn{
    transition:opacity 0.3s ease,transform 0.3s ease
}

.hide-ui .hide-btn{
    opacity:1;
    pointer-events:auto
}

.hide-ui .page-nav{
    opacity:0;
    pointer-events:none;
    transform:translateY(15px)
}

.hide-ui #passwordDialog,
.hide-ui #passwordOverlay{
    opacity:0;
    pointer-events:none
}

.container{
    max-width:500px;
    margin:0 auto;
    padding:30px 20px 100px;
    display:flex;
    flex-direction:column;
    min-height:100vh
}

header{
    text-align:center;
    margin-bottom:30px
}

.server-icon{
    width:85px;
    height:85px;
    border-radius:22px;
    margin:0 auto 15px;
    border:2px solid var(--glass-border);
    background:url('https://raw.githubusercontent.com/ERX399/zephyrix/main/server.png') center/cover no-repeat;
    box-shadow:0 4px 15px rgba(0,0,0,0.3)
}

h1{
    font-size:2rem;
    margin-bottom:5px;
    text-shadow:0 2px 10px rgba(0,0,0,0.5)
}

.version-info{
    font-size:0.85rem;
    margin:10px 0 25px;
    padding:6px 15px;
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:12px;
    color:var(--blue);
    font-weight:bold;
    display:inline-block
}

.card{
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:18px;
    padding:20px;
    margin-bottom:15px
}

h2{
    font-size:1.05rem;
    color:var(--blue);
    margin:0 0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-weight:bold
}

h2::before,
h2::after{
    content:"";
    width:25px;
    height:1px;
    background:var(--blue)
}

.addr-box{
    background:rgba(255,255,255,0.05);
    padding:14px;
    border-radius:12px;
    margin-bottom:10px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.08);
    text-align:center
}

.addr-box:active{
    background:rgba(255,255,255,0.1);
    transform:scale(0.98)
}

.addr-box span{
    font-size:0.75rem;
    color:var(--blue);
    display:block;
    margin-bottom:3px
}

.addr-box strong{
    color:var(--yellow);
    font-size:1.15rem;
    font-family:monospace
}

.comm-row{
    display:flex;
    justify-content:space-between;
    padding:12px 15px;
    background:rgba(255,255,255,0.07);
    border-radius:10px;
    margin-bottom:8px;
    font-size:0.9rem;
    border:1px solid rgba(255,255,255,0.05);
    text-decoration:none;
    color:inherit
}

.comm-row span:first-child{
    font-weight:bold;
    color:rgba(255,255,255,0.9)
}

.comm-row span:last-child{
    color:var(--blue);
    font-weight:bold
}

.btn-join{
    background:linear-gradient(135deg,#6ba4ff,#4a86e9);
    padding:16px;
    border-radius:14px;
    font-weight:800;
    font-size:1rem;
    margin-top:10px;
    display:block;
    text-align:center;
    box-shadow:0 4px 15px rgba(74,134,233,0.3);
    color:white;
    text-decoration:none
}

.disclaimer{
    border-left:3px solid var(--blue);
    padding:10px;
    text-align:left;
    background:var(--glass);
    border-radius:4px;
    margin-bottom:20px;
    font-size:0.75rem;
    color:rgba(255,255,255,0.6)
}

#timer{
    color:var(--yellow);
    font-weight:bold;
    font-size:1rem;
    padding:8px 16px;
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:10px;
    display:block;
    margin:0 auto 20px;
    text-align:center;
    width:60%
}

.page-nav{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:auto;
    margin-bottom:30px
}

.page-btn{
    padding:10px 25px;
    background:rgba(255,255,255,0.1);
    border:1px solid var(--glass-border);
    border-radius:10px;
    color:var(--blue);
    font-weight:bold;
    cursor:pointer;
    transition:all 0.3s;
    font-size:0.9rem
}

.page-btn:hover{
    background:rgba(255,255,255,0.2);
    transform:translateY(-2px)
}

.page-btn:active{
    transform:translateY(0)
}

.page-content{
    display:none;
    animation:pageFadeIn 0.3s ease
}

.page-content.active{
    display:block
}

@keyframes pageFadeIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

.link-item{
    position:relative;
    background:rgba(255,255,255,0.05);
    padding:16px;
    border-radius:12px;
    margin-bottom:10px;
    border:1px solid rgba(255,255,255,0.08);
    cursor:pointer;
    transition:all 0.2s
}

.link-item:hover{
    background:rgba(255,255,255,0.1);
    transform:scale(1.01)
}

.link-item:active{
    transform:scale(0.98)
}

.link-name{
    font-size:0.95rem;
    color:var(--white);
    font-weight:bold;
    display:block;
    margin-bottom:4px
}

.link-url{
    font-size:0.8rem;
    color:var(--blue);
    font-family:monospace;
    word-break:break-all;
    display:none
}

.link-weight{
    position:absolute;
    top:10px;
    right:10px;
    background:linear-gradient(135deg,var(--blue),#4a86e9);
    color:white;
    font-size:0.65rem;
    font-weight:bold;
    padding:3px 8px;
    border-radius:10px;
    min-width:20px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.2)
}

body.rgb-active .link-weight{
    background:linear-gradient(135deg,rgba(var(--rgb-color),0.8),rgba(var(--rgb-color),0.6));
    box-shadow:0 2px 8px rgba(var(--rgb-color),0.3)
}

body.rgb-active .page-btn{
    color:rgba(var(--rgb-color),0.9) !important;
    border-color:rgba(var(--rgb-color),0.3) !important;
    text-shadow:0 0 5px rgba(var(--rgb-color),0.4) !important
}

body.rgb-active .page-btn:hover{
    background:rgba(var(--rgb-color),0.15) !important
}

body.rgb-active .link-item{
    border-color:rgba(var(--rgb-color),0.2) !important
}

body.rgb-active .link-item:hover{
    background:rgba(var(--rgb-color),0.08) !important
}

body.rgb-active .link-name,
body.rgb-active .link-url{
    color:rgba(var(--rgb-color),0.9) !important
}

.footer-info{
    font-size:0.72rem;
    color:rgba(255,255,255,0.4);
    border-top:1px solid rgba(255,255,255,0.1);
    padding:25px 10px 10px;
    line-height:1.6;
    text-align:center
}

.footer-info a{
    color:rgba(255,255,255,0.4);
    text-decoration:none;
    transition:all 0.3s ease
}

.footer-info a:hover{
    color:rgba(255,255,255,0.7)
}

.server-note{
    font-size:0.8rem;
    color:var(--yellow);
    margin-bottom:15px;
    padding:8px 12px;
    background:rgba(246,185,59,0.1);
    border:1px solid rgba(246,185,59,0.2);
    border-radius:8px;
    text-align:center
}

.bg-controls{
    position:fixed;
    top:20px;
    left:20px;
    display:flex;
    gap:10px
}

.bg-btn{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    border:1px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer
}

.hide-btn{
    position:fixed;
    top:20px;
    right:20px;
    background:rgba(255,255,255,0.1);
    border:1px solid var(--glass-border);
    border-radius:10px;
    width:38px;
    height:38px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center
}

.hide-btn svg{
    width:20px;
    height:20px;
    fill:#fff
}

#player{
    position:fixed;
    bottom:20px;
    right:20px;
    width:50px;
    height:50px;
    background:rgba(255,255,255,0.15);
    border:1px solid var(--glass-border);
    border-radius:25px;
    z-index:9999;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.2);
    box-sizing:border-box
}

#player.expanded{
    width:300px;
    height:130px;
    border-radius:20px;
    padding:15px;
    transition:width 0.4s ease,height 0.4s ease,border-radius 0.4s ease
}

.player-collapse{
    position:absolute;
    top:5px;
    right:5px;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s
}

#player.expanded .player-collapse{
    opacity:1;
    pointer-events:auto
}

.player-collapse svg{
    width:14px;
    height:14px;
    fill:#fff
}

.cd-box{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    z-index:2
}

#player.expanded .cd-box{
    position:absolute;
    top:auto;
    bottom:0;
    right:0;
    left:auto;
    transition:top 0.4s ease,bottom 0.4s ease,left 0.4s ease,right 0.4s ease
}

.cd-box svg{
    width:22px;
    height:22px;
    fill:#fff;
    transition:transform 0.3s ease
}

.cd-box:hover svg{
    transform:scale(1.1)
}

.progress-container{
    width:100%;
    height:30px;
    display:flex;
    align-items:center;
    cursor:pointer;
    position:relative;
    -webkit-tap-highlight-color:transparent
}

.p-bg{
    width:100%;
    height:5px;
    background:rgba(255,255,255,0.2);
    border-radius:3px;
    position:relative;
    cursor:pointer
}

.p-fill{
    height:100%;
    background:var(--blue);
    width:0%;
    border-radius:3px;
    position:relative
}

#player:not(.dragging) .p-fill{
    transition:width 0.1s ease
}

.p-fill::after{
    content:'';
    position:absolute;
    right:-6px;
    top:-4px;
    width:12px;
    height:12px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 6px rgba(0,0,0,0.5);
    transform:scale(0);
    transition:transform 0.2s ease,background 0.3s ease
}

#player.expanded .p-fill::after{
    transform:scale(1)
}

.progress-container:hover .p-bg{
    height:6px
}

.progress-container:hover .p-fill::after{
    transform:scale(1.2) !important
}

.ctrl-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%
}

.ctrl-btns{
    display:flex;
    gap:12px;
    align-items:center
}

.ctrl-btns button{
    background:rgba(255,255,255,0.1);
    border:none;
    cursor:pointer;
    padding:6px;
    border-radius:50%;
    display:flex;
    transition:transform 0.1s
}

.ctrl-btns button:active{
    transform:scale(0.92)
}

.ctrl-btns svg{
    width:18px;
    height:18px;
    fill:#fff
}

.m-time{
    font-size:10px;
    color:var(--blue);
    font-family:monospace;
    min-width:70px;
    text-align:left
}

.inner-ui{
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

#player.expanded .inner-ui{
    opacity:1;
    pointer-events:auto
}

.m-info{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 5px 8px 5px;
    overflow:hidden
}

.m-title{
    font-size:14px;
    color:var(--blue);
    font-weight:bold;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
    flex:1
}

.bottom-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    padding-top:5px
}

#toast{
    visibility:hidden;
    position:fixed;
    top:40px;
    left:50%;
    transform:translateX(-50%);
    background:#222;
    color:#fff;
    padding:8px 20px;
    border-radius:20px;
    z-index:10002;
    font-size:0.8rem;
    box-sizing:border-box
}

#toast.show{
    visibility:visible;
    animation:fadeInOut 1.5s
}

@keyframes fadeInOut{
    0%,100%{opacity:0}
    20%,80%{opacity:1}
}

#passwordDialog{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--glass);
    backdrop-filter:blur(15px);
    border:1px solid var(--glass-border);
    border-radius:20px;
    padding:25px;
    z-index:99999;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
    display:none;
    width:350px;
    max-width:90%;
    pointer-events:auto;
    animation:dialogAppear 0.3s
}

#passwordDialog.show{
    display:block
}

@keyframes dialogAppear{
    from{opacity:0;transform:translate(-50%,-50%) scale(0.9)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

#passwordDialog h3{
    margin-top:0;
    margin-bottom:20px;
    color:var(--blue);
    text-align:center;
    font-size:1.3rem
}

body.theme-golden{
    --blue:#ffd700 !important
}

body.theme-golden .btn-join{
    background:linear-gradient(135deg,#ffd700,#ff9900) !important
}

body.theme-golden #passwordConfirm{
    background:linear-gradient(135deg,#ffd700,#ff9900) !important
}

#passwordInput{
    width:100%;
    padding:14px 18px;
    border:1px solid var(--glass-border);
    border-radius:12px;
    background:rgba(255,255,255,0.05);
    color:white;
    font-size:1.1rem;
    box-sizing:border-box;
    margin-bottom:20px;
    outline:none;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    -webkit-text-security:disc
}

.password-buttons{
    display:flex;
    gap:15px
}

.password-buttons button{
    flex:1;
    padding:12px 0;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:bold;
    font-size:1rem
}

#passwordConfirm{
    background:linear-gradient(135deg,#6ba4ff,#4a86e9);
    color:white;
    box-shadow:0 4px 15px rgba(74,134,233,0.3)
}

#passwordCancel{
    background:rgba(255,255,255,0.1);
    color:white;
    border:1px solid var(--glass-border)
}

.rgb-switch-container{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.1)
}

.rgb-switch-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    color:rgba(255,255,255,0.9);
    font-size:0.95rem
}

.rgb-speed-container{
    margin-top:15px
}

.rgb-speed-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
    color:rgba(255,255,255,0.8);
    font-size:0.9rem
}

.speed-value{
    color:var(--blue);
    font-weight:bold;
    font-family:monospace;
    font-size:0.95rem
}

.speed-limit{
    font-size:0.75rem;
    color:rgba(255,255,255,0.5);
    margin-top:3px;
    text-align:center
}

.speed-slider{
    width:100%;
    height:8px;
    -webkit-appearance:none;
    appearance:none;
    background:rgba(255,255,255,0.1);
    border-radius:4px;
    outline:none;
    margin:10px 0
}

.speed-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--blue);
    cursor:pointer;
    box-shadow:0 0 5px rgba(0,0,0,0.3)
}

.rgb-switch{
    position:relative;
    display:inline-block;
    width:50px;
    height:26px
}

.rgb-switch input{
    opacity:0;
    width:0;
    height:0
}

.rgb-slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:var(--switch-color,rgba(255,255,255,0.2));
    transition:.3s;
    border-radius:34px
}

.rgb-slider:before{
    position:absolute;
    content:"";
    height:18px;
    width:18px;
    left:4px;
    bottom:4px;
    background-color:white;
    transition:.3s;
    border-radius:50%
}

body:not(.rgb-active) input:checked + .rgb-slider{
    background-color:var(--blue)
}

input:checked + .rgb-slider:before{
    transform:translateX(24px)
}

body.rgb-active .rgb-slider{
    background-color:var(--switch-color,rgba(255,255,255,0.2)) !important
}

#passwordOverlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99998;
    display:none;
    pointer-events:auto
}

#passwordOverlay.show{
    display:block;
    animation:overlayAppear 0.3s
}

@keyframes overlayAppear{
    from{opacity:0}
    to{opacity:1}
}

.about-text{
    text-align:center;
    line-height:1.6
}

body.rgb-active h1,
body.rgb-active h2,
body.rgb-active .version-info,
body.rgb-active .about-text,
body.rgb-active .server-note,
body.rgb-active .addr-box span,
body.rgb-active .addr-box strong,
body.rgb-active .comm-row span,
body.rgb-active .footer-info,
body.rgb-active .disclaimer,
body.rgb-active #passwordDialog h3,
body.rgb-active .rgb-switch-label span,
body.rgb-active .rgb-speed-label span,
body.rgb-active .speed-value,
body.rgb-active .speed-limit,
body.rgb-active .m-title,
body.rgb-active .m-time{
    color:rgba(var(--rgb-color),0.9) !important;
    text-shadow:0 0 5px rgba(var(--rgb-color),0.4) !important
}

body.rgb-active h2::before,
body.rgb-active h2::after{
    background:rgba(var(--rgb-color),0.7) !important
}

body.rgb-active .card{
    box-shadow:0 5px 20px rgba(var(--rgb-color),0.1) !important;
    border-color:rgba(var(--rgb-color),0.3) !important
}

body.rgb-active .btn-join{
    background:linear-gradient(135deg,rgba(var(--rgb-color),0.7),rgba(var(--rgb-color),0.5)) !important;
    box-shadow:0 4px 15px rgba(var(--rgb-color),0.3) !important
}

body.rgb-active .addr-box{
    box-shadow:0 3px 10px rgba(var(--rgb-color),0.15) !important;
    border-color:rgba(var(--rgb-color),0.2) !important
}

body.rgb-active .comm-row{
    background:rgba(var(--rgb-color),0.05) !important;
    border-color:rgba(var(--rgb-color),0.2) !important
}

body.rgb-active #timer{
    color:rgba(var(--rgb-color),0.9) !important;
    border-color:rgba(var(--rgb-color),0.3) !important
}

body.rgb-active #passwordInput{
    border-color:rgba(var(--rgb-color),0.4) !important
}

body.rgb-active #passwordConfirm{
    background:linear-gradient(135deg,rgba(var(--rgb-color),0.7),rgba(var(--rgb-color),0.5)) !important
}

body.rgb-active .speed-slider{
    background:rgba(var(--rgb-color),0.1) !important
}

body.rgb-active .speed-slider::-webkit-slider-thumb{
    background:rgba(var(--rgb-color),0.9) !important
}

body.rgb-active .bg-btn,
body.rgb-active .hide-btn,
body.rgb-active #player{
    box-shadow:0 0 10px rgba(var(--rgb-color),0.2) !important;
    border-color:rgba(var(--rgb-color),0.3) !important
}

body.rgb-active #toast.show{
    background:rgba(var(--rgb-color),0.8) !important;
    color:#000 !important
}

body.rgb-active .disclaimer{
    border-left-color:rgba(var(--rgb-color),0.7) !important
}

body.rgb-active .p-fill{
    background:rgba(var(--rgb-color),0.9) !important;
    box-shadow:0 0 5px rgba(var(--rgb-color),0.5) !important
}

body.rgb-active .p-fill::after{
    background:rgb(var(--rgb-color)) !important;
    box-shadow:0 0 8px rgba(var(--rgb-color),0.8) !important
}

body.rgb-active .ctrl-btns button:hover{
    background:rgba(var(--rgb-color),0.2) !important
}

body.rgb-active .footer-info a{
    color:rgba(var(--rgb-color),0.9) !important;
    text-shadow:0 0 5px rgba(var(--rgb-color),0.4) !important;
    text-decoration:none !important;
    transition:all 0.3s ease !important
}

body.rgb-active .footer-info a:hover{
    color:rgb(var(--rgb-color)) !important;
    text-shadow:0 0 10px rgba(var(--rgb-color),0.8) !important
}

@media (max-width:767px){
    .container{padding:20px 15px 80px}
    .server-icon{width:75px;height:75px}
    h1{font-size:1.8rem}
    .card{padding:16px}
    #passwordDialog{width:320px;padding:20px}
}