:root{color-scheme:dark;--bg:#071019;--panel:#0d1924;--panel-2:#101f2c;--line:#203445;--text:#edf5f8;--muted:#8297a7;--accent:#35d69b;--accent-soft:#123b2e;--warning:#ffbd5b;--danger:#ff657e}
*{box-sizing:border-box}
html,body{min-width:0;overflow-x:hidden}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#102c3e 0,transparent 34%),var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,p{margin:0}h1{font-size:20px;letter-spacing:.02em}h2{font-size:18px}.muted{color:var(--muted)}
header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(24px,calc((100% - 1160px)/2));background:#071019d9;position:sticky;top:0;backdrop-filter:blur(12px);z-index:2}
.header-actions,.card-title,.copy-actions{display:flex;align-items:center;gap:10px;min-width:0}.header-actions{flex:0 0 auto}
.layout{width:min(1160px,100%);margin:28px auto;padding:0 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-width:0}
.card{min-width:0;background:linear-gradient(145deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 14px 36px #0004}.full{grid-column:1/-1}
.pill{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;white-space:nowrap}.pill.online{border-color:#246a54;color:var(--accent);background:var(--accent-soft)}.pill.warning{border-color:#715529;color:var(--warning)}
.hero{display:grid;gap:26px;background:radial-gradient(circle at 100% 0,#15394a 0,transparent 38%),linear-gradient(145deg,#112330,#0c1822)}
.live-heading{display:flex;align-items:center;gap:16px;min-width:0}.live-heading>*{min-width:0}.live-heading small,.metrics small,.eyebrow{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.live-heading h2{font-size:30px;margin:2px 0}
.live-dot{width:15px;height:15px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 7px #8297a71f;flex:0 0 auto}.live-dot.is-live{background:var(--danger);box-shadow:0 0 0 7px #ff657e1f,0 0 20px #ff657e88}.live-dot.is-idle{background:var(--accent);box-shadow:0 0 0 7px #35d69b1f}.live-dot.is-offline{background:var(--warning)}
.metrics{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;min-width:0}.metrics>div{min-width:0;border-left:2px solid var(--line);padding:4px 10px;display:grid;gap:4px}.metrics strong{font-size:17px;overflow-wrap:anywhere}.ok{color:var(--accent)}
.card-title{justify-content:space-between;margin-bottom:16px}.card-title>*{min-width:0}.eyebrow{display:block;margin-bottom:2px;color:var(--accent)}
.access-card{display:flex;flex-direction:column;min-width:0}.access-card>p{overflow-wrap:anywhere}.access-card .copy-primary{margin-top:22px}.copy-actions{margin-top:22px;flex-wrap:wrap}.copy-actions button{min-width:0}.copy-state{min-height:22px;margin-top:8px;color:var(--accent);font-size:13px}
button{border:1px solid #355066;background:#172b3b;color:var(--text);border-radius:9px;padding:9px 14px;cursor:pointer;font:inherit;min-width:0}button:hover{border-color:#64839a}button:disabled{opacity:.5;cursor:wait}.copy-primary{background:var(--accent);border-color:var(--accent);color:#04140e;font-weight:750}.ghost{background:transparent}
.events{display:grid;gap:8px;min-width:0}.event{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;padding:12px;background:#08131c;border:1px solid #162936;border-radius:10px}.event>*{min-width:0}.event p{font-size:12px;overflow-wrap:anywhere}.event time{color:var(--muted);font-size:12px;white-space:nowrap}.event-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#173044;color:#9dc1d5;font-weight:800}.event-success .event-icon{background:var(--accent-soft);color:var(--accent)}.event-warning .event-icon{background:#3b2d16;color:var(--warning)}.event-error .event-icon{background:#3a1720;color:var(--danger)}.empty{padding:20px;text-align:center}
.mono,code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.url,.streamid,code{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast{position:fixed;right:20px;bottom:20px;max-width:calc(100vw - 40px);background:#dffcef;color:#09261b;padding:10px 16px;border-radius:9px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none;z-index:5;overflow-wrap:anywhere}#toast.show{opacity:1;transform:none}
.login-page{display:grid;place-items:center;padding:20px}.login-card{width:min(400px,100%);padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 30px 80px #0008}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--accent);color:#06140f;font-size:24px;font-weight:900;margin-bottom:20px}.login-card form{display:grid;gap:16px;margin-top:25px}.login-card label{display:grid;gap:6px;color:var(--muted);font-size:12px}.login-card input{width:100%;min-width:0;padding:11px;border:1px solid #34495b;border-radius:8px;background:#09131c;color:var(--text);font-size:15px}.error{min-height:22px;color:var(--danger)}
@media(max-width:900px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){header{padding:0 16px}.layout{display:block;margin:16px auto;padding:0 12px}.card{margin-bottom:14px;padding:17px}.live-heading h2{font-size:25px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px}.metrics>div{padding-left:9px}.copy-actions{display:grid;grid-template-columns:minmax(0,1fr)}.copy-actions button,.copy-primary{width:100%}.event{grid-template-columns:30px minmax(0,1fr)}.event time{grid-column:2}.events-card .card-title{align-items:flex-start}}
@media(max-width:360px){header h1{font-size:17px}.header-actions{gap:6px}.header-actions button{padding:7px 9px}.metrics strong{font-size:15px}.pill{padding:3px 7px}}

.nav-link{color:var(--text);text-decoration:none;min-width:0}.nav-link:hover{color:var(--accent)}
.summary-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}.summary-metrics>div{min-width:0;padding:12px;background:#08131c;border-radius:10px;display:grid}.summary-metrics small{color:var(--muted)}.summary-metrics strong{font-size:24px}.active-streams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;min-width:0}.active-stream{min-width:0;padding:11px;border:1px solid var(--line);border-radius:9px;color:var(--text);text-decoration:none;display:grid}.active-stream span{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.streams-layout{grid-template-columns:minmax(0,1fr)}.streams-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0}.streams-toolbar>*{min-width:0}.stream-table-head,.stream-row{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(130px,1.5fr) minmax(70px,.7fr) minmax(60px,.6fr) minmax(55px,.5fr) minmax(85px,.8fr) minmax(65px,.6fr) 64px;gap:10px;align-items:center;min-width:0}.stream-table-head{padding:0 12px 10px;color:var(--muted);font-size:12px}.stream-rows{display:grid;gap:7px;min-width:0}.stream-row{padding:12px;background:#08131c;border:1px solid #162936;border-radius:10px}.stream-row>*{min-width:0;overflow-wrap:anywhere}.stream-row code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stream-name{font-weight:700}.state{display:inline-flex;align-items:center;gap:5px}.state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}.state-live{color:var(--accent)}.state-live::before{background:var(--accent)}.state-error{color:var(--danger)}.state-error::before{background:var(--danger)}
.modal{width:min(560px,calc(100% - 24px));max-height:calc(100vh - 32px);overflow:auto;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 30px 90px #000b}.modal::backdrop{background:#02070bb8;backdrop-filter:blur(4px)}.modal form{display:grid;gap:17px}.modal label{display:grid;gap:7px;color:var(--muted);font-size:12px}.modal input{width:100%;min-width:0;padding:11px;border:1px solid #34495b;border-radius:8px;background:#09131c;color:var(--text);font:inherit}.modal-title,.modal-actions,.detail-actions,.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.modal-title{margin-bottom:18px}.modal-title>*{min-width:0}.input-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-width:0}.modal-actions{justify-content:flex-end}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.detail-grid>div{min-width:0;background:#08131c;padding:11px;border-radius:9px}.detail-grid dt{color:var(--muted);font-size:12px}.detail-grid dd{margin:3px 0 0;min-width:0;overflow-wrap:anywhere}.detail-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:18px}.danger-zone{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.danger-zone p{display:grid}.danger-zone span{font-size:12px}.danger{color:#ff91a4;border-color:#65323d}
@media(max-width:900px){.stream-table-head{display:none}.stream-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.stream-row>*::before{content:attr(data-label);display:block;color:var(--muted);font:11px/1.3 system-ui;margin-bottom:3px}.stream-row button{align-self:end}.active-streams{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.header-actions .pill{display:none}.nav-link{font-size:13px}.summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.streams-toolbar{align-items:flex-start;flex-direction:column}.streams-toolbar button{width:100%}.detail-grid{grid-template-columns:minmax(0,1fr)}.detail-actions{display:grid;grid-template-columns:minmax(0,1fr)}.danger-zone{align-items:flex-start}.input-action{grid-template-columns:minmax(0,1fr)}.stream-row{grid-template-columns:minmax(0,1fr)}}

/* PHASE-A-CONSOLE */

.active-stream {
  appearance: none;
  width: 100%;
  background: #08131c;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.active-stream:hover {
  border-color: #28516a;
}

.active-stream.is-selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent);
}

.active-stream.is-selected strong::after {
  content: "  当前";
  color: var(--accent);
  font-size: 11px;
}

.active-stream.is-live strong {
  color: var(--accent);
}

.stream-target {
  margin: 10px 0 12px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* PHASE-A4-LINK-UI */

.chain-card {
  overflow: hidden;
}

.chain-bottleneck {
  margin: -4px 0 16px;
  font-size: 13px;
}

.chain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.chain-segment {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid #1c3342;
  border-radius: 12px;
  background: #08141d;
}

.chain-segment-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.chain-segment-title span {
  font-size: 12px;
  font-weight: 700;
}

.chain-values {
  display: grid;
  gap: 7px;
}

.chain-values span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.chain-values b {
  color: var(--text);
  font-weight: 650;
  white-space: nowrap;
}

.quality-excellent {
  color: #43e09d !important;
}

.quality-good {
  color: #90d97a !important;
}

.quality-fair {
  color: #f2c85c !important;
}

.quality-poor {
  color: #ff7070 !important;
}

.chain-details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #172b38;
}

.chain-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}

.chain-details-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.chain-detail-item {
  padding: 12px 14px;
  border: 1px solid #172b38;
  border-radius: 10px;
  background: #071119;
}

.chain-detail-item p {
  margin: 6px 0 0;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .chain-grid {
    grid-template-columns: 1fr;
  }
}

/* COLLAPSED LIVE EVENTS */
.events-collapse{margin-top:10px}
.events-collapse summary{cursor:pointer;color:var(--muted);font-size:13px;padding:8px 0}
.events-collapse[open] summary{margin-bottom:10px}


/* A4 DETAIL */
.chain-detail{margin-top:12px;padding-top:10px;border-top:1px solid #17303e}
.chain-detail summary{cursor:pointer;color:var(--muted);font-size:12px}
.chain-detail-body{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.8}


/* A4 DETAIL HIGHLIGHT */
.chain-detail-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px
}
.chain-metric{
  padding:4px 8px;
  border-radius:6px;
  background:#091722;
  color:#89a3b5;
  font-size:12px
}
.chain-metric.is-important{
  background:#0d2530;
  color:#e8f8ff;
  border:1px solid #1d5060;
  font-weight:650
}
.chain-detail-item>strong{
  color:#dff7ff
}


/* A4 CLEAN DETAIL */
.chain-detail-body{
  gap:0!important;
}

.chain-detail-item{
  padding:14px 2px!important;
  border:0!important;
  border-top:1px solid #17303e!important;
  border-radius:0!important;
  background:transparent!important;
}

.chain-detail-item:first-child{
  border-top:0!important;
}

.chain-detail-item>strong{
  display:block;
  margin-bottom:10px;
  color:#dff8ff;
  font-size:13px;
}

.chain-detail-metrics{
  display:block!important;
  margin-top:0!important;
}

.chain-primary{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  align-items:center;
}

.chain-primary .chain-value{
  padding:0;
  border:0;
  background:none;
  color:#f2fbff;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

.chain-secondary{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-top:9px;
}

.chain-secondary .chain-value{
  padding:0;
  border:0;
  background:none;
  color:#7895a8;
  font-size:11px;
  font-weight:400;
  white-space:nowrap;
}


/* A4 HEALTH COLORS */
.health-green{
  color:#37e7a1!important;
}
.health-yellow{
  color:#f4c95d!important;
}
.health-red{
  color:#ff626f!important;
}

.chain-primary .health-green{
  text-shadow:0 0 12px rgba(55,231,161,.10)
}
.chain-primary .health-yellow{
  text-shadow:0 0 12px rgba(244,201,93,.10)
}
.chain-primary .health-red{
  text-shadow:0 0 12px rgba(255,98,111,.14)
}


/* ================================
   A5 HISTORY
   ================================ */

.history-shell{
  width:min(1180px,calc(100% - 36px));
  margin:26px auto 60px
}

.history-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px
}

.history-heading h2{
  margin:4px 0 6px;
  font-size:26px
}

.history-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
  align-items:start
}

.history-sidebar{
  position:sticky;
  top:92px;
  padding:18px
}

.history-session-list{
  display:grid;
  gap:9px;
  margin-top:14px;
  max-height:calc(100vh - 190px);
  overflow:auto
}

.history-session-item{
  width:100%;
  padding:13px;
  border:1px solid #17303e;
  border-radius:10px;
  background:#071119;
  color:#dff8ff;
  text-align:left;
  cursor:pointer
}

.history-session-item:hover{
  border-color:#24556a
}

.history-session-item.active{
  border-color:#37e7a1;
  box-shadow:0 0 0 1px rgba(55,231,161,.12)
}

.history-session-item>span,
.history-session-item>small{
  display:block;
  margin-top:7px;
  color:#7895a8;
  font-size:11px
}

.history-session-top{
  display:flex;
  justify-content:space-between;
  gap:10px
}

.history-session-state{
  font-size:11px;
  color:#7895a8
}

.history-session-state.live{
  color:#37e7a1
}

.history-main{
  display:grid;
  gap:18px;
  min-width:0
}

.history-overview{
  padding:20px
}

.history-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px
}

.history-stat-grid>div{
  padding:14px;
  border-radius:10px;
  background:#071119
}

.history-stat-grid small{
  display:block;
  margin-bottom:7px;
  color:#7895a8;
  font-size:11px
}

.history-stat-grid strong{
  color:#effbff;
  font-size:17px
}

.history-live-pill{
  color:#37e7a1!important;
  border-color:#1d6d55!important
}

.history-quality-card{
  padding:20px
}

.quality-strip{
  display:flex;
  width:100%;
  min-height:28px;
  margin-top:15px;
  overflow:hidden;
  border:1px solid #17303e;
  border-radius:7px;
  background:#071119
}

.quality-segment{
  flex:1 1 1px;
  min-width:1px
}

.quality-segment.excellent{
  background:#37e7a1
}

.quality-segment.good{
  background:#5fbff9
}

.quality-segment.fair{
  background:#f4c95d
}

.quality-segment.poor{
  background:#ff626f
}

.quality-segment.unknown{
  background:#304351
}

.quality-legend{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:10px;
  color:#7895a8;
  font-size:11px
}

.quality-dot{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:5px;
  border-radius:50%
}

.quality-dot.excellent{
  background:#37e7a1
}

.quality-dot.good{
  background:#5fbff9
}

.quality-dot.fair{
  background:#f4c95d
}

.quality-dot.poor{
  background:#ff626f
}

.history-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}

.history-chart-card{
  min-width:0;
  padding:18px
}

.chart-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px
}

.chart-heading h3{
  margin:4px 0 0;
  font-size:16px
}

.history-chart-card canvas{
  display:block;
  width:100%;
  height:220px
}

.history-events-card{
  padding:20px
}

.history-events{
  display:grid;
  margin-top:14px
}

.history-event{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:18px;
  padding:13px 0;
  border-top:1px solid #17303e
}

.history-event:first-child{
  border-top:0
}

.history-event time{
  color:#7895a8;
  font-size:11px
}

.history-event strong{
  display:block;
  color:#dff8ff;
  font-size:13px
}

.history-event small{
  display:block;
  margin-top:4px;
  color:#7895a8
}

.history-event.warning strong{
  color:#f4c95d
}

.history-event.error strong{
  color:#ff626f
}

@media(max-width:1000px){
  .history-layout{
    grid-template-columns:1fr
  }

  .history-sidebar{
    position:static
  }

  .history-session-list{
    max-height:none;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:760px){
  .history-shell{
    width:min(100% - 20px,1180px)
  }

  .history-heading{
    align-items:flex-start;
    flex-direction:column
  }

  .history-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .history-chart-grid{
    grid-template-columns:1fr
  }

  .history-session-list{
    grid-template-columns:1fr
  }

  .history-event{
    grid-template-columns:1fr;
    gap:5px
  }
}


/* SRT BUFFER FINAL */
.srt-buffer-value{
  white-space:nowrap;
  font-size:14px!important;
  letter-spacing:-.2px
}

@media(max-width:760px){
  .srt-buffer-value{
    font-size:12px!important
  }
}


/* A5-3C HISTORY TOOLTIP */

.history-chart-card{
  position:relative
}

.history-chart-card canvas{
  cursor:crosshair
}

.history-chart-tooltip{
  position:absolute;
  z-index:40;
  display:none;
  width:180px;
  padding:10px 11px;
  border:1px solid #285064;
  border-radius:9px;
  background:rgba(4,15,23,.96);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  pointer-events:none;
  backdrop-filter:blur(8px)
}

.history-chart-tooltip.visible{
  display:block
}

.history-chart-tooltip time{
  display:block;
  margin-bottom:7px;
  color:#b8d2df;
  font-size:11px;
  font-weight:650
}

.history-chart-tooltip div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:5px;
  color:#7895a8;
  font-size:11px
}

.history-chart-tooltip strong{
  color:#effbff;
  font-weight:650;
  white-space:nowrap
}


/* B1-4 PER-STREAM CALLER INFO */

.reader-caller-info{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px
}

.reader-caller-info>div{
  min-width:0;
  padding:11px 12px;
  border:1px solid #17303e;
  border-radius:9px;
  background:#071119
}

.reader-caller-info span{
  display:block;
  margin-bottom:5px;
  color:#7895a8;
  font-size:11px
}

.reader-caller-info strong{
  display:block;
  overflow:hidden;
  color:#eaf8ff;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap
}

@media(max-width:760px){
  .reader-caller-info{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}


/* HISTORY DAY GROUPS 2026-08-17 */

.history-day-group {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 4px 0 18px;
}

.history-day-group +
.history-day-group {
  border-top:
    1px solid
    rgba(130, 170, 190, 0.16);
  padding-top: 20px;
}

.history-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}

.history-day-heading > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.history-day-label {
  color: #eef8ff;
  font-size: 16px;
  line-height: 1.3;
}

.history-live-group
.history-day-label {
  color: #39e6b2;
}

.history-day-subtitle {
  color: #7995a6;
  font-size: 12px;
}

.history-day-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  border:
    1px solid
    rgba(121, 164, 187, 0.22);
  border-radius: 999px;
  color: #8daabd;
  font-size: 12px;
  white-space: nowrap;
}

.history-day-items {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 12px;
}

.history-day-items
.history-session-item {
  width: 100%;
  min-width: 0;
}

.history-day-toggle {
  justify-self: start;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

.history-hidden-hint {
  color: #6f8999;
  font-size: 12px;
  margin-top: -6px;
}

.history-more-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.history-load-more {
  min-width: 220px;
  min-height: 40px;
}

@media (
  max-width: 760px
) {
  .history-day-items {
    grid-template-columns: 1fr;
  }

  .history-day-heading {
    align-items: flex-start;
  }

  .history-day-heading > div {
    display: grid;
    gap: 4px;
  }

  .history-day-subtitle {
    display: none;
  }

  .history-load-more {
    width: 100%;
  }
}


/* HISTORY COMPACT DESKTOP V2 */

/*
 * 桌面历史页重新回到真正的“导航 + 详情”布局。
 * 历史记录不能继续拿整张网页当自己的滚动容器。
 */
@media (min-width: 900px) {

  .history-layout {
    display: grid !important;

    grid-template-columns:
      minmax(320px, 360px)
      minmax(0, 1fr) !important;

    gap: 22px !important;

    align-items: start !important;
  }

  .history-sidebar {
    min-width: 0;

    position: sticky;

    top: 18px;

    max-height:
      calc(100vh - 36px);

    overflow-y: auto;

    overscroll-behavior:
      contain;

    scrollbar-gutter:
      stable;
  }

  .history-main {
    min-width: 0;
  }

  /*
   * 左侧已经只有约 360px，
   * 历史场次改成单列，更像真正的历史导航。
   */
  .history-sidebar
  .history-day-items {
    grid-template-columns:
      1fr !important;
  }

  .history-sidebar
  .history-session-item {
    padding:
      14px 16px;
  }

  .history-sidebar
  .history-day-group {
    gap: 10px;
    padding-bottom: 14px;
  }

  .history-sidebar
  .history-day-group +
  .history-day-group {
    padding-top: 14px;
  }

  .history-sidebar
  .history-day-subtitle {
    display: none;
  }

  .history-sidebar
  .history-day-heading {
    gap: 8px;
  }

  .history-sidebar
  .history-day-heading > div {
    min-width: 0;
  }

  .history-sidebar
  .history-day-label {
    font-size: 15px;
  }

  .history-sidebar
  .history-day-toggle,
  .history-sidebar
  .history-load-more {
    width: 100%;
  }

  .history-sidebar
  .history-more-wrap {
    padding-top: 2px;
  }
}


/*
 * 窄屏时不要再先展示一大坨历史记录，
 * 当前场次详情优先，然后才是历史列表。
 */
@media (max-width: 899px) {

  .history-layout {
    display: flex !important;

    flex-direction:
      column !important;

    gap: 22px !important;
  }

  .history-main {
    order: 1;
  }

  .history-sidebar {
    order: 2;
  }
}


/* HOME CHAIN SIDES V2 */

.hero {
  gap: 20px;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.hero-top > * {
  min-width: 0;
}


.home-core-metrics {
  grid-template-columns:
    repeat(5,minmax(0,1fr));
}


/* 指标解释 */

.metric-help {
  position: relative;

  display: inline-grid;
  place-items: center;

  width: 16px;
  height: 16px;

  margin-left: 4px;

  border: 1px solid #426073;
  border-radius: 50%;

  color: #a4bccb;

  font-size: 10px;
  line-height: 1;

  cursor: help;

  vertical-align: middle;
}

.metric-help::after {
  content: attr(data-tip);

  position: absolute;
  z-index: 30;

  left: 50%;
  bottom: calc(100% + 8px);

  width: 240px;

  transform: translateX(-50%);

  padding: 9px 11px;

  border: 1px solid #29475a;
  border-radius: 8px;

  background: #06121b;

  color: #dce9ef;

  font: 12px/1.5 system-ui;

  letter-spacing: normal;
  text-transform: none;

  box-shadow: 0 8px 24px #0009;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}

.metric-help:hover::after,
.metric-help:focus::after {
  opacity: 1;
  visibility: visible;
}


/* 两侧链路直接展示 */

.home-chain-sides {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 12px;

  padding-top: 16px;

  border-top: 1px solid var(--line);
}

.home-chain-side {
  min-width: 0;

  padding: 14px 16px;

  border: 1px solid #1c3342;
  border-radius: 11px;

  background: #08141d;
}

.home-chain-side-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 6px;
}

.home-chain-side-title strong {
  font-size: 14px;
}

.home-chain-side p {
  color: var(--muted);
  font-size: 13px;
}

.home-chain-side b {
  color: var(--text);
}


/* 正常 / 注意 / 异常 */

.chain-side-status {
  display: inline-flex;
  align-items: center;

  padding: 2px 9px;

  min-height: 23px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);

  font-size: 12px;

  white-space: nowrap;
}

.chain-side-status.health-green {
  border-color: #246a54;
  color: var(--accent);
  background: var(--accent-soft);
}

.chain-side-status.health-yellow {
  border-color: #715529;
  color: var(--warning);
  background: #302613;
}

.chain-side-status.health-red {
  border-color: #713340;
  color: var(--danger);
  background: #30151c;
}


/* 当前真正有问题的是哪一侧 */

.home-chain-result {
  margin-top: -5px;

  font-size: 13px;
  font-weight: 600;
}


/* 高级网络参数 */

.home-chain-detail {
  margin-top: -6px;
}

.home-chain-detail summary {
  width: fit-content;

  color: var(--muted);

  font-size: 12px;

  cursor: pointer;
}


/* 保留给旧 JS 使用但不展示 */

.home-hidden-metrics {
  display: none !important;
}


@media(max-width:900px) {

  .home-core-metrics {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:720px) {

  .hero-top {
    align-items: flex-start;
  }

  .home-core-metrics {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .home-chain-sides {
    grid-template-columns: 1fr;
  }

}


/* HISTORY INTERACTIVE QUALITY V2 */

.history-quality-card {
  position: relative;
  overflow: visible;
}


.quality-strip {
  position: relative;
  cursor: crosshair;
  user-select: none;
}


.quality-strip-hover-marker {
  position: absolute;

  top: -4px;
  bottom: -4px;

  width: 2px;

  background: #edf5f8;

  box-shadow:
    0 0 0 1px #0008,
    0 0 10px #edf5f888;

  opacity: 0;

  pointer-events: none;

  transform:
    translateX(-1px);

  z-index: 5;
}


.quality-strip-hover-marker.show {
  opacity: 1;
}


/* 时间带详情浮层 */

.quality-strip-tooltip {
  position: absolute;

  z-index: 40;

  width:
    min(
      400px,
      calc(100% - 28px)
    );

  transform:
    translateX(-50%);

  padding: 14px;

  border:
    1px solid
    #315069;

  border-radius: 11px;

  background:
    rgba(
      4,
      14,
      22,
      .98
    );

  box-shadow:
    0 16px 42px #000b;

  color: var(--text);

  pointer-events: none;

  opacity: 0;
  visibility: hidden;
}


.quality-strip-tooltip.show {
  opacity: 1;
  visibility: visible;
}


.quality-tooltip-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 11px;

  padding-bottom: 9px;

  border-bottom:
    1px solid
    #1c3342;
}


.quality-tooltip-title strong {
  font-size: 14px;
}


.quality-tooltip-title span {
  color: var(--muted);

  font-size: 12px;
}


.quality-tooltip-title.excellent strong {
  color: var(--accent);
}


.quality-tooltip-title.good strong {
  color: #67bff0;
}


.quality-tooltip-title.fair strong {
  color: var(--warning);
}


.quality-tooltip-title.poor strong {
  color: var(--danger);
}


.quality-tooltip-route {
  display: grid;

  gap: 3px;

  margin-top: 8px;
}


.quality-tooltip-route strong {
  font-size: 12px;
}


.quality-tooltip-route span {
  color: var(--muted);

  font-size: 12px;
}


.quality-tooltip-events {
  display: grid;

  gap: 6px;

  margin-top: 11px;

  padding-top: 9px;

  border-top:
    1px solid
    #1c3342;
}


.quality-tooltip-events > small {
  color: var(--muted);
}


.quality-tooltip-event {
  display: grid;

  grid-template-columns:
    58px
    minmax(0,1fr);

  gap: 8px;

  font-size: 11px;
}


.quality-tooltip-event time {
  color: #7995a6;

  white-space: nowrap;
}


.quality-tooltip-event span {
  overflow-wrap: anywhere;
}


.quality-tooltip-event.error span {
  color: var(--danger);
}


.quality-tooltip-event.warning span {
  color: var(--warning);
}


.quality-tooltip-empty {
  color: #708898;

  font-size: 11px;
}


/* 异常时间线不再无限撑页面 */

.history-events-list {
  display: grid;
}


.history-events-list.is-expanded {
  max-height: 560px;

  overflow-y: auto;

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable;

  padding-right: 6px;
}


.history-events-footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 14px;

  padding-top: 14px;

  border-top:
    1px solid
    var(--line);
}


.history-events-footer .muted {
  font-size: 12px;
}


@media(max-width:720px) {

  .quality-strip-tooltip {
    left: 12px !important;
    right: 12px;

    width: auto;

    transform: none;
  }


  .quality-tooltip-title {
    align-items: flex-start;

    flex-direction: column;

    gap: 4px;
  }


  .history-events-footer {
    align-items: stretch;

    flex-direction: column;
  }


  .history-events-footer button {
    width: 100%;
  }
}