.cache-page { --cache-green: #20b889; --cache-red: #e95055; --cache-ink: #111318; background: linear-gradient(180deg, #fff 0, #fbfcfc 52%, #fff 100%); }
.cache-main { max-width: 1160px; padding-bottom: 52px; }
.cache-main .status-header { margin-bottom: 48px; }
.cache-main .service-tab { min-width: 68px; }
.cache-main .language-button { flex: 0 0 auto; }

.cache-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.cache-hero h1 { margin: 10px 0 12px; color: var(--cache-ink); font-size: clamp(38px, 6vw, 66px); font-weight: 680; letter-spacing: -.065em; line-height: .98; }
.cache-hero > div:first-child { max-width: 740px; }
.cache-hero > div > p:last-child { max-width: 690px; margin: 0; color: #747987; font-size: 14px; line-height: 1.75; }
.cache-eyebrow { margin: 0; display: flex; align-items: center; gap: 9px; color: #848995; font: 650 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.cache-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--cache-green); box-shadow: 0 0 0 5px rgba(32,184,137,.1); }
.cache-eyebrow b { color: #353942; font-weight: 680; }
.cache-eyebrow em { font-style: normal; }
.live-chip { min-height: 36px; padding: 0 13px; border: 1px solid #dfe8e4; border-radius: 999px; background: #f4fbf8; display: flex; align-items: center; gap: 8px; color: #238266; font-size: 11px; font-weight: 650; white-space: nowrap; }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cache-green); box-shadow: 0 0 0 4px rgba(32,184,137,.12); }

.cache-metrics { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #dfe1e5; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(18,22,33,.04); overflow: hidden; }
.cache-metrics article { min-width: 0; min-height: 116px; padding: 20px; border-right: 1px solid #eef0f2; display: flex; flex-direction: column; justify-content: space-between; }
.cache-metrics article:last-child { border-right: 0; }
.cache-metrics span { color: #777c87; font-size: 11px; }
.cache-metrics strong { color: #202329; font: 650 26px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cache-metrics small { color: #a0a4ad; font: 600 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }

.cache-panel { margin-top: 18px; border: 1px solid #dfe1e5; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(18,22,33,.04); }
.filter-panel { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.filter-block { min-width: 0; display: flex; align-items: center; gap: 10px; }
.filter-block > span { color: #898e98; font-size: 10px; white-space: nowrap; }
.segmented { padding: 3px; border-radius: 6px; background: #f2f3f4; display: flex; gap: 2px; }
.segmented button { min-height: 28px; padding: 0 11px; border: 0; border-radius: 4px; color: #757a85; background: transparent; cursor: pointer; font-size: 10px; font-weight: 620; white-space: nowrap; }
.segmented button:hover { color: #292d34; }
.segmented button.is-active { color: #fff; background: #292c32; box-shadow: 0 1px 2px rgba(17,19,24,.15); }

.matrix-panel { overflow: hidden; }
.panel-title-row { min-height: 76px; padding: 17px 19px; border-bottom: 1px solid #eef0f2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-title-row p { margin: 0 0 5px; color: #a0a4ad; font: 650 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.panel-title-row h2 { margin: 0; color: #292d34; font-size: 16px; font-weight: 660; letter-spacing: -.02em; }
.heat-legend { display: flex; align-items: center; gap: 4px; color: #8b909a; font-size: 9px; }
.heat-legend i { width: 15px; height: 8px; border-radius: 2px; }
.heat-legend .low { margin-left: 4px; background: #ef8d90; }
.heat-legend .mid { background: #dfe7df; }
.heat-legend .high { margin-right: 4px; background: #35b78f; }
.matrix-scroll { overflow-x: auto; scrollbar-color: #d5d8dd transparent; }
.cache-matrix { min-width: 990px; padding: 16px 18px 18px; display: grid; grid-template-columns: 174px repeat(15, minmax(44px, 1fr)); gap: 5px; }
.matrix-loading { min-height: 180px; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; color: #91959e; font-size: 12px; }
.matrix-corner, .matrix-time { height: 36px; display: flex; align-items: center; justify-content: center; color: #8e939d; font: 600 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.matrix-corner { justify-content: flex-start; padding-left: 8px; }
.model-label { min-height: 62px; padding: 9px 8px; border-bottom: 1px solid #f0f1f2; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.model-label strong { color: #32363d; font-size: 11px; font-weight: 680; }
.model-label span { margin-top: 4px; color: #969aa4; font: 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-cell { position: relative; min-height: 62px; padding: 7px 3px; border: 1px solid rgba(17,19,24,.045); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: default; transition: transform 120ms ease, box-shadow 120ms ease; }
.matrix-cell:hover { z-index: 2; transform: translateY(-2px); box-shadow: 0 7px 18px rgba(21,25,34,.12); }
.matrix-cell strong { color: rgba(17,19,24,.8); font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.matrix-cell span { color: rgba(17,19,24,.48); font: 600 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.matrix-cell.is-empty { border-color: #eceef0; color: #a2a6ae; background: #f5f6f7; }
.matrix-cell.is-error { background: repeating-linear-gradient(135deg,#f3f4f5,#f3f4f5 5px,#eceef0 5px,#eceef0 10px); }
.matrix-cell.is-empty strong, .matrix-cell.is-error strong { color: #a0a4ad; }
.matrix-note { padding: 12px 19px; border-top: 1px solid #eef0f2; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; color: #858a94; }
.matrix-note span { display: flex; align-items: center; gap: 6px; }
.matrix-note b { font-size: 9px; font-weight: 560; }
.legend-dot { width: 7px; height: 7px; border-radius: 2px; }
.legend-dot.hit { background: var(--cache-green); }.legend-dot.miss { background: var(--cache-red); }.legend-dot.empty { background: #d9dce0; }

.schedule-panel { overflow: hidden; }
.cost-badge { padding: 6px 8px; border: 1px solid #dfe1e5; border-radius: 4px; color: #656a74; background: #fafafa; font: 650 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.schedule-flow { padding: 25px 24px 18px; display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: center; }
.schedule-flow > div { text-align: center; }
.schedule-flow strong { color: #202329; display: block; font: 680 24px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.05em; }
.schedule-flow span { margin-top: 8px; color: #818691; display: block; font-size: 10px; }
.schedule-flow > i { height: 1px; background: repeating-linear-gradient(90deg,#cfd2d7 0,#cfd2d7 4px,transparent 4px,transparent 8px); }
.method-copy { max-width: 840px; margin: 0 auto; padding: 0 24px 23px; color: #8a8f99; font-size: 10px; line-height: 1.75; text-align: center; }
.cache-footer { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

@media (max-width: 900px) {
  .cache-main .status-header { align-items: flex-start; flex-wrap: wrap; }
  .cache-main .service-tabs { order: 3; width: 100%; margin: 2px 0 0; }
  .cache-main .service-tab { flex: 1 0 auto; }
  .cache-metrics { grid-template-columns: repeat(2, 1fr); }
  .cache-metrics article:nth-child(2) { border-right: 0; }
  .cache-metrics article:nth-child(-n+2) { border-bottom: 1px solid #eef0f2; }
  .filter-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .cache-main { padding: 22px 16px 38px; }
  .cache-main .status-header { margin-bottom: 34px; }
  .cache-main .wordmark { font-size: 20px; }
  .cache-hero { align-items: flex-start; flex-direction: column; gap: 18px; }
  .cache-hero h1 { font-size: 43px; }
  .cache-metrics article { min-height: 98px; padding: 15px; }
  .cache-metrics strong { font-size: 21px; }
  .filter-block { width: 100%; align-items: flex-start; flex-direction: column; }
  .segmented { width: 100%; overflow-x: auto; }
  .segmented button { flex: 1 0 auto; }
  .panel-title-row { align-items: flex-start; }
  .heat-legend { display: none; }
  .schedule-flow { padding: 22px 16px 16px; grid-template-columns: 1fr; gap: 12px; }
  .schedule-flow > i { width: 1px; height: 18px; margin: 0 auto; background: repeating-linear-gradient(180deg,#cfd2d7 0,#cfd2d7 4px,transparent 4px,transparent 8px); }
  .cache-footer { padding-left: 16px; padding-right: 16px; }
}