#menuBtn{
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 20;
        width: auto;
        padding: 12px 18px;
        border: none;
        border-radius: 14px;
        background: rgba(20,40,80,0.85);
        color: #d8ecff;
        font-size: 15px;
        cursor: pointer;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(120,180,255,0.25);
        box-shadow:
            0 0 18px rgba(0,140,255,0.25);
        transition: 0.25s;
    }
    #menuBtn:hover{
        transform: translateY(-2px);
        background: rgba(40,80,140,0.95);
        box-shadow:
            0 0 24px rgba(80,180,255,0.45);
    }
  :root{
    --grn:#00F48E;
    --grn-hot:#00FF3C;
    --grn-dim:rgba(0,244,142,.28);
    --grn-faint:rgba(0,244,142,.10);
    --bg:#000000;
    --panel-w:24rem;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:var(--bg)}
  body{
    font-family:'Space Mono','Noto Sans SC',monospace;
    color:var(--grn);
    -webkit-font-smoothing:antialiased;
    user-select:none;
  }
  /* ================= 布局：左展示区 + 右控制面板 ================= */
  #app{display:flex;height:100vh;width:100vw}
  #viewport{
    flex:1;position:relative;overflow:hidden;
    background:radial-gradient(ellipse 90% 70% at 45% 42%, rgba(0,244,142,.05) 0%, rgba(0,0,0,0) 55%), #000;
  }
  #viewport canvas.webgl{position:absolute;inset:0;display:block}

  /* 扫描线 + 暗角 + 网点噪声 */
  #viewport::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
    mix-blend-mode:multiply;
  }
  #viewport::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:7;
    background:radial-gradient(ellipse 120% 105% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
  }

  /* HUD 四角切角边框 */
  .hud-frame{position:absolute;inset:14px;z-index:8;pointer-events:none}
  .hud-frame i{position:absolute;width:26px;height:26px;border:1px solid var(--grn-dim)}
  .hud-frame i:nth-child(1){top:0;left:0;border-right:none;border-bottom:none}
  .hud-frame i:nth-child(2){top:0;right:0;border-left:none;border-bottom:none}
  .hud-frame i:nth-child(3){bottom:0;left:0;border-right:none;border-top:none}
  .hud-frame i:nth-child(4){bottom:0;right:0;border-left:none;border-top:none}

  .hud{position:absolute;z-index:9;pointer-events:none;font-size:11px;letter-spacing:.12em;line-height:1.9;text-transform:uppercase}
  .hud b{color:var(--grn-hot);font-weight:700}
  .hud-tl{bottom:26px;right:30px}
  .hud-tl .big{font-size:15px;font-weight:700;text-shadow:0 0 12px rgba(0,255,60,.55)}
  .hud-bl{bottom:26px;left:30px;opacity:.85}
  .hud-tr{top:26px;right:30px;text-align:right;opacity:.85}
  .cursor{display:inline-block;width:.55em;height:1em;background:var(--grn);vertical-align:-2px;animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .dot{display:inline-block;width:7px;height:7px;border-radius:50rem;background:var(--grn-hot);margin-right:7px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;box-shadow:0 0 8px var(--grn-hot)}
  @keyframes pulse{50%{opacity:.35}}

  /* ================= 右侧控制面板 ================= */
  #panel{
    width:var(--panel-w);flex:0 0 var(--panel-w);height:100%;
    border-left:1px solid var(--grn-dim);
    background:linear-gradient(180deg, rgba(0,24,14,.92), rgba(0,8,5,.96));
    overflow-y:auto;overflow-x:hidden;
    position:relative;z-index:10;
    scrollbar-width:thin;scrollbar-color:var(--grn-dim) transparent;
  }
  #panel::-webkit-scrollbar{width:5px}
  #panel::-webkit-scrollbar-thumb{background:var(--grn-dim)}
  .p-inner{padding:22px 20px 40px}

  .p-head{padding-bottom:16px;border-bottom:1px solid var(--grn-dim);margin-bottom:18px}
  .p-head .tag{font-size:10px;letter-spacing:.35em;opacity:.7}
  .p-head h1{
    font-size:20px;font-weight:700;margin:6px 0 4px;color:var(--grn-hot);
    text-shadow:0 0 14px rgba(0,255,60,.6);letter-spacing:.04em;
  }
  .p-head .sub{font-size:11px;opacity:.75;letter-spacing:.1em}

  .sect{margin-bottom:20px;padding:13px 14px 15px;border:1px solid var(--grn-dim);position:relative;
    clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    background:rgba(0,244,142,.04);
  }
  .sect>h2{
    font-size:10px;font-weight:700;letter-spacing:.3em;color:var(--grn);
    margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase;
  }
  .sect>h2::before{content:">";color:var(--grn-hot)}
  .sect>h2::after{content:"";flex:1;height:1px;background:var(--grn-dim)}

  .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;font-size:11.5px}
  .row:last-child{margin-bottom:0}
  .row label{opacity:.85;letter-spacing:.06em;white-space:nowrap}
  .row .val{color:var(--grn-hot);min-width:64px;text-align:right;font-size:11px}

  select,input[type=range]{accent-color:var(--grn)}
  select{
    background:#00150c;color:var(--grn);border:1px solid var(--grn-dim);
    font-family:inherit;font-size:11.5px;padding:5px 8px;outline:none;cursor:pointer;flex:1;max-width:150px;
  }
  select:hover{border-color:var(--grn)}
  input[type=range]{
    -webkit-appearance:none;appearance:none;flex:1;height:2px;background:var(--grn-dim);outline:none;cursor:pointer;max-width:150px;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:12px;height:12px;background:var(--grn-hot);
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 8px var(--grn-hot);
  }
  input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--grn-hot);border:none;border-radius:0}

  .btn{
    display:block;width:100%;padding:11px 0;margin-bottom:10px;
    background:rgba(0,244,142,.07);border:1px solid var(--grn-dim);color:var(--grn);
    font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.28em;text-align:center;
    cursor:pointer;text-transform:uppercase;position:relative;
    clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition:background .15s,color .15s,border-color .15s;
  }
  .btn:hover{background:rgba(0,244,142,.16);border-color:var(--grn);color:var(--grn-hot)}
  .btn:active{transform:scale(.97)}
  .btn.primary{background:rgba(0,255,60,.14);border-color:var(--grn);color:var(--grn-hot);text-shadow:0 0 10px rgba(0,255,60,.7)}
  .btn.primary:hover{background:rgba(0,255,60,.24)}
  .btn.warn{border-color:rgba(255,170,0,.5);color:#ffb454}
  .btn.warn:hover{background:rgba(255,170,0,.12);border-color:#ffb454}
  .btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
  .btn:last-child{margin-bottom:0}
  .btn-pair{display:flex;gap:10px}
  .btn-pair .btn{flex:1}

  .waveview{
    width:100%;height:52px;display:block;margin-bottom:11px;
    border:1px solid var(--grn-dim);background:rgba(0,0,0,.5);
  }

  .note{font-size:10px;line-height:1.8;opacity:.6;letter-spacing:.05em;margin-top:8px}
  .note b{color:var(--grn);opacity:1}

  /* 导出进度条 */
  #progWrap{display:none;margin-top:10px}
  #progBar{height:8px;border:1px solid var(--grn-dim);position:relative;overflow:hidden}
  #progFill{position:absolute;inset:0;width:0%;background:var(--grn);box-shadow:0 0 12px var(--grn-hot)}
  #progText{font-size:10px;margin-top:6px;letter-spacing:.15em;color:var(--grn-hot)}

  /* 状态行 */
  .stat{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px dashed rgba(0,244,142,.15)}
  .stat:last-child{border-bottom:none}
  .stat .k{opacity:.7}
  .stat .v{color:var(--grn-hot)}

  /* 开机引导层 */
  #boot{
    position:fixed;inset:0;z-index:99;background:#000;display:flex;align-items:center;justify-content:center;
    transition:opacity .8s;
  }
  #boot.done{opacity:0;pointer-events:none}
  #boot pre{
    font-size:13px;line-height:2.1;color:var(--grn);text-shadow:0 0 8px rgba(0,244,142,.6);
    letter-spacing:.08em;white-space:pre-wrap;
  }

  /* 导出时的录制角标 */
  #recBadge{
    display:none;position:absolute;top:26px;left:50%;transform:translateX(-50%);z-index:9;
    font-size:11px;letter-spacing:.3em;color:#ff5d5d;border:1px solid rgba(255,93,93,.5);padding:5px 14px;
  }
  #recBadge.on{display:block;animation:pulse 1s cubic-bezier(.4,0,.6,1) infinite}

  @media (max-width:900px){
    #app{flex-direction:column}
    #viewport{flex:0 0 52vh}
    #panel{width:100%;flex:1;border-left:none;border-top:1px solid var(--grn-dim)}
  }