.arc-ecg {
display: grid;
gap: 12px;
color: #111827;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.arc-ecg__frame {
position: relative;
overflow: hidden;
min-height: 220px;
border: 1px solid rgba(190, 18, 60, 0.22);
border-radius: 8px;
background: #fffafb;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}
.arc-ecg__canvas {
display: block;
width: 100%;
height: 220px;
}
.arc-ecg__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 13px;
color: #4b5563;
}
.arc-ecg__title {
margin: 0;
color: #111827;
font-size: 15px;
font-weight: 800;
}
.arc-ecg__controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.arc-ecg__button {
min-height: 34px;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 7px;
background: #ffffff;
color: #111827;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.arc-ecg__button:hover {
border-color: rgba(5, 150, 105, 0.45);
}
}
.arc-ecg__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.arc-ecg-multi {
display: grid;
gap: 12px;
color: #111827;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.arc-ecg-multi__grid {
display: grid;
gap: 8px;
}
.arc-ecg-multi__grid[data-mode="six"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.arc-ecg-multi__grid[data-mode="twelve"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.arc-ecg-lead {
position: relative;
overflow: hidden;
min-height: 128px;
border: 1px solid rgba(190, 18, 60, 0.22);
border-radius: 8px;
background: #fffafb;
}
.arc-ecg-lead__label {
position: absolute;
top: 7px;
left: 8px;
z-index: 2;
min-width: 28px;
padding: 3px 6px;
border-radius: 6px;
background: rgba(255, 250, 251, 0.82);
color: #075f46;
font-size: 11px;
font-weight: 850;
line-height: 1;
}
.arc-ecg-lead__canvas {
display: block;
width: 100%;
height: 128px;
}
.arc-ecg-multi__long-strip {
display: grid;
gap: 8px;
}
.arc-ecg-multi__long-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: #344054;
font-size: 13px;
}
.arc-ecg-multi__long-head span {
color: #075f46;
font-weight: 850;
}
.arc-ecg-lead--long {
min-height: 180px;
}
.arc-ecg-lead--long .arc-ecg-lead__canvas {
height: 180px;
}
@media (max-width: 900px) {
.arc-ecg-multi__grid[data-mode="six"],
.arc-ecg-multi__grid[data-mode="twelve"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.arc-ecg-multi__grid[data-mode="six"],
.arc-ecg-multi__grid[data-mode="twelve"] {
grid-template-columns: 1fr;
}
}