.chart-container {
    position: relative;
    width: 100%;
    height: 260px;
}

#strengthChart {
    width: 100%;
    height: 100%;
    display: block;
}

.magnetometer-axis {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: rgba(13, 110, 253, 0.05);
}

.magnetometer-axis strong {
    font-size: 0.95rem;
}

.compass-wrapper {
    width: 220px;
    max-width: 100%;
}

.compass-face {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color, #dee2e6);
    background: radial-gradient(circle at center, rgba(13,110,253,0.08), transparent 60%);
    box-shadow: inset 0 0 25px rgba(13, 110, 253, 0.1);
}

.compass-cardinal {
    position: absolute;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.compass-n { top: 12px; left: 50%; transform: translateX(-50%); }
.compass-e { right: 12px; top: 50%; transform: translateY(-50%); }
.compass-s { bottom: 12px; left: 50%; transform: translateX(-50%); }
.compass-w { left: 12px; top: 50%; transform: translateY(-50%); }

.compass-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 70%;
    transform-origin: 50% 85%;
    transform: translate(-50%, -80%) rotate(0deg);
    transition: transform 0.15s ease-out;
}

.needle-north,
.needle-south {
    position: absolute;
    left: 50%;
    width: 14px;
    height: 50%;
    transform: translateX(-50%);
    border-radius: 50% 50% 10px 10px;
    background: var(--bs-primary, #0d6efd);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.needle-north {
    top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.needle-south {
    bottom: -1px;
    height: 30%;
    background: var(--bs-danger, #dc3545);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.compass-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: var(--bs-body-bg, #fff);
    border: 3px solid var(--bs-primary, #0d6efd);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(13, 110, 253, 0.4);
}

[data-bs-theme="dark"] .magnetometer-axis {
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .compass-face {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 25px rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .compass-cardinal {
    color: var(--bs-body-color, #f8f9fa);
}