/* ========== 全局重置 & 变量 ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --success: #22c55e;
  --success-dark: #16a34a;
  --danger: #ef4444;
  --warning: #f59e0b;
  --bg: #f0f4f8;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
}

body { font-family: 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

.header { background: linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%); color:#fff; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:60px; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,0.2); }
.logo { font-size:20px; font-weight:700; letter-spacing:1px; }
.nav { display:flex; gap:6px; }
.nav-btn { background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.25); padding:7px 16px; border-radius:6px; cursor:pointer; font-size:14px; transition:all 0.2s; }
.nav-btn:hover,.nav-btn.active { background:rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.5); }

.main { padding:24px; max-width:1400px; margin:0 auto; }
.page { display:none; }
.page.active { display:block; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-header h2 { font-size:22px; font-weight:700; color:var(--text); }
.page-desc { font-size:14px; color:var(--text-muted); margin-top:4px; }

.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toolbar input,.toolbar select { padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; outline:none; background:#fff; min-width:200px; }
.toolbar input:focus,.toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.15); }

.btn { padding:8px 18px; border-radius:var(--radius); border:none; cursor:pointer; font-size:14px; font-weight:500; transition:all 0.2s; white-space:nowrap; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:#e2e8f0; color:var(--text); }
.btn-secondary:hover { background:#cbd5e1; }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-ghost:hover { background:#f1f5f9; }
.btn-danger-ghost { background:transparent; color:var(--danger); border:1px solid #fca5a5; }
.btn-danger-ghost:hover { background:#fee2e2; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-in { background:var(--success); color:#fff; padding:12px 36px; font-size:16px; flex:1; }
.btn-in:hover { background:var(--success-dark); }
.btn-out { background:var(--warning); color:#fff; padding:12px 36px; font-size:16px; flex:1; }
.btn-out:hover { background:#d97706; }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:var(--success-dark); }
.btn-success:disabled { background:#86efac; cursor:not-allowed; }

.table-wrap { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:900px; }
thead tr { background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%); }
thead th { color:#fff; padding:12px 14px; text-align:left; font-size:13px; font-weight:600; white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#f8fafc; }
tbody td { padding:11px 14px; font-size:13px; vertical-align:middle; }

.empty-tip { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:15px; }

.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-in { background:#dcfce7; color:#16a34a; }
.badge-out { background:#fef9c3; color:#a16207; }
.op-type-in { color:var(--success); font-weight:600; }
.op-type-out { color:var(--warning); font-weight:600; }

.form-card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 32px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.form-item { display:flex; flex-direction:column; gap:6px; }
.form-item label { font-size:13px; font-weight:600; color:var(--text-muted); }
.form-item input,.form-item select { padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; outline:none; transition:border-color 0.2s,box-shadow 0.2s; background:#fff; }
.form-item input:focus,.form-item select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.15); }
.required { color:var(--danger); }
.form-actions { display:flex; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap; }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:16px; padding:32px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.25); max-width:360px; width:90%; }
.modal-box h3 { font-size:18px; margin-bottom:16px; }
#qrContainer { display:flex; justify-content:center; margin:16px 0; }
#qrContainer canvas,#qrContainer img { border:8px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,0.12); border-radius:8px; display:block; }
.qr-info { font-size:13px; color:var(--text-muted); margin-bottom:16px; line-height:1.6; }
.modal-actions { display:flex; gap:10px; justify-content:center; }

.scan-card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; max-width:620px; margin:0 auto; }
.scan-input-row { display:flex; gap:10px; margin-bottom:20px; }
.scan-input-row input { flex:1; padding:11px 14px; border:2px solid var(--primary); border-radius:var(--radius); font-size:15px; outline:none; }
.scan-input-row input:focus { box-shadow:0 0 0 3px rgba(59,130,246,0.2); }
.device-info-card { background:#f8fafc; border-radius:8px; padding:16px; margin-bottom:20px; }
.device-info-card h3 { font-size:18px; margin-bottom:12px; color:var(--primary-dark); }
.info-grid { display:grid; grid-template-columns:80px 1fr; gap:8px 16px; font-size:14px; }
.info-label { color:var(--text-muted); font-weight:500; }
.status-badge { font-weight:700; font-size:15px; }
.status-in { color:var(--success); }
.status-out { color:var(--warning); }
.op-form { display:flex; flex-direction:column; gap:14px; }
.op-btns { display:flex; gap:12px; margin-top:8px; }
.not-found { text-align:center; padding:30px; color:var(--danger); font-size:15px; background:#fee2e2; border-radius:8px; }

.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(30,41,59,0.92); color:#fff; padding:12px 28px; border-radius:30px; font-size:14px; opacity:0; transition:opacity 0.3s,transform 0.3s; pointer-events:none; z-index:999; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.action-group { display:flex; gap:6px; flex-wrap:wrap; }
.expired { color:var(--danger); font-weight:600; }
.expiring-soon { color:var(--warning); font-weight:600; }

@media (max-width:600px) {
  .header { flex-direction:column; height:auto; padding:12px 16px; gap:10px; }
  .nav { flex-wrap:wrap; justify-content:center; }
  .main { padding:12px; }
  .page-header { flex-direction:column; align-items:flex-start; }
  .form-card { padding:16px; }
  .form-grid { grid-template-columns:1fr; }
  .scan-card { padding:16px; }
  .op-btns { flex-direction:column; }
  .btn-in,.btn-out { padding:14px; }
}