/* style.css */

/* === 全局变量 === */
:root { 
    --bg-color: #0f172a;       /* 深蓝背景 */
    --box-bg: #1e293b;         /* 卡片背景 */
    --border-color: #334155;   /* 边框颜色 */
    --text-main: #f8fafc;      /* 主文字白 */
    --text-sub: #94a3b8;       /* 副文字灰 */
}

body {
    margin: 0; padding: 20px; min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* === 大框框容器 === */
.big-box {
    width: 100%;
    max-width: 900px;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    padding: 40px;
    text-align: center;
}

.header-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 40px;
    letter-spacing: -1px;
    font-style: italic;
}

/* === 设备行 (核心布局) === */
.device-row {
    display: flex;
    /* [关键] 垂直居中对齐 */
    align-items: center; 
    justify-content: center;
    /* [关键] 锁定最小高度，防止跳动 (约等于两行文字+间距的高度) */
    min-height: 70px; 
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}

.device-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 设备名称 */
.dev-name {
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.25rem;
    margin-right: 15px;
    white-space: nowrap;
    /* 稍微向上提一点点，视觉上跟右边的英文对齐更好看 */
    padding-bottom: 2px;
}

/* 右侧内容容器 */
.dev-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 让里面的文字块垂直居中 */
    text-align: left;
    /* [关键] 预留宽度和高度 */
    min-height: 46px; 
}

/* 状态主文字 */
.dev-status {
    font-size: 1.25rem;
    line-height: 1.4;
    word-break: break-word;
}

/* 音乐行样式 */
.music-row {
    font-size: 0.9rem;
    color: #f472b6 !important; 
    margin-top: 2px;
    display: flex;
    align-items: center;
    font-weight: 500;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.music-icon { margin-right: 6px; font-size: 0.8rem; }

/* === 状态颜色 === */
.status-online { color: #34d399; } /* 亮绿 */
.status-unknown { color: #64748b; font-style: italic; } /* 灰色 */
.status-sleep { color: #a78bfa; }   /* 紫色 */

/* 底部区域 */
.footer {
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--text-sub);
    font-family: monospace;
}

.signature {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 8px;
    font-family: 'Segoe UI', sans-serif;
}

/* === 手机端适配 === */
@media (max-width: 600px) {
    .big-box { padding: 25px 15px; }
    .header-title { font-size: 1.6rem; margin-bottom: 30px; }
    
    .device-row { 
        /* 手机上改为垂直排列 */
        flex-direction: column; 
        align-items: flex-start;
        /* 手机上允许自适应高度 */
        min-height: auto;
        padding-bottom: 20px;
    }
    
    .dev-name { 
        width: 100%; 
        margin-bottom: 5px; 
        margin-right: 0;
        font-size: 1.1rem;
    }
    
    .dev-status { font-size: 1.1rem; }
    
    .dev-content {
        min-height: auto; /* 手机上不需要预留高度，自然堆叠即可 */
        width: 100%;
    }
}

/* === 侧边统计栏 & 按钮 === */
.stats-panel { 
    position: fixed; top:0; right:0; bottom:0; width: 480px; 
    background: var(--box-bg); border-left: 1px solid var(--border-color);
    transform:translateX(100%); transition:0.4s cubic-bezier(0.2,0.8,0.2,1); 
    box-shadow:-10px 0 60px rgba(0,0,0,0.6); padding:40px; z-index:100; 
    display:flex; flex-direction:column; color: var(--text-main);
}
.stats-panel.active { transform:translateX(0); }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:99; opacity:0; pointer-events:none; transition:0.3s; }
.overlay.active { opacity:1; pointer-events:auto; }

.stats-header { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 5px; }
.stats-sub { font-size: 1rem; color: var(--text-sub); margin-bottom: 35px; }

.stats-item { margin-bottom: 20px; }
.stats-info { display: flex; justify-content: space-between; font-size: 1.1rem; color: #e2e8f0; margin-bottom: 8px; }
.stats-percent { color: var(--text-sub); font-size: 0.95rem; }
.progress-bg { width: 100%; height: 8px; background: var(--border-color); border-radius: 4px; overflow:hidden; }
.progress-bar { height:100%; border-radius:4px; }

.btn-close { margin-top: auto; padding: 15px; width: 100%; border: 1px solid var(--border-color); background: transparent; color: var(--text-sub); border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 1rem; }
.btn-close:hover { background: rgba(255,255,255,0.05); color: #fff; }

@media (max-width: 600px) { .stats-panel { width: 85%; padding: 25px; } }

.fab-btn { position: fixed; bottom: 30px; right: 30px; background: #3b82f6; color: white; border: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.5); transition:all 0.2s; font-size:1.6rem; z-index:90; }
.fab-btn:hover { transform:scale(1.1); }