/* ---- layout ---- */
html, body { height: 100%; margin:0; }
.page { display:none; padding: 32px; max-width: 1600px; margin: 0 auto; }
.page.active { display:block; animation: rise .3s var(--mdui-motion-easing-emphasized-decelerate); }
@keyframes rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* ---- top bar extras ---- */
.topbar-sub { font-size: 12px; color: rgb(var(--mdui-color-on-surface-variant)); margin-left: 8px; }
.instance-chip { font-family: Consolas, Menlo, monospace; font-size:11px; padding:4px 10px; border-radius: var(--mdui-shape-corner-full); background: rgba(var(--mdui-color-primary),.12); color: rgb(var(--mdui-color-primary)); white-space: nowrap; display:inline-flex; align-items:center; gap:6px; }
.instance-chip mdui-icon { font-size: 14px; line-height: 1; }

/* ---- drawer ---- */
.drawer-head { padding: 20px 16px 8px; display:flex; align-items:center; gap:12px; }
.drawer-logo { width:42px; height:42px; border-radius: 50%; display:grid; place-items:center; font-weight:600; font-size:18px; background: rgb(var(--mdui-color-primary)); color: rgb(var(--mdui-color-on-primary)); }
.drawer-foot { padding: 12px 16px; font-size: 11px; color: rgb(var(--mdui-color-on-surface-variant)); opacity:.7; }

/* ---- stat cards ---- */
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:18px; }
.stat-card { padding: 18px; display:flex; align-items:center; gap:14px; }
.stat-card mdui-icon { font-size: 26px; color: rgb(var(--mdui-color-primary)); }
.stat-label { font-size: 13px; color: rgb(var(--mdui-color-on-surface-variant)); }
.stat-value { font-size: 30px; font-weight:600; letter-spacing:.4px; }
.stat-value.pulse { animation: statpulse .4s; }
@keyframes statpulse { 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* ---- segmented button fix (MDUI v2 rendering) ---- */
mdui-segmented-button { display: inline-flex; border: 1px solid rgb(var(--mdui-color-outline)); border-radius: var(--mdui-shape-corner-full); overflow: hidden; }
mdui-segmented-button-item { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; border-right: 1px solid rgb(var(--mdui-color-outline)); white-space: nowrap; transition: background 0.2s, color 0.2s; }
mdui-segmented-button-item:last-child { border-right: none; }
mdui-segmented-button-item[selected], mdui-segmented-button-item[active] { background: rgb(var(--mdui-color-primary)); color: rgb(var(--mdui-color-on-primary)); }
mdui-segmented-button-item:hover:not([selected]):not([active]) { background: rgba(var(--mdui-color-on-surface), 0.08); }

/* ---- flip clock (uptime) ---- */
#stat-uptime { display:inline-block; vertical-align:bottom; }
#stat-uptime .digit { display:inline-block; position:relative; overflow:hidden; vertical-align:bottom; }
#stat-uptime .digit .old, #stat-uptime .digit .new { display:block; transition: transform 0.28s ease, opacity 0.28s ease; }
#stat-uptime .digit .old { transform: translateY(0); opacity: 1; }
#stat-uptime .digit .new { position:absolute; top:0; left:0; transform: translateY(100%); opacity: 0; }
#stat-uptime .digit.flip .old { transform: translateY(-100%); opacity: 0; }
#stat-uptime .digit.flip .new { transform: translateY(0); opacity: 1; }
#stat-uptime .up-char { display:inline-block; vertical-align:bottom; }

/* ---- panels ---- */
.panel { margin-bottom: 18px; }
.panel-head { display:flex; align-items:center; gap:10px; padding: 14px 20px; }
.panel-body { padding: 4px 24px 22px; }

/* ---- pills / badges ---- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius: var(--mdui-shape-corner-full); }
.pill .dot { width:8px; height:8px; border-radius:50%; background: currentColor; }
.pill-ok { background: rgba(46,125,50,.14); color: rgb(46,125,50); }
.pill-bad { background: rgba(198,40,40,.13); color: rgb(198,40,40); }
.pill-warn { background: rgba(234,179,8,.14); color: rgb(182,130,6); }
.pill-mute { background: rgba(var(--mdui-color-on-surface-variant),.12); color: rgb(var(--mdui-color-on-surface-variant)); }
html.mdui-theme-dark .pill-ok { background: rgba(102,187,106,.14); color: rgb(102,187,106); }
html.mdui-theme-dark .pill-bad { background: rgba(242,139,135,.14); color: rgb(242,139,135); }
html.mdui-theme-dark .pill-warn { background: rgba(255,213,79,.14); color: rgb(255,213,79); }

/* ---- live pulse ring ---- */
.live-dot { position:relative; width:8px; height:8px; background: rgb(46,125,50); border-radius:50%; flex-shrink:0; }
.live-dot::after { content:''; position:absolute; inset:0; border-radius:50%; animation: ring 1.6s ease-out infinite; border: 2px solid rgb(46,125,50); }
@keyframes ring { from { transform: scale(1); opacity:.7; } to { transform: scale(2.6); opacity:0; } }
html.mdui-theme-dark .live-dot { background: rgb(102,187,106); }
html.mdui-theme-dark .live-dot::after { border-color: rgb(102,187,106); }

/* ---- skeleton shimmer ---- */
.skeleton { border-radius: var(--mdui-shape-corner-extra-small); background: linear-gradient(90deg, rgba(128,128,128,.10) 25%, rgba(128,128,128,.20) 37%, rgba(128,128,128,.10) 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; }
@keyframes sk { 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ---- kv rows ---- */
.kv { display:grid; grid-template-columns: 160px 1fr; gap:6px 16px; }
.kv > .k { color: rgb(var(--mdui-color-on-surface-variant)); font-size: 12.5px; padding-top:1px; }
.kv > .v { font-size: 14.5px; word-break: break-all; }

/* ---- log list ---- */
.log-list { display:flex; flex-direction:column; gap:2px; max-height: 70vh; overflow: auto; }
.log-row { display:flex; gap:10px; padding:6px 10px; border-left: 3px solid var(--log-c, rgb(var(--mdui-color-outline-variant))); border-radius: var(--mdui-shape-corner-extra-small); font-family: Consolas, Menlo, monospace; font-size:13px; line-height: 1.6; animation: login .22s; white-space: pre-wrap; word-break: break-word; }
.log-row:hover { background: rgba(var(--mdui-color-surface-variant),.35); }
.log-time { color: rgb(var(--mdui-color-on-surface-variant)); flex:0 0 auto; }
.log-msg { flex:1; }
.log-row.lv-info { --log-c: rgb(var(--mdui-color-outline-variant)); }
.log-row.lv-warn { --log-c: rgb(234,179,8); }
.log-row.lv-error { --log-c: rgb(var(--mdui-color-error)); }
.log-row.lv-debug { --log-c: rgb(var(--mdui-color-outline)); }
@keyframes login { from { opacity:0; transform: translateY(-5px); } to { opacity:1; transform:none; } }

/* ---- cache / request / node / file lists ---- */
.list-grid { display:flex; flex-direction:column; gap:6px; max-height: 60vh; overflow: auto; }
.list-row { display:grid; gap:10px; align-items:center; padding:10px 16px; border-radius: var(--mdui-shape-corner-extra-small); background: rgba(var(--mdui-color-surface),.55); font-size: 13.5px; }
.list-row:hover { background: rgba(var(--mdui-color-surface-variant),.35); }
.list-row.rq { grid-template-columns: 1fr 80px 80px 100px 70px; }
.list-row.cache { grid-template-columns: 1fr 70px 60px 50px 70px 40px 36px 36px; }
.list-row.file { grid-template-columns: 1fr 90px 160px 44px; }
.list-row.node { grid-template-columns: 1fr 120px 120px 90px 80px 36px; }
.list-row.jwt { grid-template-columns: 1fr 90px 80px 80px 80px 110px 100px 36px; }
.list-head { font-size:11px; color: rgb(var(--mdui-color-on-surface-variant)); font-weight:500; padding:0 16px 6px; }
.list-head.lh-rq { grid-template-columns: 1fr 80px 80px 100px 70px; display:grid; gap:10px; }
.list-head.lh-cache { grid-template-columns: 1fr 70px 60px 50px 70px 40px 36px 36px; display:grid; gap:10px; }
.list-head.lh-file { grid-template-columns: 1fr 90px 160px 44px; display:grid; gap:10px; }
.list-head.lh-node { grid-template-columns: 1fr 120px 120px 90px 36px; display:grid; gap:10px; }
.list-head.lh-jwt { grid-template-columns: 1fr 90px 80px 80px 80px 110px 100px 36px; display:grid; gap:10px; }

/* ---- lyrics latency widget ----
   Three cards for the numbers an operator actually asks for (per song, time to
   line-sync, time to wbw), then the full metric table below them. The p99 value
   is coloured by a fixed scale rather than relative to the row, so "slow" looks
   the same on every row and between refreshes -- a row-relative colour would
   make a uniformly slow server look healthy. */
.lat-cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:16px; }
.lat-card { padding:14px 16px; border-radius: var(--mdui-shape-corner-extra-small); background: rgba(var(--mdui-color-surface),.55); }
.lat-card .lat-t { font-size:13px; }
.lat-card .lat-n { font-size:11.5px; color: rgb(var(--mdui-color-on-surface-variant)); margin-top:2px; }
.lat-card .lat-grid3 { display:grid; grid-template-columns: 46px 1fr; gap:3px 10px; margin-top:10px; }
.lat-card .lat-grid3 .k { font-size:11.5px; color: rgb(var(--mdui-color-on-surface-variant)); align-self:center; }
.lat-card .lat-grid3 .v { font-family: Consolas, Menlo, monospace; font-size:14px; text-align:right; }
.lat-v.warn { color: rgb(234,179,8); }
.lat-v.bad { color: rgb(var(--mdui-color-error)); font-weight:600; }
.list-head.lh-lat { grid-template-columns: 1fr 54px 76px 76px 76px 76px 76px; display:grid; gap:10px; }
.list-row.lat { grid-template-columns: 1fr 54px 76px 76px 76px 76px 76px; font-size:13px; }
.list-row.lat .v { font-family: Consolas, Menlo, monospace; text-align:right; }
.list-row.lat .lat-key { font-family: Consolas, Menlo, monospace; font-size:11.5px; color: rgb(var(--mdui-color-on-surface-variant)); }

/* ---- pre code block ---- */
.code-block { position:relative; }
.code-block pre { margin:0; padding:12px 14px; border-radius: var(--mdui-shape-corner-extra-small); background: rgb(var(--mdui-color-surface-container-highest)); color: rgb(var(--mdui-color-on-surface)); font-size:12.5px; overflow-x:auto; white-space: pre-wrap; word-break: break-all; }
.code-block .copy-btn { position:absolute; top:6px; right:6px; }

/* ---- misc ---- */
.spacer { flex:1; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mono { font-family: Consolas, Menlo, monospace; }

/* ---- app settings panel ----
   Schema-driven, so the row is label+description / control / state pill. The
   pill is what tells an operator whether a value is the server default or
   their own override -- the old flat map could not express that at all. */
.app-master {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; margin-bottom:14px;
  border-radius:12px;
  background:rgba(var(--mdui-color-primary),.10);
  border:1px solid rgba(var(--mdui-color-primary),.30);
}
.app-master[data-off="yes"] {
  background:rgba(var(--mdui-color-error),.08);
  border-color:rgba(var(--mdui-color-error),.35);
}
.app-master > div:first-child { flex:1; min-width:0; }
.app-master-label { font-size:14.5px; font-weight:600; }
.app-group { margin-bottom:14px; }
.app-group-title {
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:rgb(var(--mdui-color-on-surface-variant));
  margin:0 0 6px 4px;
}
.list-row.app-row { grid-template-columns: 1fr auto auto; }
.app-text { min-width:0; }
.app-label { font-size:13.5px; }
.app-desc {
  font-size:11.5px; line-height:1.35; margin-top:2px;
  color:rgb(var(--mdui-color-on-surface-variant));
}
#app-advanced { margin-top:6px; }
#app-advanced > summary {
  cursor:pointer; font-size:12.5px; padding:6px 4px;
  color:rgb(var(--mdui-color-on-surface-variant));
  user-select:none;
}
#app-advanced[open] > summary { margin-bottom:4px; }
@media (max-width:599.98px) {
  .list-row.app-row { grid-template-columns: 1fr auto; }
  .list-row.app-row > .pill { grid-column: 1 / -1; justify-self:start; }
}

/* ---- update dialog ---- */
#updateDialogBody { display:flex; flex-direction:column; gap:12px; }
#updateStageLine { font-size:13.5px; }
/* mdui-dialog's shadow .body is overflow:auto, so any overflow (a long stage
   line, a wide flex row) leaves a scroll bar sitting in the dialog. This
   dialog's content is a fixed 3 rows and always fits -> no scrolling at all. */
#updateDialog::part(body) { overflow: hidden; }
#pingStatus { display:flex; align-items:center; gap:8px; font-size:12.5px; color: rgb(var(--mdui-color-on-surface-variant)); }
#updateStageLine, #pingStatus { overflow-wrap:anywhere; }

/* ---- stagger ---- */
.stagger > * { animation: rise .28s var(--mdui-motion-easing-emphasized-decelerate) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }

/* ---- responsive ---- */
@media (max-width: 599.98px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .list-row.cache { grid-template-columns: 1fr 60px 36px 36px; }
  .list-head.lh-cache { grid-template-columns: 1fr 60px 36px 36px; }
  .list-row.cache > :nth-child(2),
  .list-row.cache > :nth-child(3),
  .list-row.cache > :nth-child(5),
  .list-row.cache > :nth-child(6),
  .list-head.lh-cache > :nth-child(2),
  .list-head.lh-cache > :nth-child(3),
  .list-head.lh-cache > :nth-child(5),
  .list-head.lh-cache > :nth-child(6) { display:none; }
  /* min/max go first on a phone: p50/p95/p99 are what the widget is for. */
  .list-row.lat { grid-template-columns: 1fr 40px 62px 62px 62px; }
  .list-head.lh-lat { grid-template-columns: 1fr 40px 62px 62px 62px; }
  .list-row.lat > :nth-child(6),
  .list-row.lat > :nth-child(7),
  .list-head.lh-lat > :nth-child(6),
  .list-head.lh-lat > :nth-child(7) { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .page.active, .log-row, .stagger > *, .stat-value.pulse, .live-dot::after, .skeleton, .list-row { animation: none !important; transition: none !important; }
}

/* ---- lyrics preview (braccato) ---- */
#prev-lyrics { scrollbar-width: thin; }

/* ---- rebase ---- */
.rebase-list { display:flex; flex-direction:column; gap:4px; max-height: 40vh; overflow-y: auto; }
.rebase-row { display:block; padding: 6px 12px; border-radius: var(--mdui-shape-corner-extra-small); border-left: 4px solid; font-size: 12.5px; }
.rb-upgraded { background-color: rgba(46,125,50,.14); border-left-color: rgb(46,125,50); color: rgb(var(--mdui-color-on-surface)); }
.rb-upgraded:hover { background-color: rgba(46,125,50,.22); }
.rb-same { background-color: rgba(234,179,8,.14); border-left-color: rgb(182,130,6); color: rgb(var(--mdui-color-on-surface)); }
.rb-same:hover { background-color: rgba(234,179,8,.22); }
.rb-failed, .rb-error { background-color: rgba(198,40,40,.13); border-left-color: rgb(198,40,40); color: rgb(var(--mdui-color-on-surface)); }
.rb-failed:hover, .rb-error:hover { background-color: rgba(198,40,40,.22); }
.rb-already { background-color: rgba(var(--mdui-color-on-surface-variant),.12); border-left-color: rgb(var(--mdui-color-on-surface-variant)); color: rgb(var(--mdui-color-on-surface)); }
.rb-already:hover { background-color: rgba(var(--mdui-color-on-surface-variant),.22); }
html.mdui-theme-dark .rb-upgraded { background-color: rgba(102,187,106,.16); border-left-color: rgb(102,187,106); }
html.mdui-theme-dark .rb-same { background-color: rgba(255,213,79,.14); border-left-color: rgb(255,213,79); }
html.mdui-theme-dark .rb-failed, html.mdui-theme-dark .rb-error { background-color: rgba(242,139,135,.15); border-left-color: rgb(242,139,135); }

/* ---- refetch / playlist sync ---- */
.refetch-inputs, .plsync-inputs { display:grid; gap:12px; margin-bottom:8px; }
.refetch-inputs { grid-template-columns: 1fr 120px; }
.plsync-inputs { grid-template-columns: 1fr 120px; }
.refetch-meta { font-size:12.5px; color: rgb(var(--mdui-color-on-surface-variant)); margin-bottom:10px; }
.probe-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.probe-row .probe-name { font-weight:600; min-width:110px; }
.probe-row .probe-source { font-size:12px; opacity:.8; }
.probe-row .probe-actions { margin-left:auto; display:flex; gap:8px; }
@media (max-width: 899.98px) {
  .refetch-inputs { grid-template-columns: 1fr 100px; }
  .plsync-inputs { grid-template-columns: 1fr 100px; }
}
.rename-tag { font-size:11.5px; color: rgb(var(--mdui-color-primary)); white-space:nowrap; }

/* ---- live probe race log ---- */
.probe-live { font-family: ui-monospace, Consolas, monospace; font-size:12px; line-height:1.7;
  background: rgba(0,0,0,.45); border-radius:8px; padding:8px 12px; margin-bottom:10px;
  max-height:180px; overflow-y:auto; display:none; }
.probe-live.has-lines { display:block; }
/* Animated per-provider rows: flex row, continuous spinner while running,
   smooth elapsed ticker, determinate pill + retry when landed. */
.probe-live-row { display:flex; align-items:center; gap:8px; padding:2px 0;
  animation: probe-row-in .18s ease-out; }
@keyframes probe-row-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
.probe-live-row .mono { font-family: inherit; }
.probe-live .pl-ok { color: rgb(102,187,106); }
.probe-live .pl-miss { color: rgb(var(--mdui-color-on-surface-variant)); }
.probe-live .pl-fail { color: rgb(242,139,135); }
.probe-live .pl-run { color: rgb(144,202,249); }
html.mdui-theme-light .probe-live { background: rgba(0,0,0,.06); }
html.mdui-theme-light .probe-live .pl-ok { color: rgb(46,125,50); }
html.mdui-theme-light .probe-live .pl-fail { color: rgb(198,40,40); }
html.mdui-theme-light .probe-live .pl-run { color: rgb(21,101,192); }

/* ---- bulk refetch options ---- */
.bulk-opts { display:grid; grid-template-columns: auto auto 110px 130px 130px auto; gap:16px; align-items:end; margin-bottom:4px; }
.bulk-opt { display:flex; flex-direction:column; gap:6px; }
.bulk-label { font-size:11.5px; color: rgb(var(--mdui-color-on-surface-variant)); font-weight:500; }
.bulk-opt mdui-switch { margin-bottom:14px; }
@media (max-width: 899.98px) {
  .bulk-opts { grid-template-columns: 1fr 1fr; }
}