/* ================================
   颜色变量定义 (深色 / 浅色)
   ================================ */
:root {
    --bg-main: #0c1421;
    --text-main: #e2e8f0;
    --accent-blue: #38bdf8;
    --bg-panel: #1e293b;
    --bg-card: #0f172a;
    --border-card: #475569;
    --text-muted: #cbd5e1;
    --btn-bg: #334155;
    --btn-text: #e2e8f0;
    --btn-border: #64748b;
}

body.theme-light {
    --bg-main: #f0f0f0;
    --text-main: #333333;
    --accent-blue: #0ea5e9;
    --bg-panel: #ffffff;
    --bg-card: #e2e8f0;
    --border-card: #94a3b8;
    --text-muted: #475569;
    --btn-bg: #e2e8f0;
    --btn-text: #1e293b;
    --btn-border: #94a3b8;
}

/* ================================
   1. 全局基础与字体
   ================================ */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    padding: 10px;
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* 强制覆盖 NES 像素字，全局回归现代无衬线 */
body, button, input, textarea, select, dialog, div, span, p, label, menu {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 仅标题和大屏数字保留像素风 */
.pixel-title, .dash-number {
    font-family: 'Press Start 2P', monospace !important;
    -webkit-font-smoothing: none !important;
}

/* ================================
   2. 按钮统一重置 (解决深色隐形 & 锯齿边框)
   ================================ */
.nes-btn {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 0.8rem;
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 2px solid var(--btn-border) !important;
    border-image: none !important;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.nes-btn:hover {
    filter: brightness(1.2);
}
.nes-btn:active {
    transform: scale(0.96);
}

/* 语义色按钮 */
.nes-btn.is-primary { background-color: #2563eb !important; color: #fff !important; border-color: #1d4ed8 !important; }
.nes-btn.is-primary:hover { background-color: #1d4ed8 !important; }
.nes-btn.is-success { background-color: #10b981 !important; color: #fff !important; border-color: #059669 !important; }
.nes-btn.is-success:hover { background-color: #059669 !important; }
.nes-btn.is-warning { background-color: #f59e0b !important; color: #1e293b !important; border-color: #d97706 !important; }
.nes-btn.is-warning:hover { background-color: #d97706 !important; }
.nes-btn.is-error { background-color: #7f1d1d !important; color: #fca5a5 !important; border-color: #991b1b !important; }
.nes-btn.is-error:hover { background-color: #991b1b !important; }

/* 顶部三大功能圆角图标按钮 */
.nes-btn.filter-btn {
    background-color: var(--btn-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--btn-border) !important;
    font-size: 1.2rem;
    padding: 4px 10px;
    min-width: 42px;
    min-height: 36px;
}

/* ================================
   3. 顶部 Header
   ================================ */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--accent-blue);
    padding-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}
.header h3 {
    color: var(--text-main);
    text-shadow: 2px 2px 0px rgba(14, 165, 233, 0.3);
    margin: 0;
    font-size: clamp(0.85rem, 3.5vw, 1.1rem);
}

/* iOS 窄屏：两排居中 */
@media (max-width: 500px) {
    .header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .header h3, .header > div {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   4. 分类标签行
   ================================ */
.presets-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

/* ================================
   5. 设备卡片网格
   ================================ */
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.device-card {
    background-color: var(--bg-card);
    border: 2px solid var(--border-card) !important;
    border-image: none !important;
    border-radius: 6px;
    padding: 15px 5px 10px 5px;
    text-align: center;
    position: relative;
    user-select: none;
    transition: transform 0.1s, border-color 0.2s;
}
.device-card:active { transform: scale(0.95); }
.device-card:hover { border-color: var(--accent-blue) !important; }

.device-icon {
    font-size: 2.5rem;
    margin-bottom: 5px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.device-icon img {
    max-width: 45px;
    max-height: 45px;
    image-rendering: pixelated;
    object-fit: contain;
}

.device-name {
    font-size: 0.75rem;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    color: var(--text-main);
}

/* 状态指示灯 */
.status-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: 0 auto;
    border: 3px solid var(--bg-panel);
    transition: all 0.3s;
}
.status-0 { background-color: #b91c1c; box-shadow: none; border-color: #7f1d1d; }
.status-1 { background-color: #f59e0b; box-shadow: 0 0 12px #f59e0b, inset 0 0 3px #b45309; animation: blink 1.2s infinite; }
.status-2 { background-color: #10b981; box-shadow: 0 0 20px #10b981, 0 0 30px #34d399, inset 0 0 6px #ffffff; border-color: #ffffff; }

@keyframes blink { 50% { opacity: 0.4; } }

/* ================================
   6. Dashboard 大屏
   ================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}
.dash-card {
    background: var(--bg-panel);
    border: 2px solid var(--border-card);
    border-radius: 6px;
    padding: 15px 5px;
    text-align: center;
    font-size: 0.8rem;
}
.dash-number {
    font-size: 1.8rem;
    margin-top: 8px;
    color: var(--accent-blue);
    text-shadow: 2px 2px 0px rgba(0,0,0,0.15);
}

/* 进度条容器 */
.energy-box {
    background-color: var(--bg-panel);
    border: 2px solid var(--border-card);
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 15px;
    text-align: center;
}
.energy-box p {
    font-size: 0.85rem;
}
.energy-box progress {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* 进度条流光效果 */
.dynamic-progress::-webkit-progress-value {
    background: linear-gradient(-45deg, #10b981, #34d399, #059669, #10b981) !important;
    background-size: 300% 300% !important;
    animation: gradientBar 2s ease infinite !important;
}
.dynamic-progress::-moz-progress-bar {
    background: linear-gradient(-45deg, #10b981, #34d399, #059669, #10b981);
    background-size: 300% 300%;
    animation: gradientBar 2s ease infinite;
}
@keyframes gradientBar {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================================
   7. 新增装备面板
   ================================ */
.add-box-header {
    background-color: var(--bg-panel);
    border: 2px solid var(--border-card);
    border-radius: 6px;
    padding: 10px;
    margin-top: 20px;
    text-align: center;
    color: var(--text-main);
    font-size: 0.8rem;
    cursor: pointer;
}
.add-box-content {
    background-color: var(--bg-panel);
    border: 2px solid var(--border-card);
    border-top: none;
    border-radius: 0 0 6px 6px;
    color: var(--text-main);
    padding: 15px 10px;
}

/* ================================
   8. 表单控件
   ================================ */
.nes-input, .nes-textarea {
    background-color: var(--bg-card) !important;
    border: 2px solid var(--border-card) !important;
    border-image: none !important;
    border-radius: 4px;
    color: var(--text-main) !important;
    outline: none !important;
    font-size: 0.85rem;
}
.nes-input:focus, .nes-textarea:focus {
    border-color: var(--accent-blue) !important;
}

/* ================================
   9. 弹窗 Dialog
   ================================ */
dialog.nes-dialog {
    max-width: 95%;
    width: 450px;
    margin: auto;
    padding: 0;
    background: var(--bg-panel);
    color: var(--text-main);
    border: 2px solid var(--border-card) !important;
    border-image: none !important;
    border-radius: 8px;
}
dialog.nes-dialog form {
    padding: 15px;
    max-height: 85vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
dialog.nes-dialog form::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
::backdrop { background-color: rgba(0, 0, 0, 0.7); }

/* 密码锁屏 */
dialog.auth-lock-screen::backdrop {
    background-color: rgba(12, 20, 33, 0.98);
    backdrop-filter: blur(10px);
}

/* ================================
   10. 图标选择器
   ================================ */
.icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.emoji-btn {
    font-size: 1.2rem;
    padding: 3px;
    background: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: 4px;
    cursor: pointer;
}
.emoji-btn.active { border-color: var(--accent-blue); }
.emoji-btn:hover { background: var(--bg-panel); }