html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      background: radial-gradient(circle at top, #112344 0%, #081121 45%, #03070d 100%);
      color: #fff;
    }

    * { box-sizing: border-box; }

    #app {
      position: fixed;
      inset: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 12px;
      padding: 12px;
    }

    #viewPanel {
      position: relative;
      min-width: 0;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.14);
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
      box-shadow: 0 12px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    #threeWrap {
      position: absolute;
      inset: 0;
    }

    #titleBox {
      position: absolute;
      left: 18px;
      right: 18px;
      top: 14px;
      z-index: 10;
      text-align: center;
      background: rgba(7, 22, 44, 0.78);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 14px;
      padding: 10px 14px;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }

    #titleBox h1 {
      margin: 0 0 6px 0;
      font-size: 28px;
      color: #ffe77a;
      line-height: 1.15;
    }

    #titleBox .sub {
      color: #deebff;
      font-size: 14px;
      line-height: 1.4;
      max-width: 760px;
      margin: 0 auto;
    }

    #statusBox {
      position: absolute;
      left: 18px;
      bottom: 18px;
      z-index: 10;
      min-width: 300px;
      max-width: 520px;
      background: rgba(8, 15, 27, 0.70);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.45;
      color: #e6efff;
      backdrop-filter: blur(5px);
    }

    #controlPanel {
      border-radius: 18px;
      overflow-y: auto;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(4, 10, 22, 0.92);
      box-shadow: 0 12px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
      padding: 14px;
    }

    .panelTitle {
      font-size: 22px;
      font-weight: 700;
      color: #8dd7ff;
      margin-bottom: 14px;
    }

    .sectionTitle {
      margin: 14px 0 10px;
      font-size: 15px;
      font-weight: 700;
      color: #ffe260;
    }

    .box {
      margin-bottom: 12px;
      padding: 12px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.08);
    }

    .controlRow {
      display: grid;
      grid-template-columns: 1fr 120px 52px;
      column-gap: 10px;
      align-items: center;
      margin-bottom: 12px;
    }

    .controlRow label {
      font-size: 13px;
      color: #d6e8ff;
      line-height: 1.2;
    }

    .controlRow input[type="range"] {
      width: 100%;
      accent-color: #68d3ff;
    }

    .valueBox {
      text-align: right;
      font-weight: 700;
      color: #fff;
      font-size: 13px;
      white-space: nowrap;
    }

    .btnGrid2, .btnGrid3 {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .btnGrid2 { grid-template-columns: 1fr 1fr; }
    .btnGrid3 { grid-template-columns: 1fr 1fr 1fr; }

    button {
      border: none;
      border-radius: 10px;
      height: 38px;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
    }

    .btnBlue   { background: #1d4f91; }
    .btnGreen  { background: #1d7b53; }
    .btnOrange { background: #9b6315; }
    .btnRed    { background: #8f2f2f; }
    .btnTeal   { background: #126f68; }
    .btnBrown  { background: #7a5422; }

    .checkRow {
      margin: 8px 0;
      font-size: 14px;
      color: #eaf2ff;
    }

    .readout {
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.5;
      color: #eef5ff;
      background: rgba(255,255,255,0.05);
      border-radius: 10px;
      padding: 10px;
    }

    .smallNote {
      margin-top: 10px;
      font-size: 12px;
      color: #cad9f8;
      line-height: 1.45;
    }
    .panelHeaderRow{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        margin-bottom:12px;
      }
      
      .panelHeaderRow .panelTitle{
        margin-bottom:0;
      }
      
      .miniInfoBtn{
        width:auto;
        min-width:110px;
        height:36px;
        padding:0 14px;
        border:none;
        border-radius:10px;
        background:#176f63;
        color:#fff;
        font-size:14px;
        font-weight:700;
        cursor:pointer;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
      }
      
      .miniInfoBtn:hover{
        filter:brightness(1.08);
      }