.webar-viewer {
    border: 1px solid #dcdcde;
    border-radius: 8px;
    padding: 24px;
    background: #fff;
}

.webar-viewer__headline {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.webar-viewer__body {
    margin: 0 0 12px;
}

.webar-viewer__button {
    margin-top: 12px;
    cursor: pointer;
}

.webar-viewer__button[disabled] {
    cursor: wait;
    opacity: 0.7;
}

.webar-viewer__privacy {
    margin-top: 12px;
    color: #646970;
    font-size: 0.9rem;
}

.webar-viewer__status {
    margin-top: 16px;
    min-height: 1.5em;
}

.webar-viewer__status.is-error {
    color: #b32d2e;
}

.webar-viewer__status.is-success {
    color: #0a7a20;
}

.webar-viewer__stage {
    margin-top: 16px;
}

.webar-viewer__video {
    display: block;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 8px;
    object-fit: cover;
}

.webar-viewer__overlay {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: #f6f7f7;
}

.webar-viewer__overlay-title {
    margin: 0 0 4px;
    font-weight: 600;
}

.webar-viewer__overlay-body {
    margin: 0;
    color: #50575e;
}


.webar-viewer__diagnostics {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #f6f7f7;
}

.webar-viewer__diagnostics summary {
    cursor: pointer;
    font-weight: 600;
}

.webar-viewer__diagnostics-meta {
    margin-top: 12px;
}

.webar-viewer__diagnostics-meta p {
    margin: 0 0 8px;
    word-break: break-word;
}

.webar-viewer__log {
    margin: 12px 0 0 18px;
    padding: 0;
}

.webar-viewer__log-item {
    margin-bottom: 6px;
}

.webar-viewer__log-item--error {
    color: #b32d2e;
}

.webar-viewer__log-item--success {
    color: #0a7a20;
}

.webar-viewer__log-item code {
    word-break: break-all;
}