:root {
  --page: #f4f7fb;
  --ink: #17283c;
  --muted: #8292a7;
  --line: #e2e9f1;
  --green: #11b981;
  --green-soft: #d9f8eb;
  --amber: #f5a10b;
  --amber-soft: #fff0c9;
  --red: #f24363;
  --red-soft: #ffe1e8;
  --slate: #cbd6e3;
  --white: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--page); }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1420px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 40px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.title-line { display: flex; align-items: center; gap: 14px; }
h1 { margin: 0; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.2; letter-spacing: 0; }
.site-name { color: #8c9bad; font-size: 19px; }
.subheading { margin: 9px 0 0 48px; color: #718299; font-size: 17px; }
.pulse-icon { display: flex; align-items: center; gap: 3px; height: 25px; }
.pulse-icon i { display: block; width: 3px; border-radius: 2px; background: #7c8999; transform: skew(-15deg); }
.pulse-icon i:nth-child(1), .pulse-icon i:nth-child(5) { height: 10px; }
.pulse-icon i:nth-child(2), .pulse-icon i:nth-child(4) { height: 18px; }
.pulse-icon i:nth-child(3) { height: 26px; background: #4d6179; }
.refresh-button { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 19px; color: #738399; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 5px 16px rgba(28, 54, 83, .06); }
.refresh-button strong { color: #2563df; font-size: 17px; }
.refresh-icon { font-size: 27px; line-height: 1; color: #718093; }
.summary-bar { display: flex; align-items: center; gap: 33px; min-height: 68px; padding: 0 26px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 5px 12px rgba(28, 54, 83, .05); }
.summary-item { display: flex; align-items: baseline; gap: 14px; color: #77889e; font-size: 17px; }
.summary-item strong { color: #21364e; font-size: 20px; }
.summary-statuses { display: flex; align-items: center; gap: 20px; margin-left: auto; color: #8391a4; }
.summary-status { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.summary-status i, .legend-dot { width: 11px; height: 11px; display: inline-block; border-radius: 50%; }
.normal i, .legend-dot.success { background: var(--green); }
.warning i, .legend-dot.warning { background: var(--amber); }
.error i, .legend-dot.error { background: var(--red); }
.unknown i, .legend-dot.unknown { background: #fff; border: 1px solid #e1e8f0; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 31px 0 25px; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tab { padding: 10px 16px; color: #8a9aaf; border: 1px solid transparent; border-radius: 21px; background: transparent; }
.filter-tab.active { color: #2267dd; border-color: #b7d2ff; background: #eaf2ff; box-shadow: 0 2px 5px rgba(52, 116, 226, .08); }
.filter-tab span { margin-left: 4px; }
.search-box { display: flex; align-items: center; gap: 8px; width: 210px; padding: 9px 13px; color: #8492a5; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.search-box input { width: 100%; color: var(--ink); border: 0; outline: 0; background: transparent; }
.model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.model-card { position: relative; min-width: 0; padding: 29px 30px 26px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 6px 13px rgba(28, 54, 83, .06); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.model-title { display: flex; align-items: center; min-width: 0; gap: 13px; }
.model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; font-weight: 650; }
.status-pill { flex: 0 0 auto; padding: 5px 12px; border-radius: 14px; font-size: 14px; font-weight: 600; }
.status-pill.normal { color: #0aa773; background: var(--green-soft); }
.status-pill.warning { color: #c78500; background: var(--amber-soft); }
.status-pill.error { color: #e83e5d; background: var(--red-soft); }
.status-pill.unknown { color: #92a1b4; border: 1px solid #e1e8f0; background: #fff; }
.card-metrics { display: flex; align-items: baseline; gap: 9px; color: #7890a8; white-space: nowrap; font-size: 16px; }
.card-metrics strong { color: #1d2f45; font-size: 20px; }
.card-metrics .divider { color: #ccd5df; }
.hour-strip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 5px; margin-top: 25px; }
.hour-cell { position: relative; min-width: 0; aspect-ratio: 1.06 / 1; border-radius: 10px; background: var(--slate); transition: transform .15s ease, box-shadow .15s ease; }
.hour-cell.success { background: var(--green); }
.hour-cell.warning { background: var(--amber); }
.hour-cell.error { background: var(--red); }
.hour-cell.unknown { background: #fff; border: 1px solid #e1e8f0; }
.hour-cell:hover, .hour-cell:focus-visible { z-index: 2; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(25, 50, 81, .17); outline: 0; }
.card-axis { display: flex; justify-content: space-between; margin-top: 13px; color: #9aabba; font-size: 14px; }
.hour-tooltip { position: fixed; z-index: 20; width: 225px; padding: 16px 18px; pointer-events: none; border: 1px solid #e5ebf2; border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 12px 30px rgba(27, 47, 73, .16); opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; }
.hour-tooltip.visible { opacity: 1; transform: translateY(0); }
.tooltip-time { padding-bottom: 11px; color: #35485f; border-bottom: 1px solid #edf1f5; font-size: 14px; font-weight: 650; }
.tooltip-row { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; color: #7b8da3; font-size: 14px; }
.tooltip-row strong { color: #2c4058; font-weight: 600; }
.tooltip-row strong.success-text { color: var(--green); }
.tooltip-row strong.error-text { color: var(--red); }
.loading-state, .empty-state, .error-state { grid-column: 1 / -1; padding: 68px 20px; color: #8493a6; text-align: center; }
.spinner { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; border: 2px solid #d4deea; border-top-color: #3678e8; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 35px; color: #7f91a6; font-size: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot.no-request { background: var(--slate); }
@media (max-width: 900px) { .model-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .shell { width: min(100% - 24px, 560px); padding-top: 22px; } .page-header { align-items: stretch; flex-direction: column; } .refresh-button { align-self: flex-start; } .subheading { margin-left: 0; font-size: 14px; } .summary-bar { flex-wrap: wrap; gap: 10px 22px; padding: 16px; } .summary-statuses { width: 100%; margin-left: 0; justify-content: space-between; } .toolbar { align-items: stretch; flex-direction: column; margin-top: 22px; } .search-box { width: 100%; } .model-card { padding: 22px 16px 20px; } .card-header { align-items: flex-start; flex-direction: column; gap: 10px; } .card-metrics { align-self: flex-end; margin-top: -38px; font-size: 14px; } .card-metrics strong { font-size: 17px; } .model-name { max-width: 52vw; font-size: 19px; } .hour-strip { gap: 3px; } .hour-cell { border-radius: 6px; } .legend { justify-content: flex-start; gap: 12px 18px; } }