#pano {
      width: 100%;
      height: 100%;
      background: #000;
      position: relative;
    }
    .controlsx {
      position: absolute;
      bottom: 20px;
      left: 55%;
      transform: translateX(-50%);
      z-index: 1000;
    }
    .controlsx button {
      padding: 10px 20px;
      font-size: 16px;
    }

    .scene-title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 18px;
  z-index: 1000;
}



 :root {
      --bg: #0b0e14;
      --panel: #111521;
      --ink: #e6e6e6;
      --muted: #9aa3b2;
      --accent: #5eead4;
      --line: #2b3242;
    }
    * { box-sizing: border-box; }
    /*body {
      margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
      background: var(--bg); color: var(--ink);
      min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
    }*/
    /*header, footer { padding: 16px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
    header h1 { font-size: 18px; margin: 0; letter-spacing: 0.2px; }
    */
    main { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 16px; }
    @media (max-width: 980px) { main { grid-template-columns: 1fr; } }
    .card {
      background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
      box-shadow: 0 10px 24px rgba(0,0,0,0.25); overflow: hidden;
    }
    .controls { padding: 14px; display: grid; gap: 12px; }
    .controls h2 { font-size: 14px; margin: 6px 0 0; color: var(--muted); font-weight: 600; }
    /*.row { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 10px; }*/
    label { font-size: 13px; color: var(--ink); opacity: 0.9; }
    input, select {
      width: 100%; appearance: none; background: #0e1320; color: var(--ink);
      border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px;
    }
    input[type="checkbox"] { width: auto; }
    .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
    button {
      background: linear-gradient(180deg, #162034, #0e182a); color: var(--ink);
      border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px;
      cursor: pointer; transition: transform .04s ease, border-color .2s ease, box-shadow .2s ease;
    }
    button.primary { border-color: #1f334f; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
    button:hover { transform: translateY(-1px); border-color: #314462; }
    .canvas-wrap { padding: 12px; overflow: hidden; cursor: grab; }
    .canvas-wrap:active { cursor: grabbing; }
    .toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #0f1422; }
    .badge { font-size: 12px; color: var(--muted); padding: 4px 8px; border: 1px dashed var(--line); border-radius: 999px; }
    canvas { width: 100%; height: auto; display: block; background: #0a0f1b; }
    .legend { font-size: 12px; color: var(--muted); padding: 10px 12px; display: flex; gap: 16px; flex-wrap: wrap; }
    .legend span { display: inline-flex; align-items: center; gap: 6px; }
    .chip { width: 14px; height: 2px; background: #5eead4; display: inline-block; }
    .chip2 { width: 14px; height: 2px; background: #8ab4ff; display: inline-block; }