/* Functional device visualizations and their input states. */
.device-select,.webcam-device-select { width:100%; min-height:46px; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--inset); padding:10px 14px; font-size:14px; }
.device-status,.speaker-status { border:1px solid var(--line); border-radius:30px; padding:5px 12px; color:var(--muted); font-size:13px; white-space:nowrap; }
.device-status.connected { color:var(--accent); background:var(--green); border-color:#466438; }
.mouse-test-content { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.mouse-test-area { position:relative; display:flex; align-items:center; justify-content:center; min-height:390px; border:1px dashed #506057; border-radius:12px; background:radial-gradient(circle at 50% 40%,#27382b,#131918 72%); user-select:none; }
.mouse-test-area.test-area-active { border-color:var(--accent); }
.mouse-device { position:relative; width:160px; height:240px; border:2px solid #68786c; border-radius:74px 74px 65px 65px; background:linear-gradient(120deg,#303b35,#18241e); box-shadow:0 25px 30px #0005,inset 0 0 0 4px #111b15; }
.mouse-part { position:absolute; top:7px; width:68px; height:98px; border:1px solid #5b6c60; background:#2d3b32; }
.mouse-left { left:7px; border-radius:63px 5px 5px 5px; }.mouse-right { right:7px; border-radius:5px 63px 5px 5px; }
.mouse-part.active,.mouse-wheel.active,.mouse-wheel.middle-pressed { background:var(--accent); box-shadow:0 0 18px #b8ed8533; }
.mouse-wheel { position:absolute; top:27px; left:calc(50% - 9px); width:18px; height:49px; border:2px solid #758b79; border-radius:10px; background:repeating-linear-gradient(#131c16 0 4px,#48594b 4px 6px); }
.mouse-wheel.wheel-up { border-top-color:var(--accent); box-shadow:0 -7px 12px #b8ed8580; }.mouse-wheel.wheel-down { border-bottom-color:var(--accent); box-shadow:0 7px 12px #b8ed8580; }
.mouse-side-buttons { position:absolute; left:-8px; top:112px; display:flex; flex-direction:column; gap:7px; }.mouse-side-button { width:8px; height:31px; background:#3b5141; border:1px solid #708b75; border-radius:4px; }.mouse-side-button.active,.mouse-side-button.side-detected { background:var(--accent); }
.mouse-test-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.mouse-stat { padding:12px 16px; }.mouse-stat strong { font-size:20px; }.mouse-stat span { margin-bottom:4px; }
.mouse-diagnostic-note { margin-top:18px; color:var(--muted); font-size:14px; line-height:1.7; border-top:1px solid var(--line); padding-top:16px; }.mouse-diagnostic-note strong { color:var(--ink); }
.diagnostic-stat.health-good strong { color:var(--accent); }.diagnostic-stat.health-warning strong { color:var(--amber); }.mouse-device.chatter-warning { border-color:var(--amber); }
.mouse-center-label,.live-input-feedback { display:none; }
.test-area-guide { position:absolute; bottom:22px; left:12px; right:12px; text-align:center; pointer-events:none; }.test-area-guide strong { display:block; font-size:14px; font-weight:500; }.test-area-guide span { color:var(--muted); font-size:13px; }.test-area-active .test-area-guide { opacity:.45; }
.touchpad-section { margin-top:20px; }.touchpad-heading { color:var(--muted); font-size:14px; margin-bottom:14px; }.laptop-palmrest { padding:30px; border-radius:12px; background:var(--inset); border:1px solid var(--line); }
.touchpad { position:relative; width:min(580px,100%); height:280px; margin:auto; border:1px solid #617069; border-radius:14px; background:linear-gradient(140deg,#26322b,#1b211e); overflow:hidden; user-select:none; touch-action:none; }
.touchpad.testing,.touchpad.test-area-active { border-color:var(--accent); }.touchpad-hint { display:none; }.touchpad .test-area-guide { top:30px; bottom:auto; }
.touchpad-pointer { position:absolute; left:50%; top:50%; width:12px; height:12px; border:2px solid #d6f5bf; border-radius:50%; background:var(--accent); box-shadow:0 0 20px #b8ed8555; transform:translate(-50%,-50%); pointer-events:none; }.touchpad-pointer.clicking { transform:translate(-50%,-50%) scale(1.7); }
.touchpad-click-zones { position:absolute; bottom:0; left:0; right:0; display:flex; height:44px; border-top:1px solid var(--line); pointer-events:none; }.touchpad-click-zones>div { flex:1; text-align:center; line-height:44px; font-size:13px; color:var(--muted); }.touchpad-click-zones>div:first-child { border-right:1px solid var(--line); }
.touchpad.left-pressed #touchpadLeftZone,.touchpad.right-pressed #touchpadRightZone { background:var(--accent); color:#112212; }.touchpad.touchpad-pressed { box-shadow:inset 0 0 35px #b8ed8518; }
.touchpad-feedback { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#111c14e8; color:var(--accent); padding:8px 16px; border-radius:8px; pointer-events:none; opacity:0; }.touchpad-feedback.show { opacity:1; }
.touchpad-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:18px; }.touchpad-stat { padding:14px; }.touchpad-stat strong { font-size:17px; }
.polling-test-area,.click-test-target,.scroll-test-area { position:relative; display:flex; align-items:center; justify-content:center; min-height:210px; margin:20px 0; border:1px dashed #576b59; border-radius:12px; background-color:#17201a; background-image:radial-gradient(#354439 1px,transparent 1px); background-size:18px 18px; user-select:none; color:#d3e6ca; text-align:center; padding:20px; }
.polling-test-area { touch-action:none; }.click-test-target { cursor:crosshair; font-size:24px; letter-spacing:-.5px; }.click-test-target:active { background-color:#334b2d; border-color:var(--accent); }.polling-test-area:hover { border-color:var(--accent); }
.polling-chart-wrap { height:155px; padding:15px; border:1px solid var(--line); border-radius:10px; background:var(--inset); }#pollingChart { width:100%; height:100%; display:block; }
.health-result { padding:14px 16px; border-radius:9px; font-size:14px; border:1px solid var(--line); }.health-result.neutral { color:var(--muted); background:var(--inset); }.health-result.good { background:var(--green); color:var(--accent); border-color:#4c613b; }.health-result.warning { background:#362d20; color:var(--amber); border-color:#69512d; }
.scroll-visual { position:relative; width:44px; height:150px; background:var(--inset); border:1px solid #536a55; border-radius:25px; }.scroll-indicator { position:absolute; top:calc(50% - 18px); left:7px; width:28px; height:36px; background:var(--accent); border-radius:18px; transition:transform .1s; }.scroll-indicator.up { transform:translateY(-40px); }.scroll-indicator.down { transform:translateY(40px); }
.mic-meter { height:100px; background:#101815; border:1px solid #3d5142; border-radius:12px; overflow:hidden; padding:8px; margin-top:26px; }.mic-level { height:100%; width:0; background:linear-gradient(90deg,#6dbb87,#b8ed85,#e1c373); border-radius:6px; transition:width 55ms linear; }.mic-debug { font:14px/1.6 Consolas,monospace; color:var(--muted); padding-top:16px; }
.permission-note { display:flex; align-items:center; gap:10px; color:var(--muted); background:var(--inset); border:1px solid var(--line); border-radius:9px; padding:13px 16px; font-size:14px; margin:18px 0 0; }
.webcam-preview { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/9; max-height:430px; background:#080c0b; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.webcam-preview video { display:none; width:100%; height:100%; object-fit:contain; }.webcam-placeholder { color:var(--muted); text-align:center; font-size:16px; padding:20px; }
.webcam-controls { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }.webcam-device-select { flex:1; min-width:230px; }.webcam-action-button.active { border-color:#719255; color:var(--accent); background:var(--green); }.webcam-mirrored #webcamVideo { transform:scaleX(-1); }
.webcam-preview:fullscreen { max-height:none; height:100vh; width:100vw; border:0; border-radius:0; }.webcam-preview:fullscreen video { height:100%; width:100%; }.page-webcam-test .metric-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
.speaker-visual { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:25px 0; }.speaker-channel { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:35px; border:1px solid var(--line); background:var(--inset); border-radius:12px; transition:background .15s; }.speaker-channel-icon { display:grid; place-items:center; width:100px; height:100px; border:1px solid #55705a; outline:8px solid #26362a; border-radius:50%; font:36px/1 Consolas,monospace; color:#b4c5b6; }.speaker-channel.active { border-color:var(--accent); background:var(--green); }.speaker-channel.active .speaker-channel-icon { color:var(--accent); box-shadow:0 0 45px #b8ed8522; }
.speaker-actions { display:flex; gap:12px; }.speaker-actions button { flex:1; }.speaker-volume-row { display:flex; align-items:center; gap:18px; margin-top:25px; font-size:14px; }.speaker-volume-row input { flex:1; accent-color:var(--accent); }.speaker-volume-row strong { min-width:44px; font-family:Consolas,monospace; }
.gamepad-buttons { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin-top:22px; }.gamepad-button { display:grid; place-items:center; min-height:58px; color:var(--muted); border:1px solid var(--line); background:var(--inset); border-radius:10px; font:18px/1 Consolas,monospace; }.gamepad-button.active { background:var(--accent); color:#152610; border-color:var(--accent); }
.gamepad-axes { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }.gamepad-axis { display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:9px; padding:15px; font-size:14px; }.gamepad-axis strong { font-family:Consolas,monospace; min-width:40px; }.axis-track { position:relative; flex:1; height:8px; background:#344239; border-radius:4px; }.axis-track::before { content:''; position:absolute; left:50%; height:16px; top:-4px; border-left:1px solid #819981; }.axis-value { position:absolute; top:-3px; width:14px; height:14px; transform:translateX(-50%); background:var(--accent); border-radius:50%; }
.device-empty { text-align:center; border:1px dashed var(--line); border-radius:12px; padding:38px 25px; margin-top:20px; color:var(--muted); }.device-empty .icon { width:42px; height:42px; color:var(--accent); margin-bottom:14px; }.device-empty strong { display:block; color:var(--ink); font-size:20px; margin-bottom:8px; }.device-empty p { margin:0; }
.refresh-result { display:flex; align-items:baseline; justify-content:center; gap:16px; min-height:230px; padding-top:45px; }.refresh-result strong { font:clamp(70px,8vw,110px)/1.3 Consolas,monospace; color:var(--accent); letter-spacing:-5px; }.refresh-result span { color:var(--muted); font-size:26px; }
.pixel-color-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin:30px 0 18px; }.pixel-color { min-height:150px; border:2px solid #6c7771; border-radius:12px; transition:transform .15s; position:relative; }.pixel-color:hover { transform:translateY(-3px); border-color:var(--ink); }.pixel-color.white { background:#fff; }.pixel-color.black { background:#000; }.pixel-color.red { background:#f00; }.pixel-color.green { background:#0f0; }.pixel-color.blue { background:#00f; }
.pixel-color::after { content:attr(data-color-label); position:absolute; left:8px; right:8px; bottom:10px; padding:5px; border-radius:5px; color:white; background:#000b; font:14px/1.3 'Segoe UI',sans-serif; }
.pixel-overlay { display:none; position:fixed; inset:0; z-index:1000; }.pixel-overlay.active { display:block; }.pixel-close { position:absolute; right:24px; top:24px; color:white !important; background:#000c !important; border-color:#888 !important; }
@media(max-width:900px) { .mouse-test-content { grid-template-columns:.8fr 1fr; }.touchpad-stats { grid-template-columns:repeat(3,1fr); }.gamepad-axes { grid-template-columns:1fr; } }
@media(max-width:620px) { .mouse-test-content { grid-template-columns:1fr; }.mouse-test-area { min-height:360px; }.touchpad-stats { grid-template-columns:repeat(2,1fr); }.laptop-palmrest { padding:16px; }.page-webcam-test .metric-row { grid-template-columns:repeat(2,1fr); }.speaker-channel { padding:25px 10px; }.speaker-channel-icon { width:75px; height:75px; }.pixel-color-grid { gap:8px; }.pixel-color { min-height:110px; }.pixel-color::after { font-size:12px; left:2px; right:2px; }.gamepad-buttons { grid-template-columns:repeat(4,1fr); } }