/* ========== Ant Design 风格全局样式 ========== */
:root {
  --primary: #1677ff;
  --primary-hover: #4096ff;
  --primary-active: #0958d9;
  --success: #52c41a;
  --warning: #faad14;
  --error: #ff4d4f;
  --info: #1677ff;
  --text: rgba(0,0,0,.88);
  --text-secondary: rgba(0,0,0,.65);
  --text-tertiary: rgba(0,0,0,.45);
  --border: #d9d9d9;
  --bg: #f5f5f5;
  --bg-container: #fff;
  --radius: 8px;
  --shadow: 0 1px 2px 0 rgba(0,0,0,.03), 0 1px 6px -1px rgba(0,0,0,.02), 0 2px 4px 0 rgba(0,0,0,.02);
  --shadow-lg: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif; font-size:14px; color:var(--text); background:var(--bg); line-height:1.5715; }

/* ========== Header ========== */
.ant-header { background:var(--bg-container); border-bottom:1px solid #f0f0f0; position:sticky; top:0; z-index:100; box-shadow:var(--shadow); }
.ant-header-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; height:56px; padding:0 24px; gap:32px; }
.ant-logo { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--text); text-decoration:none; white-space:nowrap; }
.ant-logo svg { color:var(--primary); }
.ant-nav { display:flex; gap:4px; flex:1; }
.ant-nav-item { padding:8px 16px; border-radius:6px; color:var(--text-secondary); text-decoration:none; font-size:14px; transition:all .2s; white-space:nowrap; }
.ant-nav-item:hover { color:var(--primary); background:rgba(22,119,255,.06); }
.ant-nav-item.active { color:var(--primary); background:rgba(22,119,255,.08); font-weight:500; }
.ant-header-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.ant-user-name { color:var(--text-secondary); font-size:14px; }
.ant-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--error); color:#fff; font-size:11px; margin-left:4px; }

/* ========== Content ========== */
.ant-content { max-width:1400px; margin:0 auto; padding:24px; min-height:calc(100vh - 56px); }

/* ========== Card ========== */
.ant-card { background:var(--bg-container); border-radius:var(--radius); padding:24px; margin-bottom:24px; box-shadow:var(--shadow); }
.ant-card-title { font-size:16px; font-weight:600; margin-bottom:16px; color:var(--text); }

/* ========== Stat Cards ========== */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--bg-container); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); cursor:pointer; transition:all .2s; }
.stat-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.stat-card-label { font-size:14px; color:var(--text-secondary); margin-bottom:8px; }
.stat-card-value { font-size:30px; font-weight:600; color:var(--text); }
.stat-card.active { border:2px solid var(--primary); }
.stat-card.active .stat-card-label, .stat-card.active .stat-card-value { color:var(--primary); }

/* ========== Button ========== */
.ant-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 16px; border-radius:6px; font-size:14px; border:1px solid transparent; cursor:pointer; transition:all .2s; white-space:nowrap; text-decoration:none; }
.ant-btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.ant-btn-primary:hover { background:var(--primary-hover); }
.ant-btn-default { background:#fff; color:var(--text); border-color:var(--border); }
.ant-btn-default:hover { color:var(--primary); border-color:var(--primary); }
.ant-btn-text { background:transparent; color:var(--text-secondary); }
.ant-btn-text:hover { color:var(--primary); background:rgba(22,119,255,.06); }
.ant-btn-danger { background:var(--error); color:#fff; border-color:var(--error); }
.ant-btn-danger:hover { opacity:.85; }
.ant-btn-sm { height:28px; padding:0 10px; font-size:12px; }
.ant-btn-lg { height:44px; padding:0 24px; font-size:16px; }
.ant-btn:disabled { opacity:.5; cursor:not-allowed; }
.ant-btn-block { width:100%; }

/* ========== Table ========== */
.ant-table-wrap { overflow-x:auto; }
.ant-table { width:100%; border-collapse:collapse; }
.ant-table th { padding:12px 16px; text-align:left; border-bottom:1px solid #f0f0f0; background:#fafafa; font-weight:500; color:var(--text); white-space:nowrap; }
.ant-table td { padding:12px 16px; border-bottom:1px solid #f0f0f0; }
.ant-table tr:hover td { background:#fafafa; }

/* ========== Tag ========== */
.ant-tag { display:inline-block; padding:2px 10px; border-radius:4px; font-size:12px; line-height:20px; }
.ant-tag-blue { background:#e6f4ff; color:#1677ff; border:1px solid #91caff; }
.ant-tag-green { background:#f6ffed; color:#52c41a; border:1px solid #b7eb8f; }
.ant-tag-orange { background:#fff7e6; color:#fa8c16; border:1px solid #ffd591; }
.ant-tag-red { background:#fff2f0; color:#ff4d4f; border:1px solid #ffccc7; }
.ant-tag-purple { background:#f9f0ff; color:#722ed1; border:1px solid #d3adf7; }
.ant-tag-cyan { background:#e6fffb; color:#13c2c2; border:1px solid #87e8de; }
.ant-tag-default { background:#fafafa; color:rgba(0,0,0,.65); border:1px solid #d9d9d9; }

/* ========== Pagination ========== */
.ant-pagination { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:16px; }
.ant-pagination button { padding:4px 12px; border-radius:6px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:14px; }
.ant-pagination button:hover { color:var(--primary); border-color:var(--primary); }
.ant-pagination button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.ant-pagination button:disabled { opacity:.5; cursor:not-allowed; }
.ant-pagination-info { color:var(--text-secondary); font-size:14px; }

/* ========== Tabs ========== */
.ant-tabs { display:flex; gap:0; border-bottom:1px solid #f0f0f0; margin-bottom:16px; }
.ant-tab { padding:10px 20px; cursor:pointer; color:var(--text-secondary); border-bottom:2px solid transparent; font-size:14px; transition:all .2s; background:none; border-top:none; border-left:none; border-right:none; }
.ant-tab:hover { color:var(--primary); }
.ant-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:500; }

/* ========== Form ========== */
.ant-form { max-width:600px; }
.ant-form-item { margin-bottom:20px; }
.ant-form-label { display:block; margin-bottom:6px; font-weight:500; color:var(--text); }
.ant-form-label .required { color:var(--error); margin-right:4px; }
.ant-input { width:100%; height:36px; padding:0 12px; border:1px solid var(--border); border-radius:6px; font-size:14px; outline:none; transition:all .2s; }
.ant-input:hover { border-color:var(--primary-hover); }
.ant-input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(22,119,255,.1); }
.ant-input::placeholder { color:#bfbfbf; }
.ant-select { width:100%; height:36px; padding:0 12px; border:1px solid var(--border); border-radius:6px; font-size:14px; outline:none; background:#fff; cursor:pointer; appearance:auto; }
.ant-select:focus { border-color:var(--primary); }
.ant-textarea { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:6px; font-size:14px; outline:none; resize:vertical; min-height:80px; font-family:inherit; }
.ant-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(22,119,255,.1); }

/* ========== Search Bar ========== */
.search-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.search-bar .ant-input { width:240px; flex-shrink:0; }

/* ========== Timeline ========== */
.ant-timeline { padding:0; list-style:none; }
.ant-timeline-item { position:relative; padding:0 0 24px 28px; }
.ant-timeline-item:last-child { padding-bottom:0; }
.ant-timeline-item::before { content:''; position:absolute; left:7px; top:8px; bottom:0; width:2px; background:#f0f0f0; }
.ant-timeline-item:last-child::before { display:none; }
.ant-timeline-item::after { content:''; position:absolute; left:3px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--primary); border:2px solid #e6f4ff; }
.ant-timeline-time { color:var(--text-tertiary); font-size:12px; margin-bottom:4px; }
.ant-timeline-desc { color:var(--text); }
.ant-timeline-location { color:var(--text-secondary); font-size:12px; }

/* ========== Modal ========== */
.ant-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; }
.ant-modal { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); width:520px; max-height:80vh; overflow-y:auto; }
.ant-modal-header { padding:16px 24px; border-bottom:1px solid #f0f0f0; font-size:16px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.ant-modal-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-secondary); }
.ant-modal-body { padding:24px; }
.ant-modal-footer { padding:12px 24px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; gap:8px; }
.hidden { display:none !important; }

/* ========== Detail Info ========== */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.detail-item { }
.detail-label { color:var(--text-secondary); font-size:13px; margin-bottom:4px; }
.detail-value { color:var(--text); font-size:14px; }

/* ========== Login/Register ========== */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.auth-card { width:420px; padding:40px; background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.auth-card h1 { text-align:center; margin-bottom:8px; font-size:24px; color:#1a1a1a; }
.auth-card .subtitle { text-align:center; color:#999; margin-bottom:32px; font-size:14px; }
.auth-card .ant-form-item { margin-bottom:24px; }
.auth-card .ant-form-item:last-child { margin-bottom:0; }
.auth-link { text-align:center; margin-top:16px; color:var(--text-secondary); font-size:14px; }
.auth-link a { color:var(--primary); }

/* ========== Empty ========== */
.ant-empty { text-align:center; padding:40px 0; color:var(--text-tertiary); }
.ant-empty svg { width:64px; height:64px; margin-bottom:12px; opacity:.3; }

/* ========== Loading ========== */
.ant-spin { display:flex; justify-content:center; padding:40px; }
.ant-spin::after { content:''; width:32px; height:32px; border:3px solid #f0f0f0; border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ========== Alert ========== */
.ant-alert { padding:8px 16px; border-radius:6px; margin-bottom:16px; font-size:14px; }
.ant-alert-error { background:#fff2f0; border:1px solid #ffccc7; color:var(--error); }
.ant-alert-success { background:#f6ffed; border:1px solid #b7eb8f; color:var(--success); }
.ant-alert-info { background:#e6f4ff; border:1px solid #91caff; color:var(--info); }

/* ========== Responsive ========== */
@media (max-width:768px) {
  .ant-header-inner { padding:0 12px; gap:12px; }
  .ant-nav-item { padding:6px 10px; font-size:13px; }
  .stat-cards { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .ant-content { padding:16px; }
  .search-bar { flex-direction:column; align-items:stretch; }
  .search-bar .ant-input { width:100%; }
  .auth-card { width:90%; padding:24px; }
  .ant-modal { width:90%; }
}

/* ========== Chart container ========== */
.chart-box { background:#fff; border-radius:var(--radius); padding:24px; margin-bottom:24px; box-shadow:var(--shadow); }
.chart-box canvas { width:100% !important; max-height:350px; }

/* ========== Toggle switch ========== */
.ant-switch { position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; }
.ant-switch input { opacity:0; width:0; height:0; }
.ant-switch .slider { position:absolute; inset:0; background:#d9d9d9; border-radius:22px; transition:.3s; }
.ant-switch .slider::before { content:''; position:absolute; left:2px; top:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.3s; }
.ant-switch input:checked + .slider { background:var(--primary); }
.ant-switch input:checked + .slider::before { transform:translateX(18px); }

/* ========== Auto-detect badge ========== */
#detect-badge {
    animation: fadeInDown .25s ease;
}
#detect-status {
    animation: fadeInDown .25s ease;
}
@keyframes fadeInDown {
    from { opacity:0; transform:translateY(-4px); }
    to   { opacity:1; transform:translateY(0); }
}

/* utility */
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }
.mt-16 { margin-top:16px; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.w-full { width:100%; }