* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", Arial; background: #0F172A; color: #F8FAFC; }

/* 全局细滚动条样式 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748B; }
* { scrollbar-width: thin; scrollbar-color: #475569 transparent; }

/* 登录页 */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box { background: #1E293B; padding: 40px; border-radius: 16px; width: 400px; }
.login-box h1 { text-align: center; color: #3B82F6; margin-bottom: 30px; font-size: 28px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; color: #94A3B8; font-size: 13px; }
.form-group input { width: 100%; padding: 10px 14px; border: 1px solid #334155; border-radius: 8px;
                   background: #0F172A; color: #F8FAFC; font-size: 14px; }
.form-group input:focus { outline: none; border-color: #3B82F6; }
.btn { width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-primary { background: #3B82F6; color: white; }
.btn-primary:hover { background: #2563EB; }
.btn-secondary { background: transparent; border: 1px solid #334155; color: #F8FAFC; }
.btn-secondary:hover { border-color: #3B82F6; color: #3B82F6; }
.btn-danger { background: #EF4444; color: white; }
.btn-danger:hover { background: #DC2626; }

/* 弹窗底部按钮 - 自适应宽度 */
.modal-footer .btn { width: auto; min-width: 80px; padding: 8px 24px; }
.modal-footer .btn-sm { min-width: 0; padding: 6px 14px; }
.link { color: #3B82F6; text-decoration: none; font-size: 13px; }
.link:hover { text-decoration: underline; }
.error { color: #EF4444; font-size: 12px; margin-top: 4px; }
.toggle-link { text-align: center; margin-top: 16px; font-size: 13px; color: #94A3B8; }

/* 主页面 */
.main-page { display: flex; height: 100vh; position: relative; z-index: 1; }
.sidebar { width: 240px; background: #1E293B; padding: 20px; border-right: 1px solid #334155; }
.sidebar h1 { color: #3B82F6; font-size: 22px; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid #334155; }
.menu { list-style: none; }
.menu li { margin-bottom: 8px; }
.menu li a { display: block; padding: 10px 14px; border-radius: 8px; color: #94A3B8; text-decoration: none; font-size: 14px; }
.menu li a:hover, .menu li a.active { background: #334155; color: #F8FAFC; }
.menu-admin { display: none; }
body.role-admin .menu-admin { display: block; }
body:not(.role-admin) .col-reward { display: none; }

.content { flex: 1; padding: 24px; overflow-y: auto; }
.content h2 { font-size: 22px; margin-bottom: 20px; color: #F8FAFC; }

/* 卡片 */
.card { background: #1E293B; border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid #334155; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-title { font-size: 16px; font-weight: 600; color: #F8FAFC; }

/* 表格 */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
.task-table { table-layout: fixed; min-width: 1050px; }
th, td { padding: 10px 10px; text-align: left; border-bottom: 1px solid #334155; }
th { background: #172033; color: #94A3B8; font-size: 13px; font-weight: 600; white-space: nowrap; }
td { color: #F8FAFC; font-size: 14px; }
.task-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr:hover { background: #334155; }
/* 操作列固定在右侧 */
td.col-actions, th.col-actions {
    position: sticky;
    right: 0;
    background: #1E293B;
    box-shadow: -4px 0 6px -4px rgba(0,0,0,0.3);
}
th.col-actions { background: #172033; }
tr:hover td.col-actions { background: #334155; }

/* 状态标签 */
.status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-success { background: #22C55E20; color: #22C55E; }
.status-failed { background: #EF444420; color: #EF4444; }
.status-running { background: #3B82F620; color: #3B82F6; }
.status-pending { background: #EAB30820; color: #EAB308; }
.status-idle { background: #22C55E20; color: #22C55E; }
.status-busy { background: #3B82F620; color: #3B82F6; }
.status-offline { background: #EF444420; color: #EF4444; }

/* 顶部栏 */
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.user-info { color: #94A3B8; font-size: 14px; }
.user-info span { color: #3B82F6; font-weight: 600; }

/* 输入框 */
.input-sm { padding: 6px 10px; border: 1px solid #334155; border-radius: 6px;
            background: #0F172A; color: #F8FAFC; font-size: 13px; }
.btn-sm { padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }

/* 模态框 */
.modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
         background: rgba(0,0,0,0.7); z-index: 9999; pointer-events: auto; }
.modal.show { display: flex; align-items: center; justify-content: center; }
.modal-content { background: #1E293B; padding: 30px; border-radius: 12px; width: 780px; max-width: 94vw; max-height: 90vh; overflow-y: auto; position: relative; z-index: 10000; pointer-events: auto; }
.modal-content h3 { margin-bottom: 20px; color: #F8FAFC; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* 细滚动条样式 - 保留滚动功能但更美观 */
.hide-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
}
.hide-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
}
.hide-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}
.hide-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748B;
}

/* 统计卡片 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #1E293B; border-radius: 12px; padding: 20px; border: 1px solid #334155; }
.stat-value { font-size: 28px; font-weight: 800; color: #3B82F6; }
.stat-label { color: #94A3B8; font-size: 13px; margin-top: 4px; }

/* 操作按钮组 - 横向排列 */
.action-btns { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-wrap: nowrap; }
.action-btns .btn-sm { padding: 4px 10px; font-size: 12px; white-space: nowrap; }

/* 表格列宽控制 */
.device-table { table-layout: auto; }
.device-table col.col-id { width: 80px; }
.device-table col.col-name { width: 100px; }
.device-table col.col-code { width: 240px; }
.device-table col.col-status { width: 80px; }
.device-table col.col-toggle { width: 80px; }
.device-table col.col-desc { width: 120px; }
.device-table col.col-time { width: 120px; }
.device-table col.col-action { width: 260px; }

/* 卡片头部布局 */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header .card-title { flex: 1; }
.card-header .btn { width: auto; padding: 8px 20px; }

/* 分页组件 */
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 0 4px; }
.pagination-info { color: #94A3B8; font-size: 13px; }
.pagination-controls { display: flex; gap: 6px; align-items: center; }
.pagination-btn { min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid #334155; background: #1E293B; color: #F8FAFC; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.pagination-btn:hover:not(:disabled) { background: #334155; border-color: #475569; }
.pagination-btn.active { background: #3B82F6; border-color: #3B82F6; color: white; }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-size { display: flex; align-items: center; gap: 8px; color: #94A3B8; font-size: 13px; }
.pagination-size select { padding: 4px 8px; background: #0F172A; border: 1px solid #334155; color: #F8FAFC; border-radius: 6px; font-size: 13px; cursor: pointer; }
.pagination-size select:focus { outline: none; border-color: #3B82F6; }