:root { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #1f2937; background: #f5f7fa; font-synthesis: none; --primary: #1677ff; --muted: #697586; --border: #e3e8ef; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-size: 14px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { border: 1px solid #d6dde6; border-radius: 6px; background: white; color: #344054; padding: 8px 16px; min-height: 38px; }
button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
button:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 3px solid #1677ff; outline-offset: 3px; }
input, select { border: 1px solid #d6dde6; border-radius: 6px; background: white; color: #344054; min-height: 38px; padding: 7px 10px; max-width: 100%; }
input[type="checkbox"] { accent-color: var(--primary); min-height: 0; width: 15px; height: 15px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; letter-spacing: -.6px; line-height: 1.4; margin-bottom: 8px; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
small { font-size: 12px; font-weight: 400; }
.skip-link { position: absolute; top: -60px; left: 20px; background: white; z-index: 10; padding: 10px; }
.skip-link:focus { top: 8px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 200px; color: #dce4ee; background: #001529; display: flex; flex-direction: column; padding: 24px 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 650; padding: 0 8px 42px; color: white; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #1677ff; font-size: 23px; }
.nav-label { color: #8395ab; padding: 0 12px 12px; font-size: 11px; letter-spacing: 1px; }
.nav-item { display: block; padding: 10px 12px; margin-bottom: 4px; border-radius: 6px; color: #c9d4e2; font-weight: 500; }
.nav-item:hover { color: white; background: #ffffff12; }
.nav-item.active { color: white; background: #1677ff; }
.nav-item span { padding-right: 9px; }
.source-card { margin-top: auto; border-top: 1px solid #26394d; padding: 22px 10px 0; font-size: 12px; }
.source-card p { color: #93a4b8; margin-top: 5px; }
.source-dot { display: inline-block; width: 6px; height: 6px; background: #e5aa45; border-radius: 50%; margin-right: 7px; }
.workspace { margin-left: 200px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: white; border-bottom: 1px solid var(--border); min-height: 60px; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.topbar strong { font-weight: 500; color: #27364b; }
.topbar-action { border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; color: #526277; }
.topbar-action:hover { border-color: var(--primary); color: var(--primary); }
.badge { background: #eff3f8; border-radius: 4px; padding: 3px 9px; font-size: 11px; color: #526277; white-space: nowrap; }
.test-banner { margin: 20px 32px 0; background: #fff9ed; border: 1px solid #f1dfb8; border-radius: 7px; color: #806025; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.test-banner strong { padding-right: 14px; }
.test-banner label { white-space: nowrap; }
.test-banner select { min-height: 30px; font-size: 12px; margin-left: 7px; padding: 3px 8px; border-color: #e5d5b7; }
main { padding: 28px 32px 48px; flex: 1; min-width: 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 30px; }
.page-heading p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.eyebrow { font-size: 10px; color: #8290a3; font-weight: 600; letter-spacing: 1.8px; margin-bottom: 8px; }
.count-badge { border: 1px solid var(--border); color: var(--muted); padding: 5px 12px; background: white; border-radius: 20px; font-size: 12px; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.template-card { background: white; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.template-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px #0015290c; border-color: #b5cceb; }
.template-art { height: 124px; background: #edf4ff; display: flex; align-items: center; justify-content: space-between; padding: 28px; border-bottom: 1px solid #e6edf7; overflow: hidden; }
.template-art > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; color: #1677ff; font-size: 30px; background: #ffffffc9; }
.art-1 { background: #f1f6f5; }.art-1 > span { color: #168c80; }.art-2 { background: #f3f1fa; }.art-2 > span { color: #8163bf; }
.mini-bars { display: flex; gap: 6px; height: 60px; align-items: flex-end; transform: rotate(-5deg); opacity: .6; }
.mini-bars i { width: 9px; height: 50%; border-radius: 2px; background: #9bbfed; }.mini-bars i:nth-child(2n) { height: 85%; }.mini-bars i:nth-child(3n) { height: 65%; }.art-1 .mini-bars i { background: #a2ccc1; }.art-2 .mini-bars i { background: #b8a8db; }
.template-body { padding: 24px; }.template-number { color: #8c98a8; font-size: 10px; letter-spacing: 1px; }.template-body h2 { margin: 8px 0 12px; font-size: 17px; }.template-body p { font-size: 13px; color: var(--muted); min-height: 44px; }.template-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf0f5; padding-top: 20px; margin-top: 25px; color: #77869a; font-size: 11px; }.template-bottom b { font-size: 18px; color: #1677ff; }
.back-link { font-size: 12px; color: #687990; }.back-link:hover { color: var(--primary); }.detail-heading { margin: 18px 0 22px; }.detail-heading h1 { font-size: 25px; }
.panel { background: white; border: 1px solid var(--border); border-radius: 9px; }
.login-panel { max-width: 560px; padding: 28px; margin: 28px auto; }
.login-panel p { color: var(--muted); margin: 8px 0 20px; }
.filters { padding: 22px 24px 15px; }.filter-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; }.filter-row > label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; flex: 1; min-width: 156px; }.filter-row input { width: 100%; }.primary-button { color: white; background: #1677ff; border-color: #1677ff; min-width: 100px; }.primary-button:hover:not(:disabled) { color: white; background: #0d68e5; }.filters fieldset { border: 0; padding: 0; margin: 17px 0 0; }.filters legend { font-size: 12px; margin-bottom: 9px; }.filters legend small { color: #8d99a9; margin-left: 8px; }.devices { display: flex; flex-wrap: wrap; gap: 10px; }.device-chip { border: 1px solid #e0e6ef; border-radius: 5px; padding: 5px 10px; display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; }.device-chip:has(input:checked) { background: #f0f6ff; border-color: #a9cbff; }.device-chip span { color: #8190a3; font-size: 10px; }.field-hint { font-size: 11px; margin-top: 14px; color: #8a97a8; }.field-error { font-size: 12px; color: #b33943; margin-top: 7px; }.field-error:empty { display: none; }
.results-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 28px 0 16px; }.results-heading h2 { font-size: 17px; }.results-heading p { color: var(--muted); font-size: 11px; margin-top: 3px; }.export-action { text-align: right; display: flex; flex-direction: column; gap: 3px; }.export-action small { color: #8390a2; font-size: 10px; }
.blank-state { border: 1px solid var(--border); border-radius: 9px; background: white; padding: 68px 20px; text-align: center; }.blank-icon { display: inline-grid; place-items: center; width: 50px; height: 50px; background: #f0f5fb; border-radius: 12px; font-size: 28px; color: #9badc5; margin-bottom: 16px; }.blank-state h3 { font-size: 16px; }.blank-state p { color: #8090a3; font-size: 12px; margin-top: 9px; }.blank-state.error .blank-icon { background: #fff1ef; color: #d06f69; }.retry-button { display: block; margin: 15px auto; }
.result-meta { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; color: #7b889a; font-size: 11px; margin-bottom: 16px; }.quality-badge { color: #287263; background: #eaf5f0; border-radius: 4px; padding: 3px 8px; }.quality-badge.warning { color: #926b25; background: #fff2d8; }.notice { border-left: 3px solid #d7ae58; background: #fff8e9; padding: 10px 14px; color: #896c34; font-size: 12px; margin-bottom: 16px; }
.device-result { padding: 22px 24px; margin-bottom: 22px; overflow: hidden; }.device-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #edf0f5; padding-bottom: 17px; }.device-heading > div { display: flex; gap: 10px; align-items: center; }.device-heading h2 { font-size: 15px; }.device-heading small { color: #8896a9; margin-left: 8px; font-size: 10px; }.device-heading > span { font-size: 11px; color: #8896a9; }.device-icon { background: #edf4ff; color: #5487cb; border-radius: 5px; padding: 3px 8px; }
.metrics { display: flex; align-items: center; padding: 20px 0; gap: 36px; }.metrics > div { min-width: 120px; }.metrics span { display: block; color: #7b889a; font-size: 11px; }.metrics strong { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }.metrics small { color: #8896a9; }.metrics p { margin-left: auto; color: #8490a2; font-size: 11px; }
.charts-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr); gap: 18px; }.chart-panel { background: #fbfcfe; border: 1px solid #eaf0f6; border-radius: 7px; padding: 16px; min-width: 0; }.chart-panel h3 small { font-size: 10px; color: #8997a8; margin-left: 7px; }.chart-panel svg { width: 100%; display: block; margin-top: 6px; }.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 13px 0 7px; font-size: 10px; color: #6d7b8e; }.legend span { display: flex; align-items: center; gap: 5px; }.legend i { display: inline-block; height: 7px; width: 7px; border-radius: 2px; }.axis-label { font-size: 11px; fill: #7f8ca0; }.grid-line { stroke: #e6ebf2; stroke-dasharray: 3 4; }.shift-bars { margin: 34px 0 24px; }.shift-row { display: flex; gap: 12px; align-items: center; margin-bottom: 27px; font-size: 12px; }.shift-row > span { min-width: 64px; }.shift-row small { display: block; font-size: 9px; color: #8b98a8; }.shift-row strong { min-width: 37px; font-size: 17px; font-weight: 600; }.shift-row strong small { display: inline; }.bar-track { background: #edf2f9; height: 17px; border-radius: 3px; flex: 1; overflow: hidden; }.shift-fill { background: #699ee8; height: 100%; border-radius: 3px; }.chart-note { color: #8491a4; font-size: 10px; }.empty-chart { padding: 24px 8px; color: #8a96a7; font-size: 12px; text-align: center; }.stacked-bar { display: flex; background: #eff2f6; height: 26px; border-radius: 4px; overflow: hidden; margin-top: 20px; }.axis-ends { display: flex; justify-content: space-between; font-size: 10px; color: #8b98aa; margin-top: 5px; gap: 15px; }
.table-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 24px 0 12px; }.table-heading > span { font-size: 10px; color: #8b97a8; }.table-scroll { overflow: auto; border: 1px solid #e8edf3; border-radius: 5px; }table { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; }caption { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid #eef1f6; font-variant-numeric: tabular-nums; }th { background: #f7f9fc; color: #6e7b8f; font-weight: 500; position: sticky; top: 0; }tbody tr:last-child td { border-bottom: 0; }tbody tr:hover { background: #f8fbff; }.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 11px; color: #8290a2; }.pagination button { min-height: 28px; font-size: 11px; padding: 4px 9px; margin-left: 7px; }.quality-notes { margin-top: 16px; font-size: 11px; color: #8a713d; }.quality-notes summary { cursor: pointer; }.quality-notes ul { padding-left: 20px; margin-bottom: 0; }
footer { color: #9aa5b4; font-size: 10px; border-top: 1px solid #e8ecf2; margin: 0 32px; padding: 15px 0; display: flex; justify-content: space-between; gap: 16px; }
.embedded-mes .sidebar, .embedded-mes .topbar, .embedded-mes footer { display: none; }
.embedded-mes .workspace { margin-left: 0; min-height: 100vh; }
.embedded-mes main { padding-top: 20px; }
@media (max-width: 1150px) { .sidebar { width: 168px; }.workspace { margin-left: 168px; }main { padding: 24px; }.topbar { padding: 0 24px; }.test-banner { margin: 16px 24px 0; }.test-banner > div span { display: block; }.template-grid { gap: 14px; }.template-body { padding: 17px; }.template-body h2 { font-size: 15px; }.template-art { padding: 20px; }.charts-grid { grid-template-columns: 1fr; }.metrics { gap: 22px; } }
@media (max-width: 760px) { .sidebar { position: static; width: auto; padding: 12px 20px; flex-direction: row; align-items: center; justify-content: space-between; }.brand { padding: 0; font-size: 20px; }.brand-mark { height: 30px; width: 30px; font-size: 19px; }.nav-label, .source-card { display: none; }.nav-item { font-size: 12px; padding: 6px 12px; }.workspace { margin-left: 0; }.topbar { min-height: 45px; padding: 0 18px; }.test-banner { margin: 14px 16px 0; flex-wrap: wrap; gap: 9px; }main { padding: 20px 16px 35px; }.page-heading { align-items: flex-start; }h1, .detail-heading h1 { font-size: 22px; }.count-badge { display: none; }.template-grid { grid-template-columns: 1fr; }.template-art { height: 86px; }.template-body p { min-height: 0; }.template-bottom { margin-top: 16px; padding-top: 12px; }.filters { padding: 16px; }.filter-row { gap: 12px; }.filter-row > label { min-width: 145px; }.filter-row .primary-button { width: 100%; }.device-chip { flex-wrap: wrap; }.device-result { padding: 16px; }.metrics { flex-wrap: wrap; gap: 18px; }.metrics p { margin-left: 0; width: 100%; }.device-heading small { display: block; margin-left: 0; }.chart-panel { padding: 12px; }.results-heading { gap: 10px; }.export-action button { padding: 7px 9px; font-size: 12px; }.results-heading p { max-width: 220px; }.result-meta { gap: 7px; }.pagination { gap: 10px; flex-wrap: wrap; }.table-heading { align-items: flex-start; }footer { margin: 0 16px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.metrics.duration-metrics { flex-wrap: wrap; }
.metrics.duration-metrics strong { font-size: 20px; line-height: 1.5; }

.personnel-filters select[multiple] { min-width: 165px; min-height: 86px; padding: 4px 7px; }
.personnel-extra { margin-top: 14px; }
.personnel-detail { background: #fbfcfe; border: 1px solid #e8edf3; border-radius: 6px; padding: 10px 14px; margin-top: 10px; color: #65748a; font-size: 12px; }
.personnel-detail summary { cursor: pointer; color: #3f6fae; }
.personnel-detail p { margin: 7px 0 0; }

.device-select-all { display: inline-flex; align-items: center; gap: 6px; margin-left: 18px; font-weight: 400; cursor: pointer; }

.art-3 { background: #fff4eb; }.art-3 > span { color: #b86a2c; }.art-3 .mini-bars i { background: #e2b48e; }

.runtime-timeline { position: relative; height: 26px; margin-top: 20px; border: 1px solid #d9dee7; border-radius: 4px; overflow: hidden; background: #fff; }
.runtime-timeline > span { position: absolute; top: 0; bottom: 0; box-shadow: inset 1px 0 rgba(255,255,255,.35); }