/* ===== CSS Variables — Dark & Light Themes ===== */
:root,
[data-theme="dark"] {
    --bg-primary: #0f1923;
    --bg-secondary: #1a2634;
    --bg-card: #1e2d3d;
    --bg-hover: #253648;
    --bg-input: #162231;
    --border-color: #2a3f52;
    --border-light: #34506a;
    --text-primary: #e8edf2;
    --text-secondary: #8b9db5;
    --text-muted: #5a7089;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --table-stripe: rgba(0,0,0,0.1);
    --theme-toggle-bg: #253648;
}

[data-theme="light"] {
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #e8ecf1;
    --bg-input: #f5f7fa;
    --border-color: #d4dae3;
    --border-light: #bcc5d1;
    --text-primary: #1a2332;
    --text-secondary: #5a6a7d;
    --text-muted: #8896a7;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --table-stripe: rgba(0,0,0,0.025);
    --theme-toggle-bg: #e8ecf1;
}

/* Accent colors (shared) */
:root {
    --accent-blue: #3b82f6;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    --accent-purple: #a855f7;
    --accent-cyan: #06b6d4;
    --accent-yellow: #eab308;
    --accent-teal: #14b8a6;
    --accent-rose: #f43f5e;
    --radius: 8px;
    --radius-sm: 4px;
    --transition: all 0.2s ease;
}

/* ===== Reset ===== */
* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    transition: background .3s, color .3s;
}

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

.app { display:flex; flex-direction:column; min-height:100vh; }

/* ===== Header ===== */
.header {
    display:flex; justify-content:space-between; align-items:center;
    padding:0 24px; height:56px;
    background: var(--bg-secondary);
    border-bottom:1px solid var(--border-color);
    box-shadow: var(--shadow);
    position:sticky; top:0; z-index:100;
    transition: background .3s;
}
.header-left, .header-right { display:flex; align-items:center; gap:12px; }
.logo { display:flex; align-items:center; gap:10px; }
.logo-svg { color: var(--accent-cyan); filter: drop-shadow(0 0 6px rgba(6,182,212,0.4)); }
.logo-text {
    font-size:20px; font-weight:700; letter-spacing:2px;
    background:linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-sub { font-size:12px; color:var(--text-secondary); border-left:1px solid var(--border-color); padding-left:10px; }

.status-indicator { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.status-indicator .dot { width:7px; height:7px; border-radius:50%; background:var(--accent-green); box-shadow:0 0 6px var(--accent-green); animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.datetime { font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* Theme Toggle */
.theme-toggle {
    width:36px; height:36px; border-radius:50%; border:1px solid var(--border-color);
    background:var(--theme-toggle-bg); cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--text-secondary); transition:var(--transition);
}
.theme-toggle:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); }
[data-theme="dark"] .icon-sun  { display:none; }
[data-theme="dark"] .icon-moon { display:block; }
[data-theme="light"] .icon-sun  { display:block; }
[data-theme="light"] .icon-moon { display:none; }

/* ===== Stats Panel ===== */
.stats-panel { display:flex; gap:12px; padding:16px 24px 12px; overflow-x:auto; }
.stat-card {
    flex:1; min-width:170px; background:var(--bg-card); border:none;
    border-radius:10px; padding:16px 18px; display:flex; align-items:center; gap:14px;
    transition:var(--transition); cursor:default; position:relative; overflow:hidden;
}
.stat-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity:0; transition:opacity .3s;
}
.stat-card:hover::before { opacity:1; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }
.stat-card.highlight { border-color:var(--accent-orange); }
.stat-card.highlight::before { background:linear-gradient(90deg, transparent, var(--accent-orange), transparent); }
[data-theme="dark"] .stat-card.highlight { background:linear-gradient(135deg, var(--bg-card) 0%, #2a2518 100%); }
.stat-icon-wrap {
    width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.si-devices  { background:rgba(59,130,246,0.12); color:var(--accent-blue); }
.si-online   { background:rgba(34,197,94,0.12); color:var(--accent-green); }
.si-warning  { background:rgba(239,68,68,0.12); color:var(--accent-red); }
.si-coins    { background:rgba(245,158,11,0.12); color:var(--accent-orange); }
.si-selected { background:rgba(6,182,212,0.12); color:var(--accent-cyan); }
.stat-value { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.stat-label { font-size:11px; color:var(--text-secondary); margin-top:3px; }
.selected-count-badge { color:var(--accent-cyan); font-weight:600; }

/* ===== Toolbar Card ===== */
.toolbar-card {
    margin:0 24px 12px; padding:12px 16px;
    background:var(--bg-card); border:none;
    border-radius:10px; box-shadow:var(--shadow);
    transition:background .3s, border-color .3s;
}
.toolbar-inner {
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.batch-actions { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.batch-label {
    font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase;
    letter-spacing:.5px; margin-right:2px;
}
.batch-divider {
    width:1px; height:18px; background:var(--border-color); margin:0 4px;
}
.toolbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.search-box { position:relative; }
.search-box input {
    width:200px; height:32px; padding:0 30px 0 10px; border:1px solid var(--border-color);
    border-radius:6px; background:var(--bg-input); color:var(--text-primary);
    font-size:12px; outline:none; transition:var(--transition);
}
.search-box input:focus { border-color:var(--accent-blue); box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.search-svg { position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }

/* ===== Buttons ===== */
.btn {
    display:inline-flex; align-items:center; gap:4px; padding:5px 12px;
    border:none; border-radius:6px; font-size:11px; font-weight:500;
    cursor:pointer; transition:var(--transition); white-space:nowrap; color:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.btn:hover { filter:brightness(1.12); transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.2); }
.btn:active { transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,0.15); }
.btn-batch { font-size:11px; padding:5px 10px; }
.btn svg { flex-shrink:0; }

.btn-orange { background:linear-gradient(135deg,#f59e0b,#d97706); }
.btn-blue   { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.btn-green  { background:linear-gradient(135deg,#22c55e,#16a34a); }
.btn-red    { background:linear-gradient(135deg,#ef4444,#dc2626); }
.btn-yellow { background:linear-gradient(135deg,#eab308,#ca8a04); }
.btn-purple { background:linear-gradient(135deg,#a855f7,#9333ea); }
.btn-teal   { background:linear-gradient(135deg,#14b8a6,#0d9488); }
.btn-rose   { background:linear-gradient(135deg,#f43f5e,#e11d48); }

.btn-refresh {
    background:var(--bg-input); border:1px solid var(--border-color); color:var(--text-secondary);
    height:32px; box-shadow:none;
}
.btn-refresh:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(6,182,212,0.1); }

/* Row action buttons — colorful */
.action-btn {
    display:inline-flex; align-items:center; gap:3px; padding:4px 9px;
    border:none; border-radius:5px; font-size:11px; font-weight:500;
    cursor:pointer; transition:var(--transition); white-space:nowrap; color:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
.action-btn:hover { filter:brightness(1.15); transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.18); }
.action-btn:active { transform:translateY(0); }
.action-btn svg { flex-shrink:0; }

.act-shipment  { background:linear-gradient(135deg,#f59e0b,#d97706); }
.act-craft     { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.act-monitor   { background:linear-gradient(135deg,#22c55e,#16a34a); }
.act-monitor.stopped { background:linear-gradient(135deg,#6b7280,#4b5563); }
.act-script    { background:linear-gradient(135deg,#14b8a6,#0d9488); }
.act-script.stopped  { background:linear-gradient(135deg,#6b7280,#4b5563); }
.act-restart   { background:linear-gradient(135deg,#eab308,#ca8a04); }
.act-link      { background:linear-gradient(135deg,#a855f7,#9333ea); }

.actions-cell { display:flex; flex-wrap:wrap; gap:4px; }

/* ===== Table ===== */
.table-container {
    margin:0 24px; border:none; border-radius:10px 10px 0 0;
    overflow:auto; max-height:calc(100vh - 280px); background:var(--bg-secondary); flex:1;
    box-shadow:var(--shadow);
}
.data-table { width:100%; border-collapse:collapse; }
.data-table thead { position:sticky; top:0; z-index:10; }
.data-table th {
    background:var(--bg-card); padding:11px 14px; text-align:left; font-size:12px; font-weight:600;
    color:var(--text-secondary); border-bottom:2px solid var(--border-color); white-space:nowrap; user-select:none;
    transition:var(--transition); letter-spacing:.3px;
}
.data-table th.sortable { cursor:pointer; }
.data-table th.sortable:hover { color:var(--accent-cyan); }
.th-checkbox { width:44px; text-align:center; }
.th-actions { min-width:400px; }

.data-table td {
    padding:9px 14px; font-size:12px; border-bottom:1px solid rgba(42,63,82,0.25);
    color:var(--text-primary); vertical-align:middle;
}
[data-theme="light"] .data-table td { border-bottom-color:var(--border-color); }

.data-table tbody tr { transition:background .15s ease; }
.data-table tbody tr:hover { background:var(--bg-hover); }
.data-table tbody tr:nth-child(even) { background:var(--table-stripe); }
.data-table tbody tr:nth-child(even):hover { background:var(--bg-hover); }
.data-table tbody tr.selected { background:rgba(6,182,212,0.08); box-shadow:inset 3px 0 0 var(--accent-cyan); }
[data-theme="light"] .data-table tbody tr.selected { background:rgba(6,182,212,0.06); }

/* Sort SVG icons */
.sort-svg { margin-left:4px; vertical-align:middle; }
.sort-svg .sort-asc, .sort-svg .sort-desc { fill:var(--text-muted); transition:fill .2s; }
.sort-svg.asc .sort-asc { fill:var(--accent-cyan); }
.sort-svg.asc .sort-desc { fill:var(--text-muted); }
.sort-svg.desc .sort-desc { fill:var(--accent-cyan); }
.sort-svg.desc .sort-asc { fill:var(--text-muted); }

/* Checkbox */
.checkbox-wrapper { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.checkbox-wrapper input[type="checkbox"] {
    appearance:none; -webkit-appearance:none; width:16px; height:16px;
    border:2px solid var(--border-light); border-radius:3px; background:var(--bg-input);
    cursor:pointer; transition:var(--transition); position:relative;
}
.checkbox-wrapper input[type="checkbox"]:checked { background:var(--accent-cyan); border-color:var(--accent-cyan); }
.checkbox-wrapper input[type="checkbox"]:checked::after {
    content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    color:#fff; font-size:11px; font-weight:700;
}
.checkbox-wrapper input[type="checkbox"]:hover { border-color:var(--accent-cyan); }

/* Status tags */
.status-tag {
    display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
    border-radius:20px; font-size:11px; font-weight:500;
}
.status-tag .tag-dot { width:6px; height:6px; border-radius:50%; }

.status-tag.online { background:rgba(34,197,94,0.12); color:#4ade80; }
.status-tag.online .tag-dot { background:#4ade80; }
[data-theme="light"] .status-tag.online { color:#16a34a; }

.status-tag.offline { background:rgba(239,68,68,0.12); color:#f87171; }
.status-tag.offline .tag-dot { background:#f87171; }
[data-theme="light"] .status-tag.offline { color:#dc2626; }

.status-tag.unknown { background:rgba(107,114,128,0.15); color:#9ca3af; }
.status-tag.unknown .tag-dot { background:#9ca3af; }
[data-theme="light"] .status-tag.unknown { color:#6b7280; }

.status-tag.healthy { background:rgba(34,197,94,0.12); color:#4ade80; }
.status-tag.healthy .tag-dot { background:#4ade80; }
[data-theme="light"] .status-tag.healthy { color:#16a34a; }

.status-tag.face-check {
    background:rgba(239,68,68,0.12); color:#f87171; animation:warning-blink 1.5s infinite;
}
.status-tag.face-check .tag-dot { background:#f87171; animation:blink 1s infinite; }
[data-theme="light"] .status-tag.face-check { color:#dc2626; }

.status-tag.monitor-ok { background:rgba(34,197,94,0.12); color:#4ade80; }
.status-tag.monitor-ok .tag-dot { background:#4ade80; }
[data-theme="light"] .status-tag.monitor-ok { color:#16a34a; }

.status-tag.monitor-off { background:rgba(107,114,128,0.15); color:#9ca3af; }
.status-tag.monitor-off .tag-dot { background:#9ca3af; }

@keyframes warning-blink { 0%,100%{opacity:1;} 50%{opacity:.7;} }

.coins-value { font-weight:600; color:var(--accent-orange); font-variant-numeric:tabular-nums; }
[data-theme="light"] .coins-value { color:#b45309; }

.level-badge {
    display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:22px;
    padding:0 8px; border-radius:11px; font-size:11px; font-weight:700;
}
.level-badge.high { background:rgba(168,85,247,0.15); color:#c084fc; }
.level-badge.mid  { background:rgba(59,130,246,0.15); color:#93c5fd; }
.level-badge.low  { background:rgba(107,114,128,0.1); color:#9ca3af; }
[data-theme="light"] .level-badge.high { color:#9333ea; }
[data-theme="light"] .level-badge.mid  { color:#2563eb; }
[data-theme="light"] .level-badge.low  { color:#6b7280; }

.device-id { font-family:'Consolas','Courier New',monospace; font-size:12px; color:var(--accent-cyan); letter-spacing:.5px; font-weight:600; }
[data-theme="light"] .device-id { color:#0891b2; }

/* ===== Pagination ===== */
.pagination-bar {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; gap:12px; flex-wrap:wrap;
    border:none;
    border-radius:0 0 10px 10px;
    margin:0 24px; background:var(--bg-card); transition:background .3s;
    box-shadow:var(--shadow);
}
.pagination-left { font-size:12px; color:var(--text-secondary); }
.pagination-center { display:flex; align-items:center; gap:4px; }
.page-numbers { display:flex; gap:3px; }
.btn-page {
    display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px;
    padding:0 8px; border:1px solid var(--border-color); border-radius:6px;
    background:var(--bg-input); color:var(--text-secondary); font-size:12px; cursor:pointer; transition:var(--transition);
}
.btn-page:hover:not(:disabled) { border-color:var(--accent-cyan); color:var(--accent-cyan); background:var(--bg-hover); }
.btn-page:disabled { opacity:.3; cursor:not-allowed; }
.btn-page.active { background:var(--accent-cyan); border-color:var(--accent-cyan); color:#fff; font-weight:600; box-shadow:0 2px 6px rgba(6,182,212,0.3); }
.btn-page.btn-go { background:var(--accent-blue); border-color:var(--accent-blue); color:#fff; font-weight:600; }
.pagination-right { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.pagination-right select, .pagination-right input {
    height:32px; padding:0 6px; border:1px solid var(--border-color); border-radius:6px;
    background:var(--bg-input); color:var(--text-primary); font-size:12px; outline:none;
    transition:var(--transition);
}
.pagination-right select { width:80px; cursor:pointer; }
.pagination-right input { width:54px; text-align:center; }
.pagination-right select:focus, .pagination-right input:focus { border-color:var(--accent-blue); }
.jump-to { display:flex; align-items:center; gap:4px; }

/* ===== Toast ===== */
.toast-container { position:fixed; top:70px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
    display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:10px;
    background:var(--bg-card); border:1px solid var(--border-color); box-shadow:var(--shadow-lg);
    color:var(--text-primary); font-size:12px; animation:toast-in .3s ease; min-width:260px;
}
.toast svg { flex-shrink:0; }
.toast.success { border-left:4px solid var(--accent-green); }
.toast.error   { border-left:4px solid var(--accent-red); }
.toast.warning { border-left:4px solid var(--accent-orange); }
.toast.info    { border-left:4px solid var(--accent-blue); }
.toast.removing { animation:toast-out .3s ease forwards; }
@keyframes toast-in  { from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes toast-out { from{transform:translateX(0);opacity:1;} to{transform:translateX(100%);opacity:0;} }

/* ===== Modal ===== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
    z-index:1000; display:flex; align-items:center; justify-content:center; animation:fade-in .2s ease;
}
@keyframes fade-in { from{opacity:0;} to{opacity:1;} }
.modal {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px;
    width:420px; box-shadow:var(--shadow-lg); animation:modal-in .3s ease;
}
@keyframes modal-in { from{transform:scale(.95) translateY(-16px);opacity:0;} to{transform:scale(1) translateY(0);opacity:1;} }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border-color); }
.modal-title { font-size:15px; font-weight:600; }
.modal-close { width:28px; height:28px; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; border-radius:4px; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.modal-body { padding:18px; font-size:13px; color:var(--text-secondary); line-height:1.6; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--border-color); }
.btn-cancel { background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-secondary); padding:7px 18px; }
.btn-cancel:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-confirm { background:linear-gradient(135deg,var(--accent-blue),#2563eb); padding:7px 18px; }

/* ===== Empty ===== */
.empty-state { text-align:center; padding:50px 20px; color:var(--text-muted); }
.empty-state svg { margin-bottom:10px; color:var(--text-muted); }
.empty-state .empty-text { font-size:13px; }

/* ===== Responsive ===== */
@media (max-width:1200px) { .stats-panel{flex-wrap:wrap;} .stat-card{min-width:140px;} }
@media (max-width:768px) {
    .header{padding:0 14px;}
    .stats-panel{padding:10px 14px;}
    .toolbar-card{margin:0 14px 10px;}
    .table-container{margin:0 14px;}
    .pagination-bar{margin:0 14px; padding:10px 12px;}
}