:root{--webcam-tester-primary:#6366f1;--webcam-tester-primary-hover:#4f46e5;--webcam-tester-primary-light:#818cf8;--webcam-tester-primary-soft:#6366f11a;--webcam-tester-success:#10b981;--webcam-tester-success-soft:#10b9811a;--webcam-tester-warning:#f59e0b;--webcam-tester-warning-soft:#f59e0b1a;--webcam-tester-error:#ef4444;--webcam-tester-error-soft:#ef44441a;--webcam-tester-info:#0ea5e9;--webcam-tester-info-soft:#0ea5e91a;--webcam-tester-bg:#fff;--webcam-tester-bg-subtle:#f8fafc;--webcam-tester-bg-card:#fff;--webcam-tester-text:#0f172a;--webcam-tester-text-secondary:#475569;--webcam-tester-text-muted:#94a3b8;--webcam-tester-border:#e2e8f0;--webcam-tester-border-light:#f1f5f9;--webcam-tester-video-bg:#000;--webcam-tester-capture-btn:#ef4444;--webcam-tester-capture-btn-hover:#dc2626;--webcam-tester-shadow-sm:0 1px 3px #00000014;--webcam-tester-shadow-md:0 4px 12px #0000001a;--webcam-tester-shadow-lg:0 10px 25px #00000026;--webcam-tester-radius:.75rem;--webcam-tester-radius-sm:.5rem;--webcam-tester-radius-lg:1rem}._webcam-tester-container{flex-direction:column;gap:1.25rem;max-width:900px;margin:0 auto;display:flex}._webcam-tester-permission{text-align:center;background:var(--webcam-tester-bg);border-radius:var(--webcam-tester-radius-lg);border-style:solid;border-width:1px;border-color:var(--webcam-tester-border);flex-direction:column;justify-content:center;align-items:center;min-height:400px;padding:2rem;display:flex}._webcam-tester-permission-icon{background:var(--webcam-tester-primary-soft);width:80px;height:80px;color:var(--webcam-tester-primary);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.5rem;display:flex}._webcam-tester-permission-title{color:var(--webcam-tester-text);margin:0 0 .5rem;font-size:1.25rem;font-weight:600}._webcam-tester-permission-desc{color:var(--webcam-tester-text-secondary);max-width:320px;margin:0 0 1.5rem}._webcam-tester-permission-error{background:var(--webcam-tester-error-soft);color:var(--webcam-tester-error);border-radius:var(--webcam-tester-radius-sm);margin-top:1rem;padding:.75rem 1rem;font-size:.875rem;display:none}._webcam-tester-permission-error.visible{display:block}._webcam-tester-main{flex-direction:column;gap:1rem;display:flex}._webcam-tester-header{background:var(--webcam-tester-bg);border-radius:var(--webcam-tester-radius);border-style:solid;border-width:1px;border-color:var(--webcam-tester-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.875rem 1rem;display:flex}._webcam-tester-controls{flex-wrap:wrap;flex:1;gap:1rem;display:flex}._webcam-tester-video-section{flex-direction:column;align-items:center;gap:1rem;display:flex;position:relative}._webcam-tester-video-container{aspect-ratio:16/9;background:var(--webcam-tester-video-bg);border-radius:var(--webcam-tester-radius-lg);width:100%;box-shadow:var(--webcam-tester-shadow-lg);position:relative;overflow:hidden}._webcam-tester-video{object-fit:cover;width:100%;height:100%}._webcam-tester-video--mirrored{transform:scaleX(-1)}._webcam-tester-video--flipped{transform:scaleY(-1)}._webcam-tester-video--mirrored._webcam-tester-video--flipped{transform:scale(-1)}._webcam-tester-video-overlay{z-index:10;gap:.5rem;display:flex;position:absolute;top:.75rem;left:.75rem}._webcam-tester-overlay-badge{-webkit-backdrop-filter:blur(8px);color:#fff;border-radius:var(--webcam-tester-radius-sm);font-variant-numeric:tabular-nums;background:#0009;padding:.375rem .625rem;font-size:.75rem;font-weight:500}._webcam-tester-video-loading{background:var(--webcam-tester-video-bg);color:#fff;z-index:20;flex-direction:column;justify-content:center;align-items:center;gap:1rem;font-size:.875rem;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}._webcam-tester-video-loading.hidden{display:none}._webcam-tester-capture-flash{opacity:0;pointer-events:none;z-index:15;background:#fff;position:absolute;top:0;bottom:0;left:0;right:0}._webcam-tester-capture-flash.flash{animation:.3s ease-out webcam-flash}@keyframes webcam-flash{0%{opacity:.8}to{opacity:0}}._webcam-tester-video-controls{justify-content:center;align-items:center;gap:1.5rem;display:flex}._webcam-tester-info-panel{background:var(--webcam-tester-bg);border-radius:var(--webcam-tester-radius);border-style:solid;border-width:1px;border-color:var(--webcam-tester-border);padding:1rem}._webcam-tester-info-grid{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}._webcam-tester-info-item{flex-direction:column;gap:.25rem;display:flex}._webcam-tester-info-label{color:var(--webcam-tester-text-muted);text-transform:uppercase;letter-spacing:.025em;font-size:.75rem}._webcam-tester-info-value{color:var(--webcam-tester-text);font-size:.875rem;font-weight:500}._webcam-tester-gallery{background:var(--webcam-tester-bg);border-radius:var(--webcam-tester-radius);border-style:solid;border-width:1px;border-color:var(--webcam-tester-border);padding:1rem}._webcam-tester-gallery-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}._webcam-tester-gallery-title{color:var(--webcam-tester-text);font-size:.875rem;font-weight:600}._webcam-tester-gallery-grid{flex-wrap:wrap;gap:.5rem;display:flex}._webcam-tester-modal{z-index:9999;justify-content:center;align-items:center;padding:1rem;display:none;position:fixed;top:0;bottom:0;left:0;right:0}._webcam-tester-modal.visible{display:flex}._webcam-tester-modal-backdrop{-webkit-backdrop-filter:blur(4px);background:#000c;position:absolute;top:0;bottom:0;left:0;right:0}._webcam-tester-modal-content{flex-direction:column;align-items:center;gap:1rem;max-width:90vw;max-height:90vh;display:flex;position:relative}._webcam-tester-modal-close{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;transition:background .2s;display:flex;position:absolute;top:-2.5rem;right:0}._webcam-tester-modal-close:hover{background:#fff3}._webcam-tester-modal-image{border-radius:var(--webcam-tester-radius);max-width:100%;max-height:calc(90vh - 5rem);box-shadow:var(--webcam-tester-shadow-lg)}._webcam-tester-modal-actions{gap:.75rem;display:flex}@media (max-width:768px){._webcam-tester-container{padding-left:1rem;padding-right:1rem}._webcam-tester-header{flex-direction:column;align-items:stretch;gap:.75rem}._webcam-tester-controls{justify-content:space-between}._webcam-tester-info-grid{grid-template-columns:repeat(2,1fr)}._webcam-tester-video-controls{gap:1rem}}@media (max-width:480px){._webcam-tester-permission{min-height:300px;padding:1.5rem}._webcam-tester-controls{flex-direction:column;gap:.75rem}._webcam-tester-select-group{width:100%}}._webcam-tester-btn{border-radius:var(--webcam-tester-radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:opacity .2s,background .2s,box-shadow .2s;display:inline-flex}._webcam-tester-btn--primary{background:var(--webcam-tester-primary);color:#fff;box-shadow:0 2px 8px #6366f140}._webcam-tester-btn--primary:hover{opacity:.9}._webcam-tester-btn--ghost{color:var(--webcam-tester-text-muted);background:0 0;padding:.5rem .75rem}._webcam-tester-btn--ghost:hover{color:var(--webcam-tester-error);background:var(--webcam-tester-error-soft)}._webcam-tester-btn--stop{background:var(--webcam-tester-error-soft);color:var(--webcam-tester-error);padding:.5rem .875rem}._webcam-tester-btn--stop:hover{background:var(--webcam-tester-error);color:#fff}._webcam-tester-select-group{flex-direction:column;gap:.25rem;display:flex}._webcam-tester-label{color:var(--webcam-tester-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.6875rem;font-weight:500}._webcam-tester-select{min-width:140px;max-width:200px;color:var(--webcam-tester-text);background-color:var(--webcam-tester-bg-subtle);border-style:solid;border-width:1px;border-color:var(--webcam-tester-border);border-radius:var(--webcam-tester-radius-sm);cursor:pointer;-webkit-appearance:none;appearance:none;white-space:nowrap;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;padding:.5rem 2rem .5rem .75rem;font-size:.875rem;transition:border-color .2s,box-shadow .2s;overflow:hidden}._webcam-tester-select:hover{border-color:var(--webcam-tester-primary-light)}._webcam-tester-select:focus{border-color:var(--webcam-tester-primary);box-shadow:0 0 0 3px var(--webcam-tester-primary-soft);outline:none}._webcam-tester-control-btn{background:var(--webcam-tester-bg);border-style:solid;border-width:2px;border-color:var(--webcam-tester-border);width:44px;height:44px;color:var(--webcam-tester-text-muted);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}._webcam-tester-control-btn:hover{border-color:var(--webcam-tester-primary-light);color:var(--webcam-tester-primary)}._webcam-tester-control-btn.active{background:var(--webcam-tester-primary-soft);border-color:var(--webcam-tester-primary);color:var(--webcam-tester-primary)}._webcam-tester-capture-btn{border-style:solid;border-width:4px;border-color:var(--webcam-tester-capture-btn);cursor:pointer;background:0 0;border-radius:50%;width:64px;height:64px;padding:0;transition:opacity .2s,box-shadow .2s}._webcam-tester-capture-btn:hover{box-shadow:0 0 0 4px var(--webcam-tester-error-soft)}._webcam-tester-capture-btn:active ._webcam-tester-capture-icon{transform:scale(.9)}._webcam-tester-capture-icon{background:var(--webcam-tester-capture-btn);border-radius:50%;width:48px;height:48px;margin:4px;transition:transform .15s;display:block}._webcam-tester-spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:32px;height:32px;animation:.8s linear infinite webcam-spin}@keyframes webcam-spin{to{transform:rotate(360deg)}}._webcam-tester-lighting{align-items:center;gap:.375rem;display:inline-flex}._webcam-tester-lighting-dot{background:var(--webcam-tester-text-muted);border-radius:50%;width:8px;height:8px}._webcam-tester-lighting.good ._webcam-tester-lighting-dot{background:var(--webcam-tester-success);box-shadow:0 0 6px var(--webcam-tester-success)}._webcam-tester-lighting.low ._webcam-tester-lighting-dot{background:var(--webcam-tester-warning);box-shadow:0 0 6px var(--webcam-tester-warning)}._webcam-tester-lighting.bright ._webcam-tester-lighting-dot{background:var(--webcam-tester-info);box-shadow:0 0 6px var(--webcam-tester-info)}._webcam-tester-gallery-item{flex-direction:column;gap:.375rem;display:flex}._webcam-tester-gallery-thumb{border-radius:var(--webcam-tester-radius-sm);border:2px solid var(--webcam-tester-border);cursor:zoom-in;width:100px;height:75px;transition:border-color .2s;position:relative;overflow:hidden}._webcam-tester-gallery-thumb:hover{border-color:var(--webcam-tester-primary-light)}._webcam-tester-gallery-thumb img{object-fit:cover;width:100%;height:100%}._webcam-tester-gallery-thumb-zoom{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;pointer-events:none;background:#0009;border:none;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;transition:background .2s;display:flex;position:absolute;top:4px;right:4px}._webcam-tester-gallery-thumb:hover ._webcam-tester-gallery-thumb-zoom{background:var(--webcam-tester-primary)}._webcam-tester-gallery-actions{gap:.25rem;display:flex}._webcam-tester-gallery-action-btn{border:1px solid var(--webcam-tester-border);border-radius:var(--webcam-tester-radius-sm);background:var(--webcam-tester-bg);color:var(--webcam-tester-text-muted);cursor:pointer;flex:1;justify-content:center;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.6875rem;font-weight:500;transition:all .2s;display:flex}._webcam-tester-gallery-action-btn:hover{border-color:var(--webcam-tester-primary);color:var(--webcam-tester-primary)}._webcam-tester-gallery-action-btn--delete:hover{border-color:var(--webcam-tester-error);color:var(--webcam-tester-error);background:var(--webcam-tester-error-soft)}._webcam-tester-audio-section{border-top-style:solid;border-top-width:1px;border-top-color:var(--webcam-tester-border-light);margin-top:1rem;padding-top:1rem}._webcam-tester-audio-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}._webcam-tester-audio-label{color:var(--webcam-tester-text-secondary);text-transform:uppercase;letter-spacing:.025em;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;display:flex}._webcam-tester-audio-label svg{color:var(--webcam-tester-primary)}._webcam-tester-audio-value{font-variant-numeric:tabular-nums;color:var(--webcam-tester-text);font-size:.8125rem;font-weight:600}._webcam-tester-audio-meter{position:relative}._webcam-tester-audio-meter-track{background:var(--webcam-tester-bg-subtle);border-radius:6px;height:12px;position:relative;overflow:hidden}._webcam-tester-audio-meter-fill{background:linear-gradient(90deg,var(--webcam-tester-success)0%,var(--webcam-tester-success)60%,var(--webcam-tester-warning)80%,var(--webcam-tester-error)100%);background-size:100% 100%;border-radius:6px;width:0;height:100%;transition:width 50ms ease-out;position:absolute;top:0;left:0}._webcam-tester-audio-meter-peak{background:var(--webcam-tester-text);opacity:.8;border-radius:1px;width:3px;height:100%;transition:left 50ms ease-out,opacity .3s;position:absolute;top:0}._webcam-tester-audio-meter-markers{color:var(--webcam-tester-text-muted);justify-content:space-between;margin-top:.25rem;font-size:.625rem;display:flex}._webcam-tester-audio-status{color:var(--webcam-tester-text-muted);text-align:center;margin-top:.5rem;font-size:.75rem}._webcam-tester-audio-status.active{color:var(--webcam-tester-success)}._webcam-tester-audio-status.error{color:var(--webcam-tester-error)}@media (max-width:768px){._webcam-tester-select{width:100%;max-width:100%}}