.scdev-recorder {
    box-sizing: border-box;
    max-width: 860px;
    margin: 12px auto;
    padding: 6px 12px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    font: 15px/1.5 system-ui, sans-serif;
}
.scdev-recorder, .scdev-recorder h2, .scdev-recorder h3,
.scdev-recorder p, .scdev-recorder label, .scdev-recorder summary,
.scdev-recorder span, .scdev-recorder-actions a { color: #333 !important; }
.scdev-recorder { background: #fff !important; }
.scdev-recorder h2 { font-size: 24px; }
.scdev-recorder h3 { font-size: 18px; }
.scdev-recorder [hidden] { display: none !important; }
.scdev-recorder h2, .scdev-recorder h3 { color: #333; margin: 6px 0; }
.scdev-recorder p { margin: 6px 0 12px; }
.scdev-recorder-source { border-block: 1px solid #ddd; padding: 6px 0; }
.scdev-recorder summary { cursor: pointer; }
.scdev-recorder label { display: block; margin: 6px 0; }
.scdev-recorder input { box-sizing: border-box; width: 100%; padding: 6px 12px; background: #fff; color: #333; border: 1px solid #bbb; border-radius: 4px; font: inherit; }
.scdev-recorder-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.scdev-recorder button, .scdev-recorder-actions a { padding: 6px 12px; background: #fff; color: #333; border: 1px solid #999; border-radius: 4px; font: inherit; line-height: 1.5; cursor: pointer; text-decoration: none; }
.scdev-recorder button:hover, .scdev-recorder-actions a:hover { border-color: #176f67; color: #176f67; }
.scdev-recorder [data-role="start"], .scdev-recorder [data-role="download"] { border-color: #176f67; font-weight: 600; }
.scdev-recorder button:disabled { opacity: .5; cursor: default; }
.scdev-recorder button { background: #fff !important; color: #333 !important; border: 1px solid #999 !important; }
.scdev-recorder :focus-visible { outline: 2px solid #176f67; outline-offset: 2px; }
.scdev-recorder video { display: block; width: 100%; max-height: 480px; margin: 6px 0; background: #fff; }
.scdev-frame-picker { position: relative; z-index: 1; width: 100%; margin: 6px 0; background: #111; overflow: hidden; }
.scdev-frame-picker video { width: 100%; max-height: 480px; margin: 0; object-fit: contain; pointer-events: none; }
.scdev-frame-box { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 3px solid #26c6b3; box-shadow: 0 0 0 9999px rgba(0,0,0,.48); cursor: move; touch-action: none; pointer-events: auto; }
.scdev-frame-box:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.scdev-frame-box span { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #176f67; cursor: nwse-resize; }
.scdev-frame-tools { display: flex; gap: 6px; margin: 6px 0; }
.scdev-recorder-audio { display: inline-flex !important; align-items: center; gap: 4px; cursor: pointer; }
.scdev-recorder-audio input { width: auto; }
.scdev-recorder-size { display: inline-flex !important; align-items: center; gap: 4px; }
.scdev-recorder select { padding: 6px 12px; background: #fff; color: #333; border: 1px solid #999; border-radius: 4px; font: inherit; }
.scdev-source-preview { max-width: 520px; margin: 8px 0; }
.scdev-source-preview video, .scdev-source-preview iframe { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 300px; margin: 0; border: 1px solid #bbb; background: #111; }
.scdev-source-preview iframe { border: 0; }
.scdev-recorder [data-role="meter"] { font-variant-numeric: tabular-nums; }
.scdev-recorder[data-recording="true"] [data-role="status"] { font-weight: 600; }