/* ── cube ID row ─────────────────────────────────────────────────── */
.cube-id-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  8px;
  padding:     6px 8px;
  background:  #0d1020;
  border:      1px solid #1e2840;
  border-radius: 6px;
}
.cube-id-label {
  font-size:      9px;
  color:          #4a6a9a;
  font-family:    monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space:    nowrap;
}
.cube-id-val {
  flex:           1;
  font-family:    monospace;
  font-size:      11px;
  font-weight:    bold;
  color:          #7c9ef8;
  letter-spacing: 0.12em;
}
.share-toggle {
  padding:       3px 8px;
  font-size:     10px;
  font-family:   monospace;
  background:    #1a2a4a;
  color:         #4a9ef8;
  border:        1px solid #2a4a7a;
  border-radius: 4px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.15s;
}
.share-toggle:hover { background:#2a3a6a; }

/* ── share panel ─────────────────────────────────────────────────── */
.share-panel {
  display:       none;
  margin-top:    6px;
  padding:       10px;
  background:    #0a0c18;
  border:        1px solid #1e2840;
  border-radius: 6px;
}
.share-panel.open { display:block; }

.share-title {
  font-size:      9px;
  color:          #4a6a9a;
  font-family:    monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  6px;
}
.share-url {
  font-family:   monospace;
  font-size:     9px;
  color:         #3a5a8a;
  word-break:    break-all;
  margin-bottom: 8px;
  padding:       4px 6px;
  background:    #0d0f14;
  border-radius: 3px;
  border:        1px solid #1a2840;
  min-height:    18px;
}

/* ── share buttons grid ──────────────────────────────────────────── */
.share-btns {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   5px;
}

.sbtn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 8px;
  border-radius: 5px;
  border:        none;
  cursor:        pointer;
  font-family:   monospace;
  font-size:     10px;
  font-weight:   bold;
  line-height:   1;
  transition:    opacity 0.15s, transform 0.1s;
  white-space:   nowrap;
}
.sbtn:hover  { opacity:0.85; transform:translateY(-1px); }
.sbtn:active { transform:translateY(0); }

/* icon wrapper — fixed size so SVG always shows */
.sbtn-ico {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  width:       14px;
  height:      14px;
}
.sbtn-ico svg {
  width:  14px;
  height: 14px;
  display: block;
}

.sbtn-fb   { background:#1877f2; color:#fff; }
.sbtn-tw   { background:#000000; color:#fff; }
.sbtn-wa   { background:#25d366; color:#fff; }
.sbtn-li   { background:#0a66c2; color:#fff; }
.sbtn-pt   { background:#e60023; color:#fff; }
.sbtn-copy {
  background: #1e2840;
  color:      #7c9ef8;
  border:     1px solid #2a3a5a;
  grid-column: span 2;
  justify-content: center;
}
.sbtn-copy:hover { background:#253550; }




/* ── projection view grid (full-width 2-col) ─────────────────────── */
.view-proj-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4px;
  margin-bottom:         8px;
}

/* ── orthographic label ──────────────────────────────────────────── */
.view-ortho-label {
  font-size:      8px;
  color:          #3a5a8a;
  font-family:    monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom:  4px;
  margin-top:     2px;
}

/* ── orthographic view grid (2 rows × 3 small icons) ────────────── */
.view-ortho-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   4px;
  margin-bottom:         4px;
}

.ovbtn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            2px;
  padding:        5px 2px;
  background:     #0d1020;
  border:         1px solid #1e2840;
  border-radius:  5px;
  cursor:         pointer;
  transition:     background 0.15s, border-color 0.15s;
  min-height:     38px;
}
.ovbtn:hover {
  background:   #1a2a4a;
  border-color: #3a5a8a;
}
.ovbtn.active {
  background:   #1a2a4a;
  border-color: #4a9ef8;
}
.ovico {
  font-size:  13px;
  line-height: 1;
  color:      #4a9ef8;
}
.ovlbl {
  font-size:   7px;
  font-family: monospace;
  color:       #4a6a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.ovbtn.active .ovlbl { color:#7c9ef8; }
.ovbtn.active .ovico { color:#a0c8ff; }

/* ── section header row (title + reset button inline) ────────────── */
.sec-header-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   6px;
}
.sec-header-row h3 {
  margin: 0;
}

/* ── small action button ─────────────────────────────────────────── */
.abtn-sm {
  padding:       3px 8px;
  font-size:     9px;
  font-family:   monospace;
  background:    #1a2a4a;
  color:         #4a9ef8;
  border:        1px solid #2a4a7a;
  border-radius: 4px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.15s;
}
.abtn-sm:hover { background:#253550; }



/* ── visual style grid ───────────────────────────────────────────── */
.vs-grid {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   6px;
  margin-bottom:         4px;
}

.vsbtn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  padding:        6px 4px 5px;
  background:     #0a0c18;
  border:         1px solid #1e2840;
  border-radius:  6px;
  cursor:         pointer;
  transition:     background 0.15s, border-color 0.15s;
}
.vsbtn:hover {
  background:   #141828;
  border-color: #3a5a8a;
}
.vsbtn.active {
  background:   #0d1a30;
  border-color: #4a9ef8;
  box-shadow:   0 0 0 1px #4a9ef822;
}

.vs-preview {
  width:  36px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vs-preview svg {
  width:  36px;
  height: 28px;
}

.vs-label {
  font-size:      7px;
  font-family:    monospace;
  color:          #4a6a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space:    nowrap;
}
.vsbtn.active .vs-label { color:#7c9ef8; }



/* ── visual style — single row of 3 ─────────────────────────────── */
.vs-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   5px;
  margin-bottom:         4px;
}

.vsbtn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  padding:        6px 3px 5px;
  background:     #0a0c18;
  border:         1px solid #1e2840;
  border-radius:  6px;
  cursor:         pointer;
  transition:     background 0.15s, border-color 0.15s;
  min-width:      0;
}
.vsbtn:hover {
  background:   #141828;
  border-color: #3a5a8a;
}
.vsbtn.active {
  background:   #0d1a30;
  border-color: #4a9ef8;
  box-shadow:   0 0 0 1px #4a9ef822;
}

.vs-preview {
  width:   40px;
  height:  30px;
  display: flex;
  align-items:     center;
  justify-content: center;
  flex-shrink: 0;
}
.vs-preview svg {
  width:  40px;
  height: 30px;
}

.vs-label {
  font-size:      7px;
  font-family:    monospace;
  color:          #4a6a9a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space:    nowrap;
  line-height:    1;
}
.vsbtn.active .vs-label { color: #7c9ef8; }4



/* ── settings row ────────────────────────────────────────────────── */
.srow {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  gap:            8px;
  margin-bottom:  7px;
  min-height:     22px;
}
.srow label {
  display:    flex;
  flex-direction: column;
  font-size:  10px;
  color:      #4a6a9a;
  flex:       1;
  min-width:  0;
  line-height:1.2;
}
.srow-hint {
  font-size:  8px;
  color:      #2a3a5a;
  font-style: italic;
}
.srow-ctrl {
  display:     flex;
  align-items: center;
  gap:         5px;
  flex-shrink: 0;
}
.sval {
  font-family: monospace;
  font-size:   10px;
  color:       #7c9ef8;
  min-width:   22px;
  text-align:  right;
}
.srow input[type=range] {
  width:  80px;
  cursor: pointer;
}