:root {
    --neon-blue: #0ff0fc;
    --neon-purple: #bc13fe;
    --primary-blue: #1890ff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{
    scroll-behavior:smooth
}
body{
    min-height:100vh;
    padding:30px 20px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:14px;
    color:#333;
    line-height:1.6;
    background:linear-gradient(135deg, #e0f7ff 0%, #f0e6ff 100%);
    overflow-x:hidden;
    position:relative
}

/* 绚丽旋转背景效果 */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 30%, rgba(15, 240, 252, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(188, 19, 254, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 40% 80%, rgba(255, 44, 237, 0.15) 0%, transparent 30%);
    animation: rotate 30s linear infinite;
    z-index: -1;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 粒子效果 */
.particle {
    position: fixed;
    border-radius: 50%;
    opacity: 0.3;
    animation: floatUp 15s infinite linear;
    pointer-events: none;
    z-index: 0;
}

@keyframes floatUp {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    50% { opacity: 0.5; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

.container{max-width:720px;margin:0 auto;position:relative;z-index:1}

h2{
    margin:0 0 25px 0;
    font-size:26px;
    font-weight:600;
    text-align:center;
    background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(15, 240, 252, 0.2)
}

h3{margin:0 0 12px 0;font-size:16px;color:#2c3e50;font-weight:500}
h4{margin:0 0 8px 0;font-size:13px;color:#666;font-weight:400}
p{margin:6px 0;color:#555}

.card{
    background:rgba(255, 255, 255, 0.9);
    backdrop-filter:blur(10px);
    border-radius:8px;
    box-shadow:0 4px 20px rgba(15, 240, 252, 0.15);
    padding:20px;
    margin:16px 0;
    border:1px solid rgba(255,255,255,0.5)
}

.shop-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:15px
}

.shop-btn{
    padding:10px 20px;
    border:1px solid #e0e0e0;
    border-radius:6px;
    background:#fff;
    color:#666;
    cursor:pointer;
    font-size:14px;
    transition:all 0.2s;
    user-select:none
}

.shop-btn:hover{
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(24, 144, 255, 0.15)
}

.shop-btn.selected{
    background:linear-gradient(135deg, #e6f7ff 0%, #f0e6ff 100%);
    border-color: var(--neon-blue);
    color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(15, 240, 252, 0.2)
}

.btn{
    display:inline-block;
    padding:8px 20px;
    border:none;
    border-radius:20px;
    background:linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
    color:#fff;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s;
    text-decoration:none;
    box-shadow:0 2px 8px rgba(15, 240, 252, 0.3)
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(15, 240, 252, 0.4)
}

.btn-secondary{
    background:#fff;
    color: var(--primary-blue);
    border:1px solid var(--primary-blue);
    box-shadow:none
}

.btn-secondary:hover{
    background:#f0f9ff;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(24, 144, 255, 0.2)
}

.btn-group{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.func-desc{
    margin-top:14px;
    padding:12px 14px;
    background:#f0f9ff;
    border-radius:4px;
    font-size:13px;
    color:#595959;
    line-height:1.8
}
.func-desc strong{
    color: var(--primary-blue);
    font-weight:600
}
.btn-text{background:none;border:none;color: var(--primary-blue);padding:4px 8px;cursor:pointer;font-size:13px}
.btn-text:hover{text-decoration:underline}

/* Toast 悬浮消息样式 */
.toast{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%) translateY(-100px);
    padding:14px 24px;
    border-radius:8px;
    font-size:15px;
    font-weight:500;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    z-index:9999;
    opacity:0;
    transition:all 0.3s ease;
    pointer-events:none;
    white-space:nowrap
}
.toast.show{
    transform:translateX(-50%) translateY(0);
    opacity:1
}
.toast.success{
    background:#52c41a;
    color:#fff
}
.toast.error{
    background:#ff4d4f;
    color:#fff
}
.toast.warning{
    background:#faad14;
    color:#fff
}

.status-box{
    max-height:300px;
    overflow-y:auto;
    border:1px solid #e8e8e8;
    border-radius:4px;
    padding:10px;
    background:#fafafa
}

.log-item{padding:10px 0;border-bottom:1px solid #e8e8e8}
.log-item:last-child{border-bottom:none}
.log-time{color:#888;font-size:12px;margin-bottom:3px}

.queue{max-height:350px;overflow-y:auto}
.item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    background:#f8f9fa;
    border-radius:4px;
    margin-bottom:8px;
    border:1px solid #e8e8e8
}

.status-blue{color: var(--primary-blue);font-weight:600;font-size:18px}
.status-red{color:#ff4d4f;font-weight:600;font-size:18px}
.status-green{color:#52c41a;font-weight:600;font-size:18px}
.status-text{font-size:16px}
.status-text strong{font-size:16px;font-weight:500}

.schedule-panel{
    display:none;
    padding:14px;
    background:#f8f9fa;
    border-radius:4px;
    margin-top:6px;
    border:1px solid #e8e8e8
}

.schedule-panel.show{display:block}

.toggle-btn{
    width:100%;
    padding:10px 14px;
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:4px;
    font-size:14px;
    text-align:left;
    cursor:pointer;
    color:#333;
    font-weight:400
}

.toggle-btn:hover{background:#f8f9fa}
.toggle-btn:after{content:'▼';float:right;font-size:11px;color:#888}
.toggle-btn.collapsed:after{content:'▶'}

.schedule-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    background:#fff;
    border-radius:4px;
    margin-bottom:8px;
    border:1px solid #e8e8e8
}

.schedule-item.disabled{opacity:0.5}
.schedule-time{font-weight:500;font-size:15px;color:#2c3e50}
.schedule-info{color:#888;font-size:12px;margin-top:2px}

.empty-text{
    color:#999;
    text-align:center;
    padding:25px 15px;
    font-size:13px
}

.schedule-form{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px
}

input[type="time"]{
    padding:10px 14px;
    border:2px solid #d9d9d9;
    border-radius:8px;
    font-size:16px;
    background:#fff;
    color:#333;
    transition:all 0.3s;
    outline:none;
    min-width:140px
}

input[type="time"]:hover{
    border-color:var(--neon-blue)
}

input[type="time"]:focus{
    border-color:var(--neon-blue);
    box-shadow:0 0 0 3px rgba(15, 240, 252, 0.15)
}

.btn-add-schedule{
    padding:10px 24px;
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
    color:#fff;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    transition:all 0.3s;
    box-shadow:0 2px 8px rgba(15, 240, 252, 0.3);
    white-space:nowrap
}

.btn-add-schedule:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(15, 240, 252, 0.4)
}

.btn-add-schedule:active{
    transform:translateY(0);
    box-shadow:0 2px 6px rgba(15, 240, 252, 0.3)
}

.schedule-actions{
    display:flex;
    gap:6px;
    flex-shrink:0
}

.btn-schedule{
    padding:5px 14px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:500;
    transition:all 0.25s;
    text-decoration:none;
    display:inline-block;
    text-align:center
}

.btn-schedule:hover{
    transform:translateY(-1px);
    text-decoration:none
}

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

.btn-toggle-on{
    background:#fff3e0;
    color:#e65100;
    border:1px solid #ffcc80
}

.btn-toggle-on:hover{
    background:#ffe0b2;
    box-shadow:0 2px 8px rgba(230, 81, 0, 0.15)
}

.btn-toggle-off{
    background:#e8f5e9;
    color:#2e7d32;
    border:1px solid #a5d6a7
}

.btn-toggle-off:hover{
    background:#c8e6c9;
    box-shadow:0 2px 8px rgba(46, 125, 50, 0.15)
}

.btn-del{
    background:#ffebee;
    color:#c62828;
    border:1px solid #ef9a9a
}

.btn-del:hover{
    background:#ffcdd2;
    box-shadow:0 2px 8px rgba(198, 40, 40, 0.15)
}

/* 任务闪烁动画 */
@keyframes flash {
    0%, 100% { background: #f8f9fa; }
    50% { background: #e6f7ff; }
}
.item-flash{
    animation: flash 0.4s ease-in-out 2;
}

@media(max-width:768px){
    body{padding:20px 15px}
    h2{font-size:22px;margin-bottom:20px}
    .card{padding:16px;margin:12px 0}
    .shop-grid{gap:8px}
    .shop-btn{padding:8px 16px;font-size:14px}
    .btn-group{flex-direction:column}
    .btn{width:100%;text-align:center}
}

@media(max-width:480px){
    h2{font-size:20px}
    .shop-btn{padding:8px 14px;font-size:13px}
}

.footer {
    text-align: center;
    padding: 15px 20px;
    color: #fff;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 维护模式金色状态 */
.status-gold{color:#FFD700;font-weight:700;font-size:18px;text-shadow:0 0 8px rgba(255,215,0,0.5)}

/* 维护模式悬浮框 */
.maintenance-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000
}
.maintenance-modal-content{
    background:#fff;
    border-radius:12px;
    padding:30px;
    min-width:320px;
    max-width:90%;
    box-shadow:0 8px 30px rgba(0,0,0,0.2);
    text-align:center
}
.maintenance-modal-content h3{
    margin:0 0 15px 0;
    font-size:20px;
    color:#2c3e50
}
.maintenance-modal-content p{
    margin:0 0 25px 0;
    font-size:15px;
    color:#666
}
.maintenance-modal-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap
}
.btn-maintenance{
    padding:10px 24px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s
}
.btn-maintenance:hover{
    transform:translateY(-2px)
}
.btn-maintenance-on{
    background:linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color:#fff;
    box-shadow:0 2px 8px rgba(255,215,0,0.4)
}
.btn-maintenance-on:hover{
    box-shadow:0 4px 14px rgba(255,215,0,0.5)
}
.btn-maintenance-off{
    background:linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    color:#fff;
    box-shadow:0 2px 8px rgba(82,196,26,0.4)
}
.btn-maintenance-off:hover{
    box-shadow:0 4px 14px rgba(82,196,26,0.5)
}
.btn-maintenance-cancel{
    background:#f0f0f0;
    color:#666;
    border:1px solid #d9d9d9
}
.btn-maintenance-cancel:hover{
    background:#e8e8e8
}