* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background-color: #f0f4f8; min-height: 100vh; display: flex; flex-direction: column; }

        .header { background: linear-gradient(135deg, #1e4d8c 0%, #2c5aa0 100%); color: white; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .header h1 { font-size: 20px; font-weight: 600; }
        .header-right span { font-size: 14px; opacity: 0.9; }

        .container { display: flex; flex: 1; overflow: hidden; }
        .sidebar { width: 220px; background-color: #1a365d; color: white; padding: 16px 0; overflow-y: auto; }
        .sidebar-title { font-size: 16px; font-weight: 600; padding: 12px 20px; color: #7eb8ea; border-bottom: 1px solid #2d4a6f; margin-bottom: 8px; }
        .nav-item { padding: 12px 24px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; position: relative; }
        .nav-item:hover { background-color: #2c5282; }
        .nav-item.active { background-color: #2c5282; border-left: 4px solid #4facfe; }

        .main-content { flex: 1; padding: 24px; overflow-y: auto; background-color: #f0f4f8; }
        .page { display: none; animation: fadeIn 0.3s ease; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
        .page-title { font-size: 20px; font-weight: 600; color: #1a365d; }
        .page-subtitle { font-size: 14px; color: #6b7280; margin-top: 4px; }
        .update-time { font-size: 13px; color: #6b7280; }

        .stats-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 20px; }
        .stat-card { background: white; padding: 18px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; flex-direction: column; border-top: 3px solid #4facfe; }
        .stat-card .label { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
        .stat-card .value { font-size: 24px; font-weight: 700; color: #1e4d8c; }
        .stat-card .sub { font-size: 12px; margin-top: 4px; color: #6b7280; }
        .stat-card .change { font-size: 12px; margin-top: 4px; }
        .change.up { color: #10b981; }
        .change.down { color: #ef4444; }

        .filter-bar { background: white; padding: 16px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 20px; }
        .filter-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
        .filter-row + .filter-row { margin-top: 12px; }
        .search-box { flex: 1; min-width: 240px; position: relative; }
        .search-box input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px; }
        .search-box::before { content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; }
        .filter-item { display: flex; align-items: center; gap: 6px; }
        .filter-item label { font-size: 13px; color: #4b5563; white-space: nowrap; }
        .filter-item select { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
        .btn { padding: 8px 18px; border-radius: 4px; font-size: 14px; cursor: pointer; border: none; transition: all 0.3s; }
        .btn-primary { background-color: #1e4d8c; color: white; }
        .btn-primary:hover { background-color: #2c5aa0; }
        .btn-secondary { background-color: white; color: #4b5563; border: 1px solid #d1d5db; }
        .btn-secondary:hover { background-color: #f3f4f6; }

        .table-panel { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
        .table-wrapper { overflow-x: auto; }
        .data-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1400px; }
        .data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
        .data-table thead th { background-color: #1e4d8c; color: white; font-weight: 600; position: sticky; top: 0; cursor: pointer; user-select: none; z-index: 2; }
        .data-table thead th:hover { background-color: #2c5aa0; }
        .data-table tbody tr:hover { background-color: #f0f7ff; }
        .data-table tbody tr:nth-child(even) { background-color: #f9fafb; }
        .data-table tbody tr:nth-child(even):hover { background-color: #f0f7ff; }
        .data-table td.col-fixed-left { position: sticky; left: 0; background: white; z-index: 1; }
        .data-table td.col-fixed-right { position: sticky; right: 0; background: white; z-index: 1; }
        .data-table thead th.col-fixed-left { left: 0; z-index: 4; background-color: #1e4d8c; }
        .data-table thead th.col-fixed-right { right: 0; z-index: 4; background-color: #1e4d8c; }
        .data-table thead th.col-fixed-left:hover,
        .data-table thead th.col-fixed-right:hover { background-color: #2c5aa0; }
        .data-table tbody tr:hover td.col-fixed-left,
        .data-table tbody tr:hover td.col-fixed-right { background: #f0f7ff; }
        .data-table tbody tr:nth-child(even) td.col-fixed-left,
        .data-table tbody tr:nth-child(even) td.col-fixed-right { background: #f9fafb; }
        .data-table tbody tr:nth-child(even):hover td.col-fixed-left,
        .data-table tbody tr:nth-child(even):hover td.col-fixed-right { background: #f0f7ff; }

        .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
        .badge-red { background-color: #fee2e2; color: #991b1b; }
        .badge-orange { background-color: #ffedd5; color: #9a3412; }
        .badge-yellow { background-color: #fef3c7; color: #92400e; }
        .badge-blue { background-color: #dbeafe; color: #1e4d8c; }
        .badge-green { background-color: #d1fae5; color: #065f46; }
        .badge-gray { background-color: #f3f4f6; color: #4b5563; }
        .badge-overload { background-color: #fee2e2; color: #991b1b; animation: blink 1.2s infinite; }
        @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

        .change-val.up { color: #10b981; font-weight: 600; }
        .change-val.down { color: #ef4444; font-weight: 600; }
        .change-val.flat { color: #9ca3af; }

        .link { color: #2563eb; cursor: pointer; text-decoration: none; }
        .link:hover { text-decoration: underline; }

        .summary-row td { background-color: #eef4fb !important; font-weight: 700; color: #1a365d; }

        .pagination { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-top: 1px solid #e5e7eb; }
        .pagination-info { font-size: 13px; color: #6b7280; }
        .pagination-btns { display: flex; gap: 6px; }
        .pagination-btns button { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
        .pagination-btns button.active { background-color: #1e4d8c; color: white; border-color: #1e4d8c; }
        .pagination-btns button:disabled { opacity: 0.5; cursor: not-allowed; }
        /* Embedded模式：嵌入到主框架时隐藏header和sidebar */
        html, body.embedded { height: 100%; min-height: 0; max-height: 100%; overflow: hidden; }
        body.embedded .header { display: none; }
        body.embedded .sidebar { display: none; }
        body.embedded .container { flex: 1; min-height: 0; height: 100%; overflow: hidden; }
        body.embedded .container > .main-content { flex: 1; min-height: 0; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; padding: 16px; }