/* 基础重置 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --bg: #f5f5f5;
    --card-bg: #ffffff;
    --text: #1a1a2e;
    --text-secondary: #999;
    --text-muted: #bbb;
    --radius: 12px;
    --shadow: 0 1px 4px rgba(0,0,0,0.06);

    /* 状态色 */
    --idle: #39bc67;
    --idle-bg: #eafaf1;
    --in-use: #e55649;
    --in-use-bg: #fdedec;
    --maintenance: #f2c94c;
    --maintenance-bg: #fef9e7;
    --offline: #999;

    /* 底部栏高度 */
    --bottom-bar-h: 60px;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg);
    color: var(--text);
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
    -webkit-font-smoothing: antialiased;
}

/* ===== 顶部栏 ===== */
.top-bar {
    background: #fff;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
}
.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.top-bar-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.top-bar-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}
.top-bar-balance {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}
.top-bar-logout {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
}
.top-bar-divider {
    color: #ddd;
    font-size: 13px;
}

/* ===== 顶部导航Tab ===== */
.nav-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
    flex-shrink: 0;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.nav-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ===== 筛选区域 ===== */
.filter-section {
    background: #fff;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-buttons {
    display: flex;
    gap: 8px;
}
.filter-btn {
    padding: 7px 18px;
    border-radius: 18px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.refresh-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}
.stats-text {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.stat-bubble {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}
.stat-bubble b { font-weight: 800; font-size: 15px; margin-right: 2px; }
.stat-bubble.idle     { background: #eafaf1; color: var(--idle); }
.stat-bubble.in_use   { background: #fdedec; color: var(--in-use); }
.stat-bubble.maintenance { background: #fef9e7; color: #b8860b; }
.stat-bubble.offline  { background: #f3f4f6; color: var(--offline); }

/* ===== 设备列表 ===== */
.device-list {
    padding: 12px 16px;
    padding-bottom: 16px;
}

/* ===== 设备卡片 ===== */
.device-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
}
.card-grid {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 2px 8px;
}
.card-img { grid-row:1/3; grid-column:1; display:flex; align-items:center }
.card-r1 { grid-row:1; grid-column:2 }
.card-r1r { grid-row:1; grid-column:3; display:flex; align-items:center; justify-content:center }
.card-r2 { grid-row:2; grid-column:2; font-size:13px; color:#666 }
.card-r2r { grid-row:2/4; grid-column:3; display:flex; align-items:center; justify-content:center }
.card-r3 { grid-row:3; grid-column:1/3; display:flex; flex-wrap:wrap; gap:5px; align-items:center }
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 8px 14px 14px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
}
.device-card-top { display:flex; align-items:stretch; gap:8px }
.device-card-bottom { margin-top:0; display:flex; flex-wrap:wrap; gap:5px; align-items:center }
.card-thumb-img { width:70px; height:50px; border-radius:8px; object-fit:cover; flex-shrink:0 }
.card-left { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding-top:2px }
.card-right { flex-shrink:0; display:flex; flex-direction:column; align-items:center; width:70px; align-self:stretch }

/* 卡片行 */
.card-row1 { display:flex; align-items:center; gap:4px; margin-bottom:2px }
.card-row2 { font-size:13px; color:#666; margin-bottom:4px }
.card-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.card-notes {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-header .dash {
    color: #ccc;
    margin: 0 -2px;
}
.status-badge {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}
.status-badge.idle     { background: var(--idle-bg); color: var(--idle); }
.status-badge.in_use   { background: var(--in-use-bg); color: var(--in-use); }
.status-badge.maintenance { background: var(--maintenance-bg); color: #b8860b; }
.status-badge.offline { background: #f3f4f6; color: #6b7280; }

/* 信息气泡 */
.card-bubbles { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.info-bubble { display:inline-block; padding:3px 10px; border-radius:10px; font-size:12px; font-weight:500 }
.info-bubble.region { background:#e8f0fe; color:#2563eb }
.info-bubble.target { background:#fef3c7; color:#b45309 }
.info-bubble.ost { background:#f3e8ff; color:#7c3aed }

/* 剩余时长气泡 */
.card-remaining {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #8b5cf6;
    background: #f3edff;
    margin-top: 4px;
}

/* 卡片右侧按钮 */
.btn {
    display: inline-block;
    width: 70px;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border: none;
    transition: all 0.15s;
}
.btn-start {
    background: var(--primary);
    color: #fff;
}
.btn-start:active { background: var(--primary-dark); }
.btn-reserve {
    background: #fff;
    color: var(--text-secondary);
    border: 1.5px solid #ddd !important;
}
.btn-reserve:active { background: #f5f5f5; }

/* ===== 底部导航栏 ===== */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: var(--bottom-bar-h);
    background: #fff;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    transition: color 0.15s;
}
.bottom-tab.active {
    color: var(--primary);
}

/* ===== 模态框 ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    justify-content: center;
    align-items: center;
}
.modal-overlay.show { display: flex; }
.modal {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal h3 { margin-bottom: 18px; font-size: 18px; }
.modal .form-group { margin-bottom: 12px; }
.modal label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; }
.modal input, .modal select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.modal input:focus, .modal select:focus { outline: none; border-color: var(--primary); }
.modal .btn-row { display: flex; gap: 10px; margin-top: 18px; }
.btn-cancel { flex: 1; padding: 11px 0; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; background: #f3f4f6; color: var(--text); }
.btn-cancel:active { background: #e5e7eb; }
.btn-confirm { flex: 1; padding: 11px 0; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--primary); color: #fff; }
.btn-confirm:active { background: var(--primary-dark); }

/* ===== 刷新动画 ===== */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== Toast ===== */
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 300;
    animation: toastIn 0.3s ease;
    pointer-events: none;
}
.toast.success { background: #16a34a; }
.toast.error { background: #ef4444; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== 空状态 ===== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }