.app-chart {
    --app-chart-border: #3a3e49;
    --app-chart-panel: #1f222b;
    --app-chart-panel-alt: #292d38;
    --app-chart-text: var(--text-color, #f3f4f6);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--app-chart-border);
    border-radius: .45rem;
    background: var(--app-chart-panel);
    color: var(--app-chart-text);
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

.app-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    min-height: 3.1rem;
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--app-chart-border);
    background: var(--app-chart-panel-alt);
}

.app-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .45rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.app-chart-legend-item i { width: .8rem; height: .8rem; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / 25%); }
.app-chart-legend-item:hover,
.app-chart-legend-item:focus-visible { border-color: #565c69; background: #343946; outline: 0; }
.app-chart-legend-item.is-hidden { opacity: .42; text-decoration: line-through; }

.app-chart-plot { position: relative; height: clamp(30rem, 66vh, 43rem); min-height: 30rem; overflow: hidden; }
.app-chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.app-chart-axis { stroke: #737985; stroke-width: 1; }
.app-chart-gridline { stroke: #454a56; stroke-width: 1; stroke-dasharray: 3 4; }
.app-chart-axis-label { fill: #c3c6ce; font-size: 12px; }
.app-chart-date-label { font-size: 11px; }
.app-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.app-chart-area { opacity: .22; }
.app-chart-marker { stroke: #17191f; stroke-width: 1.5; cursor: pointer; transition: r .12s, filter .12s; }
.app-chart-marker:hover,
.app-chart-marker:focus-visible { r: 7; filter: brightness(1.2); outline: none; }
.app-chart-column { cursor: pointer; opacity: .88; transition: opacity .12s, filter .12s; }
.app-chart-column:hover,
.app-chart-column:focus-visible { opacity: 1; filter: brightness(1.18); outline: none; }

.app-chart-tooltip {
    position: absolute;
    z-index: 20;
    display: grid;
    gap: .12rem;
    min-width: 9rem;
    padding: .55rem .7rem;
    border: 1px solid var(--app-chart-point-color, #626978);
    border-left-width: .3rem;
    border-radius: .3rem;
    background: #151820;
    color: #f7f4e8;
    box-shadow: 0 8px 22px rgb(0 0 0 / 45%);
    pointer-events: none;
    font-size: .82rem;
}

.app-chart-tooltip[hidden] { display: none; }
.app-chart-tooltip span { color: #c7cad1; }
.app-chart-tooltip b { color: #fff; font-size: .92rem; }
.app-chart-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; color: #aaaeb8; text-align: center; }

.app-chart.is-loading::after {
    content: "";
    position: absolute;
    z-index: 30;
    inset: 0;
    background: rgb(20 22 29 / 55%);
    cursor: wait;
}

@media (max-width: 720px) {
    .app-chart-plot { height: 33rem; min-height: 33rem; overflow-x: auto; }
    .app-chart-plot svg { min-width: 42rem; }
    .app-chart-legend { justify-content: flex-start; }
}