/* Buttons */
.btn{
  background:var(--btn);
  border:1px solid #2a2f43;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  color:var(--text);
  font-weight:600;
  transition:background .12s, border-color .12s;
}
.btn:hover{ background:var(--btnHover); }
.btn.danger{ color:var(--danger); border-color:#3a2b2b; }

label.btn{ display:inline-flex; align-items:center; }
header input[type=file]{ display:none; }
header .btn + .btn,
header .btn + label.btn,
label.btn + .btn{ margin-left:8px; }

/* Chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--btn);
  border:1px solid #2a2f43;
  cursor:pointer;
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.chip:hover{ background:var(--btnHover); border-color:#3a4266; }
.chip.active{
  background:var(--btnActive);
  box-shadow:inset 0 0 0 2px var(--accent);
  border-color:#3f4c80;
}
.chip .swatch{
  width:14px; height:14px;
  border-radius:3px;
  border:1px solid #0003;
}

/* Inputs */
.prop{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  margin:8px 0;
}
.prop input[type=number],
.prop input[type=text]{
  background:#0b0e16;
  border:1px solid #2a2f43;
  color:var(--text);
  padding:6px 8px;
  border-radius:8px;
}
.prop input[type=number]{ width:84px; }

.search-input{
  padding:10px 28px 10px 12px;
  width:100%;
  border:2px solid #3a4266;
  background:#0b0e16;
  border-radius:8px;
}

.prop.search-container{
  grid-template-columns:auto 1fr;
  margin:12px 0;
  gap:8px;
}

.search-wrapper{ position:relative; }

.clear-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  padding:0;
}

/* Color picker */
input[type="color"]{
  -webkit-appearance:none;
  appearance:none;
  width:42px; height:32px;
  padding:0;
  background:#0b0e16;
  border:1px solid #2a2f43;
  border-radius:8px;
  cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; border-radius:8px; }
input[type="color"]::-webkit-color-swatch{ border:none; border-radius:7px; }
input[type="color"]::-moz-color-swatch{ border:none; border-radius:7px; }

/* Toggles & misc */
.toggle{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
  background:#0b0e16;
  border:1px solid #2a2f43;
  color:#b6c0d8;
}