:root{--bg-top: #0a1a2f;--bg-bottom: #05101f;--panel: rgba(10, 18, 34, .66);--panel-2: rgba(7, 14, 28, .84);--panel-3: rgba(11, 24, 46, .72);--panel-border: rgba(158, 205, 255, .26);--panel-glow: rgba(102, 182, 255, .18);--text: #eaf4ff;--text-dim: #bbd8ff;--accent: #7ac2ff;--accent-soft: #a6d8ff;--accent-strong: #5ac3ff}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(circle at 18% 16%,#12345f 0%,transparent 35%),linear-gradient(160deg,var(--bg-top) 0%,var(--bg-bottom) 62%);color:var(--text);font-family:Avenir Next,PingFang SC,Microsoft YaHei,sans-serif}body:before{content:"";position:fixed;inset:-20%;pointer-events:none;background:radial-gradient(circle at 20% 26%,rgba(92,174,255,.08) 0%,transparent 32%),radial-gradient(circle at 78% 76%,rgba(58,130,235,.08) 0%,transparent 30%);filter:blur(8px);animation:driftGlow 14s ease-in-out infinite alternate}#app{width:100vw;height:100vh}.hud{position:fixed;left:16px;top:16px;max-width:min(640px,calc(100vw - 32px));padding:12px 14px;border-radius:12px;border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 26px #0208144d,0 0 0 1px #a5d6ff0f inset;pointer-events:none}.hud h1{margin:0 0 6px;font-size:clamp(18px,2vw,24px);line-height:1.2}.hud p{margin:4px 0;color:var(--text-dim);font-size:clamp(12px,1.2vw,14px);line-height:1.35}.panel{position:fixed;right:16px;top:16px;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:12px;border-radius:12px;border:1px solid var(--panel-border);background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel-3) 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 32px #01081266,0 0 24px var(--panel-glow)}.panel h2{margin:4px 0 10px;font-size:18px}.rows{display:grid;gap:10px}.row{padding:8px;border:1px solid rgba(154,206,255,.2);border-radius:10px;background:#ffffff05;transition:border-color .24s ease,background-color .24s ease}.row:focus-within{border-color:#80c9ff73;background:#6ab3ff12}.row-title{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;font-weight:600}select,input[type=range],input[type=number],button{width:100%}select,input[type=number],button{border-radius:8px;border:1px solid rgba(146,196,255,.38);background:#111e37eb;color:var(--text);padding:7px 8px;font-size:14px;transition:transform .16s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease}select:focus,input[type=number]:focus{outline:none;border-color:var(--accent-soft);box-shadow:0 0 0 3px #7ac2ff2e}button:disabled,select:disabled,input:disabled{opacity:.55;cursor:not-allowed}input[type=range]{accent-color:var(--accent)}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#53b1ff99,#82ceffdb)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;border:1px solid rgba(230,245,255,.9);background:#d6efff;margin-top:-4px;box-shadow:0 0 0 4px #72bfff3d}.tbox{display:grid;gap:6px;margin-top:8px}.snaps{margin-top:10px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;align-items:center}.snaps span{grid-column:1 / -1;color:var(--text-dim);font-size:13px}.snaps button,.actions button{cursor:pointer}button:not(:disabled):hover{transform:translateY(-1px);border-color:#a0dcffa6;box-shadow:0 6px 16px #166ebe40}button:not(:disabled):active{transform:translateY(0)}.actions{margin-top:10px}.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metrics{margin-top:10px;padding:8px;border-radius:8px;font-size:13px;line-height:1.5;color:#ddedff;background:#1c3c6252;border:1px solid rgba(112,180,255,.24);box-shadow:0 6px 16px #03102233 inset}.status{margin-top:10px;padding:8px;border-radius:8px;font-size:13px;color:#ddedff;background:#2e5a8e59;border:1px solid rgba(112,180,255,.24);animation:statusPulse 4.5s ease-in-out infinite}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#78b8f46b;border-radius:999px}@keyframes driftGlow{0%{transform:translate3d(-1.5%,-1.2%,0) scale(1)}to{transform:translate3d(1.2%,1%,0) scale(1.04)}}@keyframes statusPulse{0%,to{border-color:#70b4ff3d}50%{border-color:#89cdff73}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:960px){.panel{inset:auto 12px 12px;width:auto;max-height:42vh}.actions-grid{grid-template-columns:1fr}}
