.device-test-intro { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(110deg,#f5f5ff,#f7fbff); }
.device-test-icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 12px; background: #ecebff; color: #6663bc; font-size: 20px; font-weight: 800; }
.device-test-intro strong { color: var(--text); font-size: 14px; }
.device-test-intro p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.device-test-actions { margin: 0 0 14px; }
.device-test-status { color: var(--muted); font-size: 12px; }
.keyboard-test-stage { padding: 18px; border: 1px solid var(--border); border-radius: 13px; outline: 0; background: #f8f9fc; transition: .18s ease; }
.keyboard-test-stage:focus-visible,.keyboard-test-stage.is-active { border-color: #a7a4e5; box-shadow: 0 0 0 3px rgba(113,108,205,.11); }
.keyboard-test-focus { margin-bottom: 15px; color: #8b90a1; font-size: 11px; text-align: center; }
.keyboard-layout { display: grid; gap: 6px; max-width: 700px; margin: 0 auto; }
.keyboard-row { display: flex; justify-content: center; gap: 5px; }
.keyboard-key { display: grid; min-width: 32px; height: 34px; flex: 1; max-width: 46px; place-items: center; padding: 0 5px; border: 1px solid #dfe1eb; border-bottom-width: 3px; border-radius: 6px; background: #fff; color: #565b6d; font: inherit; font-size: 10px; line-height: 1.1; transition: background .08s,border-color .08s,transform .08s; }
.keyboard-key[data-width="1.5"] { flex: 1.5; max-width: 66px; }
.keyboard-key[data-width="2"] { flex: 2; max-width: 84px; }
.keyboard-key[data-width="2.5"] { flex: 2.5; max-width: 104px; }
.keyboard-key[data-width="5"] { flex: 5; max-width: 240px; }
.keyboard-key.is-pressed { transform: translateY(2px); border-color: #7774cf; border-bottom-width: 1px; background: #e8e7ff; color: #514eab; box-shadow: inset 0 0 0 1px rgba(119,116,207,.08); }
.keyboard-test-readout,.mouse-test-readout { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 15px; }
.keyboard-test-readout>div,.mouse-test-readout>div { display: flex; min-height: 75px; flex-direction: column; justify-content: center; gap: 5px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.keyboard-test-readout span,.mouse-test-readout>div>span:not(.mouse-button-icon) { color: var(--muted); font-size: 10px; }
.keyboard-test-readout strong,.mouse-test-readout strong { overflow: hidden; color: var(--text); font: 700 13px/1.35 Consolas,"Microsoft YaHei",sans-serif; text-overflow: ellipsis; }
.device-test-note { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.speed-test-disclaimer { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #eddaa9; border-radius: 10px; background: #fff9e9; color: #79663c; font-size: 11px; line-height: 1.7; }
.speed-test-disclaimer strong { color: #8e6b21; font-size: 12px; }
.speed-test-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; align-items: end; }
.speed-test-controls .field select { background: #fff; }
.speed-test-controls .button { height: 52px; min-width: 112px; }
.speed-test-progress { display: flex; align-items: center; gap: 15px; margin: 22px 0 14px; color: var(--muted); font-size: 11px; }
.speed-test-progress>span { min-width: 130px; }
.speed-test-progress>div { height: 5px; flex: 1; overflow: hidden; border-radius: 9px; background: #ececf2; }
.speed-test-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6d69c2,#50b7a1); transition: width .2s ease; }
.speed-test-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.speed-test-metrics article { position: relative; display: flex; min-height: 154px; flex-direction: column; justify-content: center; padding: 18px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg,#fff,#fafaff); }
.speed-metric-icon { position: absolute; top: 15px; right: 16px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #efeffb; color: #6c69bd; font-size: 16px; font-weight: 800; }
.speed-metric-label { color: var(--muted); font-size: 11px; }
.speed-test-metrics strong { margin-top: 12px; color: var(--text); font: 700 30px/1 Consolas,"Microsoft YaHei",sans-serif; letter-spacing: -.04em; }
.speed-test-metrics strong small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.speed-test-metrics em { margin-top: 9px; color: #9296a5; font-size: 10px; font-style: normal; }
.speed-test-result { min-height: 46px; margin-top: 13px; padding: 12px 14px; border-radius: 9px; background: #f7f8fb; color: var(--muted); font-size: 11px; line-height: 1.65; }
.reaction-test-intro { display: flex; gap: 13px; align-items: center; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(110deg,#fff8ee,#fff); }
.reaction-test-badge { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 13px; background: #fff0dc; color: #d58327; font-size: 13px; font-weight: 900; }
.reaction-test-intro strong { color: var(--text); font-size: 13px; }
.reaction-test-intro p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.reaction-test-stage { display: flex; width: 100%; min-height: 278px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 15px; background: linear-gradient(145deg,#444477,#35365f); color: #fff; cursor: pointer; transition: background .18s ease,transform .12s ease; }
.reaction-test-stage:hover { transform: translateY(-1px); }
.reaction-test-stage:active { transform: scale(.995); }
.reaction-stage-kicker { color: rgba(255,255,255,.69); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.reaction-test-stage strong { font-size: 28px; letter-spacing: -.03em; }
.reaction-test-stage small { color: rgba(255,255,255,.72); font-size: 12px; }
.reaction-test-stage.is-ready { background: linear-gradient(145deg,#e6a33b,#d67d2b); }
.reaction-test-stage.is-waiting { background: linear-gradient(145deg,#45465e,#323348); cursor: wait; }
.reaction-test-stage.is-go { background: linear-gradient(145deg,#32b77a,#1b9562); }
.reaction-test-stage.is-early { background: linear-gradient(145deg,#e06b68,#c84450); }
.reaction-test-stage.is-done { background: linear-gradient(145deg,#4c78c2,#405ba5); }
.reaction-test-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.reaction-test-stats>div { display: flex; min-height: 73px; flex-direction: column; justify-content: center; gap: 5px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.reaction-test-stats span { color: var(--muted); font-size: 10px; }
.reaction-test-stats strong { color: var(--text); font: 700 16px Consolas,"Microsoft YaHei",sans-serif; }
.reaction-test-history { display: flex; min-height: 43px; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); font-size: 10px; }
.reaction-history-chip { padding: 5px 9px; border-radius: 7px; background: #f1f1fb; color: #6461aa; font: 700 11px Consolas,sans-serif; }
.dark .speed-test-disclaimer { border-color: #625333; background: #302a1c; color: #dfd1ac; }
.dark .speed-test-disclaimer strong { color: #efcb72; }
.dark .speed-test-controls .field select,.dark .speed-test-metrics article { background: #202131; }
.dark .speed-test-result { background: #191a28; }
.dark .reaction-test-intro { background: linear-gradient(110deg,#302a25,#202131); }
.dark .reaction-test-badge { background: #473729; color: #f0bb75; }
.dark .reaction-history-chip { background: #302f4a; color: #c5c2ff; }
.mouse-test-stage { position: relative; display: grid; min-height: 290px; place-items: center; overflow: hidden; border: 1px dashed #b8bdd2; border-radius: 14px; outline: 0; background: radial-gradient(circle at center,#fff 0,#f8f9fd 75%); cursor: crosshair; }
.mouse-test-stage::before { position: absolute; inset: 12px; border: 1px solid rgba(202,205,222,.38); border-radius: 10px; content: ""; pointer-events: none; }
.mouse-test-stage.is-hover { border-color: #9b98dc; background: radial-gradient(circle at center,#fff 0,#f4f4ff 75%); }
.mouse-test-target { display: grid; width: 152px; height: 152px; align-content: center; justify-items: center; gap: 5px; border: 1px solid #e4e5ef; border-radius: 50%; background: #fff; box-shadow: 0 10px 28px rgba(48,52,84,.08); color: #53586c; transition: .15s ease; pointer-events: none; }
.mouse-test-target span { font-size: 14px; font-weight: 800; }
.mouse-test-target small { color: #9095a5; font-size: 10px; }
.mouse-test-stage.is-pressed .mouse-test-target { transform: scale(.96); border-color: #a19ee0; background: #f1f0ff; }
.mouse-test-coordinate { position: absolute; right: 18px; bottom: 15px; color: #7d8294; font: 11px Consolas,monospace; }
.mouse-test-readout { grid-template-columns: repeat(5,minmax(0,1fr)); }
.mouse-test-readout>div { position: relative; align-items: flex-start; padding-left: 48px; }
.mouse-button-icon { position: absolute; left: 12px; top: 50%; display: grid; width: 27px; height: 27px; place-items: center; transform: translateY(-50%); border-radius: 8px; background: #f0efff; color: #6b68bc; font-size: 10px; font-weight: 800; }
.mouse-button-status.is-pressed { border-color: #918ed9; background: #f8f7ff; }
.mouse-button-status.is-pressed .mouse-button-icon { background: #6d69c2; color: #fff; }
.mouse-test-readout strong { font-size: 11px; }
.dark .device-test-intro { background: linear-gradient(110deg,#25253b,#202a37); }
.dark .device-test-icon,.dark .mouse-button-icon { background: #343351; color: #c2c0ff; }
.dark .keyboard-test-stage,.dark .mouse-test-stage { background: #1b1d2c; }
.dark .keyboard-key,.dark .mouse-test-target { border-color: #414357; background: #292b3e; color: #e3e4ed; }
.dark .keyboard-key.is-pressed,.dark .mouse-test-stage.is-pressed .mouse-test-target { border-color: #8581db; background: #383650; color: #fff; }
.dark .mouse-test-stage.is-hover { background: radial-gradient(circle at center,#29283d 0,#222335 75%); }
.dark .mouse-button-status.is-pressed { border-color: #7773cb; background: #29283e; }
@media(max-width:720px) { .keyboard-test-readout { grid-template-columns: repeat(2,minmax(0,1fr)); } .mouse-test-readout { grid-template-columns: repeat(2,minmax(0,1fr)); } .mouse-test-stage { min-height: 245px; } .keyboard-test-stage { padding: 12px 7px; overflow-x: auto; } .keyboard-layout { min-width: 570px; } .speed-test-metrics { grid-template-columns: 1fr; } .speed-test-metrics article { min-height: 122px; } .reaction-test-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:450px) { .speed-test-controls { grid-template-columns: 1fr; } .speed-test-controls .button { width: 100%; } .speed-test-progress { gap: 8px; } .speed-test-progress>span { min-width: 100px; } }

.screen-test-preview { display:flex; min-height:250px; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; border:1px solid var(--border); border-radius:15px; background:#fff; color:#151515; transition:background .16s,color .16s; }
.screen-test-preview.is-dark { color:#fff; }
.screen-test-preview span { font-size:22px; font-weight:800; }
.screen-test-preview small { opacity:.62; }
.screen-test-palette { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; margin-bottom:15px; }
.screen-test-palette button { display:flex; min-height:52px; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); cursor:pointer; }
.screen-test-palette button span { width:20px; height:20px; border:1px solid rgba(80,84,104,.22); border-radius:50%; background:var(--screen-color); }
.screen-test-palette button.is-active { border-color:#7975cd; box-shadow:0 0 0 3px rgba(109,105,194,.1); }
.screen-test-fullscreen { position:fixed; inset:0; z-index:9999; cursor:pointer; background:#fff; color:#111; }
.screen-test-fullscreen.is-dark { color:#fff; }
.screen-test-fullscreen[hidden] { display:none; }
.screen-test-hud { position:absolute; left:50%; bottom:30px; display:grid; min-width:310px; transform:translateX(-50%); justify-items:center; gap:4px; padding:14px 18px; border-radius:14px; background:rgba(20,22,32,.72); box-shadow:0 8px 30px rgba(0,0,0,.2); color:#fff; cursor:default; backdrop-filter:blur(9px); }
.screen-test-hud strong { font-size:17px; }
.screen-test-hud span,.screen-test-hud small { color:rgba(255,255,255,.76); font-size:11px; }
.screen-test-hud button { margin-top:7px; padding:7px 16px; border:1px solid rgba(255,255,255,.3); border-radius:8px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.media-device-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end; margin-bottom:14px; }
.microphone-monitor { overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#f7f8fc; }
.microphone-monitor canvas { display:block; width:100%; height:220px; }
.microphone-level { display:grid; grid-template-columns:auto minmax(0,1fr) 42px; align-items:center; gap:12px; padding:12px 15px; border-top:1px solid var(--border); background:var(--card); color:var(--muted); font-size:11px; }
.microphone-level>div { height:9px; overflow:hidden; border-radius:10px; background:#e8e9f1; }
.microphone-level i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#55b991,#e1ae45,#df6268); transition:width .08s linear; }
.microphone-level strong { text-align:right; color:var(--text); font:700 12px Consolas,monospace; }
.microphone-recording { display:flex; align-items:center; gap:12px; margin-top:13px; padding:13px; border:1px solid var(--border); border-radius:11px; background:#f8f9fc; }
.microphone-recording audio { min-width:0; flex:1; height:38px; }
.camera-test-controls { display:grid; grid-template-columns:1fr 1fr auto; gap:13px; align-items:end; margin-bottom:14px; }
.camera-mirror { min-height:52px; align-items:center; }
.camera-test-stage { position:relative; display:grid; min-height:390px; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:15px; background:linear-gradient(145deg,#171925,#272a3e); color:#c5c8d6; }
.camera-test-stage video { display:block; width:100%; max-height:68vh; object-fit:contain; }
.camera-test-stage video.is-mirrored { transform:scaleX(-1); }
.camera-test-stage>span { position:absolute; font-size:13px; }
.camera-resolution-badge { position:absolute; right:13px; bottom:13px; padding:6px 9px; border-radius:7px; background:rgba(14,16,25,.65); color:#fff; font:11px Consolas,monospace; backdrop-filter:blur(6px); }
.camera-capture-result { display:grid; grid-template-columns:minmax(0,2fr) minmax(180px,1fr); gap:16px; align-items:center; margin-top:15px; padding:14px; border:1px solid var(--border); border-radius:13px; }
.camera-capture-result canvas { width:100%; max-height:360px; border-radius:9px; object-fit:contain; background:#111; }
.camera-capture-result p { color:var(--muted); font-size:11px; }
.speaker-settings { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.speaker-channel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.speaker-channel-grid button { display:flex; min-height:180px; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,#fff,#f7f7fd); color:var(--text); cursor:pointer; transition:.16s ease; }
.speaker-channel-grid button:hover,.speaker-channel-grid button.is-playing { transform:translateY(-2px); border-color:#8884d5; box-shadow:0 10px 25px rgba(70,67,134,.1); }
.speaker-channel-grid button.is-playing { background:#efefff; }
.speaker-symbol { display:grid; min-width:58px; height:58px; place-items:center; padding:0 10px; border-radius:50%; background:#ecebff; color:#6561b8; font-size:17px; font-weight:900; }
.speaker-channel-grid small { color:var(--muted); font-size:10px; }
.speaker-visualizer { display:flex; height:38px; align-items:flex-end; justify-content:center; gap:13px; margin:13px 0; }
.speaker-visualizer span { width:70px; height:100%; transform:scaleY(.08); transform-origin:bottom; border-radius:8px 8px 3px 3px; background:linear-gradient(#7773ce,#a5a2e4); transition:transform .15s ease; }
.speaker-visualizer i { width:1px; height:100%; background:var(--border); }
.dark .microphone-monitor,.dark .microphone-recording { background:#1b1d2c; }
.dark .microphone-level { background:#202131; }
.dark .microphone-level>div { background:#343648; }
.dark .speaker-channel-grid button { background:linear-gradient(145deg,#27293b,#202131); }
.dark .speaker-channel-grid button.is-playing { background:#343351; }
.dark .screen-test-palette button { background:#202131; }
@media(max-width:720px) { .screen-test-palette { grid-template-columns:repeat(3,1fr); } .media-device-toolbar,.camera-test-controls,.speaker-settings { grid-template-columns:1fr; } .camera-test-stage { min-height:260px; } .camera-capture-result { grid-template-columns:1fr; } .speaker-channel-grid { grid-template-columns:1fr; } .speaker-channel-grid button { min-height:120px; } }
@media(max-width:450px) { .microphone-recording { align-items:stretch; flex-direction:column; } .screen-test-hud { width:calc(100% - 30px); min-width:0; } }

.refresh-stage { display:flex; min-height:180px; flex-direction:column; align-items:center; justify-content:center; gap:7px; margin-bottom:14px; padding:24px; border:1px solid var(--border); border-radius:15px; background:linear-gradient(145deg,#f8f8ff,#f3f7fc); cursor:pointer; }
.refresh-stage strong { color:var(--text); font-size:15px; }
.refresh-stage small { color:var(--muted); font-size:10px; }
.refresh-track { position:relative; width:min(680px,92%); height:42px; margin-bottom:13px; border-radius:24px; background:linear-gradient(90deg,#eae9fb,#f4f4fb); box-shadow:inset 0 0 0 1px rgba(108,105,189,.08); }
#refresh-orb { position:absolute; left:-13px; top:8px; width:26px; height:26px; border-radius:50%; background:linear-gradient(145deg,#817dd8,#5f5bad); box-shadow:0 5px 13px rgba(77,73,155,.28); }
.refresh-stage:not(.is-running) #refresh-orb { left:calc(50% - 13px)!important; }
.refresh-metrics,.network-stability-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:13px; }
.refresh-metrics article,.network-stability-metrics article { display:flex; min-height:92px; flex-direction:column; justify-content:center; gap:9px; padding:14px; border:1px solid var(--border); border-radius:11px; background:var(--card); }
.refresh-metrics span,.network-stability-metrics span { color:var(--muted); font-size:10px; }
.refresh-metrics strong,.network-stability-metrics strong { color:var(--text); font:700 20px Consolas,"Microsoft YaHei",sans-serif; }
.refresh-metrics small,.network-stability-metrics small { color:var(--muted); font-size:10px; font-weight:500; }
.refresh-chart,.network-chart { overflow:hidden; margin-bottom:14px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.refresh-chart canvas,.network-chart canvas { display:block; width:100%; height:190px; }
.touch-stage { position:relative; min-height:430px; overflow:hidden; border:1px solid var(--border); border-radius:15px; background:radial-gradient(circle at center,#fff,#f7f8fc); touch-action:none; user-select:none; }
.touch-stage canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.touch-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--muted); pointer-events:none; }
.touch-placeholder[hidden] { display:none; }
.touch-placeholder strong { color:var(--text); font-size:16px; }
.touch-placeholder span { font-size:11px; }
.touch-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:13px 0; }
.touch-metrics>div { display:flex; min-height:72px; flex-direction:column; justify-content:center; gap:5px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.touch-metrics span { color:var(--muted); font-size:10px; }
.touch-metrics strong { color:var(--text); font:700 16px Consolas,"Microsoft YaHei",sans-serif; }
.gamepad-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; margin-bottom:14px; }
.gamepad-empty { display:flex; min-height:260px; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:25px; border:1px dashed #bfc2d3; border-radius:14px; background:#fafafe; color:var(--muted); text-align:center; }
.gamepad-empty[hidden],.gamepad-panel[hidden] { display:none; }
.gamepad-empty-icon { display:grid; width:52px; height:52px; place-items:center; border-radius:50%; background:#ecebff; color:#6965bc; font-size:28px; }
.gamepad-empty strong { color:var(--text); font-size:14px; }
.gamepad-empty p { max-width:430px; margin:0; font-size:11px; line-height:1.7; }
.gamepad-panel { padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.gamepad-info { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:16px; padding-bottom:13px; border-bottom:1px solid var(--border); }
.gamepad-info strong { flex:1 1 300px; color:var(--text); font-size:13px; }
.gamepad-info span { color:var(--muted); font-size:10px; }
.gamepad-axes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-bottom:16px; }
.gamepad-stick { display:grid; justify-items:center; gap:8px; padding:14px; border:1px solid var(--border); border-radius:12px; background:#f8f9fc; }
.gamepad-stick>strong { color:var(--text); font-size:11px; }
.gamepad-stick>small { color:var(--muted); font:10px Consolas,monospace; }
.gamepad-stick-area { position:relative; width:112px; height:112px; border:1px solid #cfd1df; border-radius:50%; background:radial-gradient(circle,#fff 0 9%,#e8e9f2 10% 11%,#f4f5f9 12% 100%); }
.gamepad-stick-area i::before,.gamepad-stick-area i::after { position:absolute; background:#d9dbe6; content:""; }
.gamepad-stick-area i::before { left:50%; top:8px; bottom:8px; width:1px; }
.gamepad-stick-area i::after { top:50%; left:8px; right:8px; height:1px; }
.gamepad-stick-area span { position:absolute; left:calc(50% - 10px); top:calc(50% - 10px); width:20px; height:20px; border-radius:50%; background:#6e6ac3; box-shadow:0 4px 10px rgba(63,59,135,.3); transition:transform .03s linear; }
.gamepad-buttons { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; }
.gamepad-button { display:grid; grid-template-columns:auto 1fr; gap:5px 9px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:9px; background:#f8f9fc; }
.gamepad-button>span { display:grid; width:28px; height:28px; grid-row:1/3; place-items:center; border-radius:50%; background:#e9e9f4; color:#696d80; font:700 9px Consolas,monospace; }
.gamepad-button>strong { color:var(--text); font:700 10px Consolas,monospace; }
.gamepad-button>i { height:4px; overflow:hidden; border-radius:5px; background:#e3e4ec; }
.gamepad-button>i b { display:block; width:0; height:100%; background:#7773cc; }
.gamepad-button.is-pressed { border-color:#8581d1; background:#f0efff; }
.gamepad-button.is-pressed>span { background:#6e6ac3; color:#fff; }
.gamepad-status { margin-top:12px; }
.network-stability-controls { display:grid; grid-template-columns:1fr 1fr auto; gap:13px; align-items:end; }
.network-stability-controls .button { min-width:116px; height:52px; }
.network-stability-progress { display:flex; align-items:center; gap:13px; margin:18px 0 13px; color:var(--muted); font-size:10px; }
.network-stability-progress>span { min-width:105px; }
.network-stability-progress>div { height:6px; flex:1; overflow:hidden; border-radius:8px; background:#e8e9f1; }
.network-stability-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6e6ac3,#49ad91); transition:width .18s ease; }
.network-chart canvas { height:220px; }
.dark .refresh-stage { background:linear-gradient(145deg,#25263a,#1d2330); }
.dark .refresh-track { background:#303246; }
.dark .touch-stage { background:radial-gradient(circle at center,#292b3e,#1c1e2c); }
.dark .gamepad-empty,.dark .gamepad-stick,.dark .gamepad-button { background:#202231; }
.dark .gamepad-stick-area { border-color:#4b4e63; background:radial-gradient(circle,#33354a 0 9%,#54566b 10% 11%,#252738 12% 100%); }
.dark .gamepad-button.is-pressed { background:#343351; }
.dark .network-stability-progress>div { background:#343648; }
@media(max-width:720px) { .refresh-metrics,.network-stability-metrics,.touch-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .touch-stage { min-height:360px; } .gamepad-toolbar,.network-stability-controls { grid-template-columns:1fr; } .network-stability-controls .button { width:100%; } }
@media(max-width:450px) { .refresh-stage { min-height:145px; padding:17px 10px; } .refresh-track { width:94%; } .refresh-metrics,.network-stability-metrics { grid-template-columns:1fr 1fr; } .refresh-metrics article,.network-stability-metrics article { min-height:80px; padding:11px; } .refresh-metrics strong,.network-stability-metrics strong { font-size:16px; } .touch-stage { min-height:310px; } .touch-metrics { grid-template-columns:1fr 1fr; } .gamepad-axes { grid-template-columns:1fr; } .network-stability-progress { align-items:stretch; flex-direction:column; gap:7px; } }