:root{
      --bg:#0b1016;
      --panel:#131a23;
      --panel2:#182230;
      --text:#e8f0ff;
      --muted:#9fb0c9;
      --line:#263244;
      --accent:#63d8ff;
      --accent2:#8effc8;
      --danger:#ff8b8b;
    }
    *{box-sizing:border-box}
    html,body{
      margin:0;
      width:100%;
      height:100%;
      overflow:hidden;
      background:var(--bg);
      color:var(--text);
      font:14px/1.4 Arial, Helvetica, sans-serif;
    }
    #app{
      display:grid;
      grid-template-columns:360px 1fr;
      width:100%;
      height:100%;
    }
    #sidebar{
      background:linear-gradient(180deg, var(--panel), var(--panel2));
      border-right:1px solid var(--line);
      padding:14px;
      overflow:auto;
    }
    #viewer{
      position:relative;
      min-width:0;
      min-height:0;
    }
    #scene{
      width:100%;
      height:100%;
      display:block;
      background:#05080d;
    }
    .block{
      background:rgba(255,255,255,0.03);
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px;
      margin-bottom:12px;
      box-shadow:0 8px 22px rgba(0,0,0,0.22);
    }
    .title{
      font-size:18px;
      font-weight:700;
      margin:0 0 10px 0;
      color:#f4f8ff;
    }
    .subtitle{
      font-size:12px;
      color:var(--muted);
      margin-bottom:10px;
    }
    label{
      display:block;
      margin:8px 0 4px;
      color:#dbe7ff;
    }
    input, select, button{
      width:100%;
      padding:9px 10px;
      border-radius:10px;
      border:1px solid var(--line);
      background:#0f1520;
      color:var(--text);
      outline:none;
    }
    input[type="checkbox"]{
      width:auto;
      margin-right:8px;
    }
    .row{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .row > *{
      flex:1;
    }
    button{
      cursor:pointer;
      background:linear-gradient(180deg, #183247, #122535);
    }
    button:hover{
      border-color:#3b5675;
    }
    .stat {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px dashed rgba(255,255,255,0.08);
        align-items: start;
    }

    .stat:last-child {
        border-bottom: none;
    }

    .stat .label {
        color: var(--muted);
        min-width: 0;
    }

    .stat .value {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        line-height: 1.25;
    }
    .muted{ color:var(--muted); }
    .pill{
      display:inline-block;
      padding:2px 8px;
      border-radius:999px;
      background:rgba(99,216,255,0.12);
      color:var(--accent);
      border:1px solid rgba(99,216,255,0.22);
      font-size:12px;
    }
    #hud{
        position:absolute;
        left:14px;
        bottom:14px;
        min-width:260px;
        max-width:520px;
        background:rgba(7,11,17,0.82);
        border:1px solid var(--line);
        border-radius:14px;
        padding:12px;
        backdrop-filter: blur(10px);
        box-shadow:0 8px 30px rgba(0,0,0,0.35);
        pointer-events:none;
    }
    #status{
        position:absolute;
        top:14px;
        right:14px;
        background:rgba(7,11,17,0.82);
        border:1px solid var(--line);
        border-radius:12px;
        padding:10px 12px;
        min-width:220px;
        backdrop-filter: blur(8px);
    }
    .toggle{
        display:flex;
        align-items:center;
        gap:8px;
        margin:8px 0;
    }
    .small{
        font-size:12px;
    }
    pre{
        white-space:pre-wrap;
        word-break:break-word;
        margin:0;
        font-size:12px;
        color:#dbe7ff;
    }
    #hexOverlay{
        position:absolute;
        top:14px;
        left:14px;
        min-width:240px;
        max-width:320px;
        background:rgba(7,11,17,0.82);
        border:1px solid var(--line);
        border-radius:12px;
        padding:10px 12px;
        backdrop-filter: blur(8px);
        box-shadow:0 8px 30px rgba(0,0,0,0.35);
        pointer-events:none;
        z-index:5;
    }
    .block details {
  margin-top: 6px;
}

.block summary {
  cursor: pointer;
  font-weight: 600;
}

.block .small.muted {
  line-height: 1.4;
  margin-top: 6px;
}

.hidden { display: none; }

.feature-card{
  position:absolute;
  right:14px;
  bottom:90px;
  width:360px;
  max-height:60vh;
  overflow:auto;
  background:rgba(7,11,17,0.92);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  backdrop-filter: blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  z-index:8;
}

.feature-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}