:root {
  color: #17202a;
  background: #eef2f6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
}

button,
input,
textarea {
  font: inherit;
}

.shell {
  min-height: 100vh;
  padding: 24px;
}

.workspace {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.15;
}

h2 {
  font-size: 16px;
  line-height: 1.25;
}

h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
}

.topbar p {
  margin-top: 6px;
  color: #607086;
}

.status {
  border: 1px solid #c9d3df;
  background: #ffffff;
  border-radius: 999px;
  color: #334155;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.status.succeeded {
  border-color: #86efac;
  background: #ecfdf5;
  color: #047857;
}

.status.running {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.status.failed {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 16px;
  margin-bottom: 16px;
}

.grid > * {
  min-width: 0;
}

.panel {
  background: #ffffff;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(23, 32, 42, 0.06);
  min-width: 0;
}

.panel + .panel {
  margin-top: 16px;
}

label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: #4b5b6e;
  font-size: 13px;
  font-weight: 600;
}

input,
textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #17202a;
  background: #f8fafc;
  outline: none;
}

input {
  height: 42px;
  padding: 0 12px;
}

textarea {
  min-height: 352px;
  resize: vertical;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  tab-size: 2;
}

input:focus,
textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

textarea.invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.split {
  display: grid;
  grid-template-columns: minmax(80px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
}

.drop {
  min-height: 132px;
  border: 1px dashed #aab7c7;
  border-radius: 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #334155;
  background: #f8fafc;
  cursor: pointer;
  text-align: center;
}

.drop.compact {
  min-height: 84px;
}

.drop input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.icon {
  font-size: 20px;
  line-height: 1;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: #1f6feb;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 700;
}

button:disabled {
  background: #b8c4d3;
  cursor: not-allowed;
}

.meta {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 14px 0 0;
  font-size: 13px;
}

.meta dt {
  color: #607086;
}

.meta dd {
  margin: 0;
  color: #17202a;
  overflow-wrap: anywhere;
}

.meta.horizontal {
  grid-template-columns: 90px minmax(0, 1fr);
}

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

.compactHeader {
  align-items: flex-start;
}

.miniActions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.miniActions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  background: #475569;
}

.progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #10b981;
  transition: width 180ms ease;
}

.progress span.running { background: #2563eb; }
.progress span.failed { background: #dc2626; }
.progress span.queued { background: #d97706; }

.serviceLogPanel {
  margin-top: 16px;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.serviceLogPanel .sectionHeader p {
  margin-top: 3px;
}

.serviceSteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.serviceStep {
  border: 1px solid #d7dee8;
  border-left-width: 5px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
  min-width: 0;
}

.serviceStep.succeeded { border-left-color: #059669; }
.serviceStep.running { border-left-color: #2563eb; }
.serviceStep.queued { border-left-color: #d97706; }
.serviceStep.pending { border-left-color: #94a3b8; }
.serviceStep.failed { border-left-color: #dc2626; }

.serviceStepTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.serviceStepTop strong {
  min-width: 0;
  color: #17202a;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.stepStatus {
  border-radius: 999px;
  padding: 2px 7px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.stepStatus.succeeded { background: #059669; }
.stepStatus.running { background: #2563eb; }
.stepStatus.queued { background: #d97706; }
.stepStatus.pending { background: #64748b; }
.stepStatus.failed { background: #dc2626; }

.serviceStepMeter {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 9px;
}

.serviceStepMeter span {
  display: block;
  height: 100%;
  background: #2563eb;
}

.serviceStep.succeeded .serviceStepMeter span { background: #059669; }
.serviceStep.failed .serviceStepMeter span { background: #dc2626; }
.serviceStep.queued .serviceStepMeter span { background: #d97706; }

.serviceStep p {
  margin-top: 8px;
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.serviceStep small {
  display: block;
  margin-top: 5px;
  color: #607086;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.serviceLogs {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #0f172a;
  padding: 10px;
}

.serviceLogLine {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  border-left: 4px solid #64748b;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  min-width: 0;
}

.serviceLogLine.succeeded { border-left-color: #34d399; }
.serviceLogLine.running { border-left-color: #60a5fa; }
.serviceLogLine.queued { border-left-color: #fbbf24; }
.serviceLogLine.failed { border-left-color: #f87171; }

.serviceLogLine time {
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.serviceLogLine strong {
  display: block;
  color: #f8fafc;
  font-size: 12px;
}

.serviceLogLine p {
  margin-top: 3px;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.serviceLogLine small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.serviceLogEmpty {
  color: #cbd5e1;
  font-size: 13px;
}

.error {
  margin-top: 12px;
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #ffccc7;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
}

.reportPanel pre {
  min-height: 220px;
  margin: 0;
  background: #111827;
  color: #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.55;
}

.scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.scores div {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.scores span {
  display: block;
  color: #607086;
  font-size: 12px;
}

.scores strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}

.notice {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
  background: #f8fafc;
  color: #17202a;
}

.notice strong {
  display: block;
  margin-bottom: 4px;
}

.notice.warning {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #7c2d12;
}

.notice.ok {
  border-color: #34d399;
  background: #ecfdf5;
  color: #064e3b;
}

.transcript {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
}

.asrQuality {
  display: grid;
  gap: 4px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #17202a;
  font-size: 13px;
}

.asrQuality.ok {
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.asrQuality.warning {
  border-color: #fecaca;
  background: #fff1f2;
}

.asrQuality span,
.asrQuality small {
  color: #607086;
}

.utterance {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.utterance time {
  color: #607086;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}

.utterance p {
  color: #17202a;
  line-height: 1.45;
}

.subtle {
  color: #607086;
  font-size: 13px;
}

.speakerSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.speakerBadge {
  border-radius: 999px;
  padding: 5px 9px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.speakerTimeline {
  position: relative;
  min-height: 112px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #f8fafc 0, #f8fafc 9.8%, #eef2f6 10%, #eef2f6 10.3%);
  overflow: hidden;
}

.speakerSegment {
  position: absolute;
  top: 12px;
  min-width: 42px;
  height: 84px;
  border-radius: 6px;
  color: #ffffff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

.speakerSegment span,
.speakerSegment time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speakerSegment span {
  font-size: 12px;
  font-weight: 800;
}

.speakerSegment time {
  font-size: 11px;
  opacity: 0.9;
}

.color0 { background: #2563eb; }
.color1 { background: #059669; }
.color2 { background: #dc2626; }
.color3 { background: #7c3aed; }

.overlapTimeline {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.overlapTimeline h3 {
  margin: 0;
  font-size: 13px;
}

.overlapTimeline div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  background: #fff7ed;
  color: #7c2d12;
  padding: 8px 10px;
  font-size: 13px;
}

.overlapTimeline time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
}

.conversationStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.roleStat {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.roleStat span,
.roleStat small {
  display: block;
  color: #607086;
  font-size: 12px;
}

.roleStat strong {
  display: block;
  margin-top: 3px;
  color: #17202a;
  font-size: 22px;
}

.conversationTimeline {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
}

.dialogTurn {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid #d7dee8;
  border-left-width: 5px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.dialogTurn time,
.conversationEvent time {
  color: #607086;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}

.dialogTurn div {
  min-width: 0;
}

.dialogTurn span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.dialogTurn small {
  margin-left: 8px;
  color: #607086;
  font-size: 12px;
}

.dialogTurn p {
  margin-top: 7px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dialogTurn.roleManager { border-left-color: #2563eb; }
.dialogTurn.roleClient { border-left-color: #059669; }
.dialogTurn.roleUnknown { border-left-color: #64748b; }
.dialogTurn.roleManager span { background: #2563eb; }
.dialogTurn.roleClient span { background: #059669; }
.dialogTurn.roleUnknown span { background: #64748b; }

.interruptionCandidates {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.conversationEvent {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}

.pauseEvent {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

.interruptionEvent {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #7c2d12;
}

.dialogueScoreCategories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.scoreCategory {
  border: 1px solid #d7dee8;
  border-left-width: 5px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.scoreCategory.scoreOk { border-left-color: #059669; }
.scoreCategory.scoreWarn { border-left-color: #d97706; }
.scoreCategory.scoreFail { border-left-color: #dc2626; }

.scoreCategoryTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.scoreCategory span {
  color: #607086;
  font-size: 12px;
  font-weight: 700;
}

.scoreCategory strong {
  color: #17202a;
  font-size: 20px;
}

.scoreMeter {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 10px;
}

.scoreMeter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}

.scoreOk .scoreMeter span { background: #059669; }
.scoreWarn .scoreMeter span { background: #d97706; }
.scoreFail .scoreMeter span { background: #dc2626; }

.scoreMetaLine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.scoreMetaLine span {
  border: 1px solid #d7dee8;
  border-radius: 999px;
  padding: 3px 7px;
  background: #ffffff;
  color: #607086;
  font-size: 11px;
}

.scoreCategory p {
  margin-top: 8px;
  color: #334155;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scoreEvidence {
  margin-top: 10px;
}

.scoreEvidence summary {
  cursor: pointer;
  color: #17202a;
  font-size: 13px;
  font-weight: 800;
}

.scoreExplanation {
  border: 1px solid #d7dee8;
  border-radius: 6px;
  background: #ffffff;
  padding: 8px;
}

.emptyEvidence {
  color: #607086;
  font-size: 13px;
}

.scoreCategory ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.scoreCategory li {
  border: 1px solid #d7dee8;
  border-radius: 6px;
  background: #ffffff;
  padding: 8px;
}

.scoreCategory li time {
  display: inline-block;
  margin-right: 8px;
  color: #607086;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.scoreCategory li p {
  margin-top: 5px;
  color: #17202a;
}

.scoreCategory li small,
.dialogueScoreViolations li small,
.qualityFlag li small {
  display: block;
  margin-top: 4px;
  color: #607086;
  font-size: 12px;
}

.uncertaintyPanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  border: 1px solid #d7dee8;
  border-left-width: 5px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  margin-bottom: 12px;
}

.uncertaintyPanel.low { border-left-color: #059669; }
.uncertaintyPanel.medium { border-left-color: #d97706; }
.uncertaintyPanel.high { border-left-color: #dc2626; }

.uncertaintyPanel div {
  display: grid;
  gap: 3px;
}

.uncertaintyPanel span,
.uncertaintyPanel small {
  color: #607086;
  font-size: 12px;
}

.uncertaintyPanel strong {
  color: #17202a;
  font-size: 20px;
}

.uncertaintyPanel ul {
  grid-column: 1 / -1;
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.nonProductionPanel {
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  padding: 12px;
  margin-bottom: 12px;
}

.miniSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.miniSectionHeader strong {
  color: #7c2d12;
  font-size: 13px;
}

.miniSectionHeader span {
  border-radius: 999px;
  background: #fed7aa;
  color: #7c2d12;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
}

.nonProductionList {
  display: grid;
  gap: 8px;
}

.nonProductionFlag {
  border: 1px solid #fed7aa;
  border-left-width: 5px;
  border-radius: 6px;
  background: #ffffff;
  padding: 8px 10px;
}

.nonProductionFlag.ok { border-left-color: #059669; }
.nonProductionFlag.warn { border-left-color: #d97706; }
.nonProductionFlag.bad { border-left-color: #dc2626; }

.nonProductionFlag strong,
.nonProductionFlag span {
  display: inline-flex;
  margin-right: 8px;
  font-size: 12px;
}

.nonProductionFlag span {
  color: #607086;
}

.nonProductionFlag p {
  margin-top: 4px;
  color: #334155;
  line-height: 1.4;
}

.dialogueScoreViolations {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.dialogueScoreViolations h3 {
  margin: 0;
  font-size: 13px;
}

.dialogueScoreViolations article {
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff1f2;
  color: #7f1d1d;
  padding: 9px 10px;
}

.dialogueScoreViolations strong,
.dialogueScoreViolations span {
  display: inline-flex;
  margin-right: 8px;
  font-size: 12px;
}

.dialogueScoreViolations p {
  margin-top: 4px;
  line-height: 1.4;
}

.dialogueScoreViolations ul,
.qualityFlag ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.dialogueScoreViolations li,
.qualityFlag li {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px;
}

.dialogueScoreViolations li time,
.qualityFlag li time {
  display: inline-block;
  margin-right: 8px;
  color: #607086;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.qualityReportFlags {
  display: grid;
  gap: 8px;
}

.qualityFlag {
  border: 1px solid #d7dee8;
  border-left-width: 5px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.qualityFlag.ok { border-left-color: #059669; }
.qualityFlag.warn { border-left-color: #d97706; }
.qualityFlag.bad { border-left-color: #dc2626; }

.qualityFlag strong,
.qualityFlag span {
  display: inline-flex;
  margin-right: 8px;
  font-size: 12px;
}

.qualityFlag span {
  color: #607086;
}

.qualityFlag p {
  margin-top: 4px;
  color: #334155;
  line-height: 1.4;
}

.qualityReportArtifacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.qualityReportArtifacts a {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #ffffff;
  color: #17202a;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  text-decoration: none;
  min-width: 0;
}

.qualityReportArtifacts a:hover {
  border-color: #2563eb;
}

.qualityReportArtifacts small {
  color: #607086;
  overflow-wrap: anywhere;
}

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

.player {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.player div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.player h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.player span {
  color: #607086;
  font-size: 12px;
  white-space: nowrap;
}

.player audio {
  width: 100%;
  min-width: 0;
}

.hidden {
  display: none;
}

@media (max-width: 820px) {
  .shell {
    padding: 14px;
  }

  .topbar,
  .grid,
  .split,
  .players {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .meta.horizontal {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .serviceLogLine {
    grid-template-columns: 1fr;
  }
}