:root{--color-bg: #f5f7fa;--color-surface: #ffffff;--color-surface-muted: #f8fafc;--color-border: #d7dde6;--color-border-strong: #b8c2d1;--color-text: #1d2633;--color-text-muted: #637083;--color-text-soft: #8793a5;--color-primary: #2458d3;--color-primary-hover: #1f49b7;--color-green: #15803d;--color-green-bg: #e8f7ee;--color-amber: #b45309;--color-amber-bg: #fff4db;--color-red: #b42318;--color-red-bg: #fee9e7;--color-blue-bg: #e9f0ff;--color-gray-bg: #eef1f5;--shadow-drawer: -16px 0 32px rgba(25, 33, 46, .16);--font-main: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--radius-sm: 4px;--radius-md: 6px;--header-height: 48px;--sidebar-width: 188px;--table-row-height: 34px}*{box-sizing:border-box}html,body,#root{width:100%;height:100%}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-main);font-size:var(--font-size-sm)}button,input,select,textarea{font:inherit}button{cursor:pointer}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(320px,440px) 1fr;background:linear-gradient(90deg,#172030c7,#2458d34d),url(https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1800&q=80);background-size:cover;background-position:center}.login-panel{display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding:48px 40px;background:#fffffff0;border-right:1px solid rgba(255,255,255,.6)}.login-title{margin:0;font-size:24px;letter-spacing:0}.login-field{display:grid;gap:var(--space-2)}.login-field input{height:34px;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0 10px}.primary-button{min-height:32px;border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:#fff;background:var(--color-primary);padding:0 12px}.primary-button:hover{background:var(--color-primary-hover)}.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--header-height) 1fr}.topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);background:#172030;color:#fff;border-bottom:1px solid #0d1420}.topbar-title{display:flex;align-items:center;gap:var(--space-3);font-weight:700}.topbar-mark{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid rgba(255,255,255,.36);border-radius:var(--radius-sm);color:#e4ebf7;font-size:var(--font-size-xs);font-weight:400}.topbar-meta{display:flex;align-items:center;gap:var(--space-3);color:#dce5f2;font-size:var(--font-size-xs)}.sidebar{grid-row:2;background:#fff;border-right:1px solid var(--color-border);padding:var(--space-3) var(--space-2)}.nav-button{width:100%;min-height:34px;display:flex;align-items:center;gap:var(--space-2);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);padding:0 var(--space-3);text-align:left}.nav-button:hover{background:var(--color-surface-muted)}.nav-button.active{color:var(--color-primary);background:var(--color-blue-bg);font-weight:700}.main-content{grid-row:2;min-width:0;padding:var(--space-4)}.page{display:grid;gap:var(--space-3)}.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}.page-title{margin:0 0 var(--space-1);font-size:var(--font-size-xl);letter-spacing:0}.page-subtitle{margin:0;color:var(--color-text-muted);font-size:var(--font-size-xs)}.api-readiness-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border:1px solid #f1c27d;border-radius:var(--radius-md);background:#fff8e8;color:#7a4100;padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.api-readiness-banner strong{color:#572c00}.filter-bar{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr)) auto;gap:var(--space-2);align-items:end;padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.filter-item{display:grid;gap:var(--space-1)}.filter-item label{color:var(--color-text-muted);font-size:var(--font-size-xs)}.filter-item input,.filter-item select{height:30px;min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;padding:0 8px}.filter-actions{display:flex;gap:var(--space-2)}.icon-button,.secondary-button{min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);background:#fff;padding:0 10px;white-space:nowrap}.icon-button{width:30px;padding:0}.icon-button:hover,.secondary-button:hover{border-color:var(--color-primary);color:var(--color-primary)}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.table-shell{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.table-scroll{width:100%;overflow-x:auto}.compat-table{width:100%;min-width:1180px;border-collapse:collapse;font-size:var(--font-size-xs)}.compat-table th,.compat-table td{height:var(--table-row-height);border-bottom:1px solid var(--color-border);padding:0 8px;text-align:left;vertical-align:middle;white-space:nowrap}.compat-table th{background:#eef3f9;color:#344153;font-weight:700}.compat-table tr:hover td{background:#f8fbff}.table-empty{padding:var(--space-6);text-align:center;color:var(--color-text-muted)}.status-tag{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:700}.status-blue{color:var(--color-primary);background:var(--color-blue-bg)}.status-green{color:var(--color-green);background:var(--color-green-bg)}.status-amber{color:var(--color-amber);background:var(--color-amber-bg)}.status-red{color:var(--color-red);background:var(--color-red-bg)}.status-gray{color:var(--color-text-muted);background:var(--color-gray-bg)}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#1118272e}.detail-drawer{position:fixed;top:0;right:0;z-index:40;width:min(560px,92vw);height:100vh;display:grid;grid-template-rows:auto 1fr;background:#fff;box-shadow:var(--shadow-drawer)}.drawer-header{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border-bottom:1px solid var(--color-border);padding:0 var(--space-4)}.drawer-title{margin:0;font-size:var(--font-size-lg)}.drawer-body{overflow:auto;padding:var(--space-4)}.detail-grid{border:1px solid var(--color-border);border-bottom:0}.detail-row{display:grid;grid-template-columns:120px 1fr}.detail-grid dt,.detail-grid dd{min-height:34px;margin:0;border-bottom:1px solid var(--color-border);padding:8px 10px}.detail-grid dt{color:var(--color-text-muted);background:var(--color-surface-muted)}.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:var(--space-3)}.metric-card,.work-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:var(--space-3)}.metric-label{color:var(--color-text-muted);font-size:var(--font-size-xs)}.metric-value{margin-top:var(--space-2);font-size:22px;font-weight:700}.work-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:var(--space-3)}.work-card{display:grid;gap:var(--space-2)}.work-card h3{margin:0;font-size:var(--font-size-lg)}.work-card p{margin:0;color:var(--color-text-muted);line-height:1.6}.import-export-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:var(--space-3)}@media(max-width:920px){.login-page,.app-shell{grid-template-columns:1fr}.sidebar{display:flex;gap:var(--space-2);overflow-x:auto;grid-column:1;grid-row:2;border-right:0;border-bottom:1px solid var(--color-border)}.nav-button{width:auto;min-width:108px}.main-content{grid-row:3}.filter-bar{grid-template-columns:repeat(2,minmax(140px,1fr))}.dashboard-grid,.work-grid,.import-export-grid{grid-template-columns:1fr}}.api-readiness-error{border-color:var(--color-red);background:var(--color-red-bg);color:var(--color-red)}.api-readiness-error strong{color:var(--color-red)}