:root { font-family: "Segoe UI", Arial, sans-serif; color: #fff5df; background: #0b080c; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 20%, #421039, #0b080c 65%); }
main { width: min(1100px, 94vw); }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: #c6b7c4; letter-spacing: .14em; font-size: 12px; }
.brand { display: block; width: 190px; height: auto; }
.camera-panel { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 2px solid #5a4258; border-radius: 16px; background: #100d11; box-shadow: 0 30px 90px #000a; }
.publisher { width: 100%; height: 100%; display: grid; place-items: center; color: #a995a6; }
.publisher p { position: absolute; z-index: 0; }
.publisher .OT_publisher { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.connection-status { position: absolute; z-index: 10; right: 18px; top: 18px; padding: 9px 13px; border-radius: 999px; background: #401728dc; border: 1px solid #a83459; color: #ff91b1; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.connection-status.online { background: #143c32dc; border-color: #2bd49c; color: #57ebb8; }
.device-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 16px; padding: 14px; border: 1px solid #51384e; border-radius: 12px; background: #190f19cc; }
.device-controls label { display: grid; gap: 7px; color: #cdbdca; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
select { width: 100%; min-width: 0; border: 1px solid #72546d; border-radius: 9px; padding: 12px; background: #291b28; color: #fff5df; font: 700 14px "Segoe UI", Arial, sans-serif; }
.device-controls .refresh-devices { flex: none; min-height: 43px; padding: 10px 14px; border-color: #72546d; background: #35202e; color: #f3dbe9; font-size: 11px; }
.microphone-test { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; gap: 14px; align-items: center; margin-top: 12px; padding: 12px 14px; border: 1px solid #613b53; border-radius: 12px; background: #1a1019; color: #d6c5d2; }
.microphone-test strong { color: #ff91b1; font-size: 11px; letter-spacing: .1em; }
.microphone-test small { color: #ad9dab; font-size: 12px; }
.microphone-meter { height: 12px; overflow: hidden; border-radius: 999px; background: #070507; box-shadow: inset 0 0 0 1px #52344a; }
.microphone-meter i { display: block; width: 2%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #25d89d 0 72%, #ffd15a 88%, #ff597f 100%); transition: width 80ms linear; }
.microphone-test.online strong { color: #57ebb8; }
.controls { display: flex; gap: 12px; margin-top: 16px; }
button { flex: 1; border: 1px solid #7d6228; border-radius: 10px; padding: 15px; background: linear-gradient(90deg, #f4a814, #ffd46a); color: #2c1703; font: 900 15px "Segoe UI", Arial, sans-serif; cursor: pointer; }
button:last-child { border-color: #67364e; background: #35202e; color: #f3dbe9; }
button:disabled { opacity: .4; cursor: default; }
.help { color: #ad9dab; font-size: 13px; text-align: center; }
#error { min-height: 24px; color: #ff83a8; text-align: center; font-weight: 700; }
@media (max-width: 760px) { .device-controls { grid-template-columns: 1fr; } .microphone-test { grid-template-columns: 1fr; } }