/* Custom form controls — same look in Chromium and WebKit/Safari. No native "Datei auswählen". */

.file-drop{
  position:relative;display:flex;align-items:center;gap:12px;
  border:1px dashed var(--line-2);padding:14px 14px;min-height:56px;cursor:pointer;
  background:rgba(255,255,255,.02)
}
.file-drop:hover,.file-drop.is-over{border-color:var(--accent);background:rgba(255,255,255,.06)}
.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.file-drop .file-cta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.file-drop .file-name{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Hide leftover native file buttons if a raw input remains */
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  display:none;appearance:none;-webkit-appearance:none
}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:8px 0;padding:0
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.28);border:0}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent);
  border:0;border-radius:0;margin-top:-6px;box-shadow:0 0 0 2px var(--bg)
}
input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.28);border:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border:0;border-radius:0}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:var(--hair);font-size:14px}
.toggle-row input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.toggle-row .switch,.switch{
  display:inline-block;box-sizing:border-box;width:40px;height:22px;border:1px solid rgba(255,255,255,.28);
  position:relative;flex-shrink:0;background:rgba(255,255,255,.14);border-radius:11px;display:inline-block;box-sizing:border-box
}
.toggle-row .switch::after,.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--muted);transition:transform .15s var(--ease),background .15s
}
.toggle-row input:checked + .switch,.toggle-row:has(input:checked) .switch,
label:has(input:checked) .switch{border-color:var(--accent);background:rgba(255,255,255,.2)}
.toggle-row input:checked + .switch::after,.toggle-row:has(input:checked) .switch::after,
label:has(input:checked) .switch::after{transform:translateX(16px);background:var(--accent)}

.select-wrap{position:relative}
.select-wrap select{
  appearance:none;-webkit-appearance:none;width:100%;background:transparent;
  border:0;border-bottom:1px solid var(--line-2);padding:10px 28px 10px 0;border-radius:0
}
.select-wrap::after{
  content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);pointer-events:none
}

input[type=color]{appearance:none;-webkit-appearance:none;width:48px;height:28px;border:1px solid var(--line-2);padding:0;background:transparent;border-radius:0}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:0}

.err,#err{color:var(--no);font-family:var(--mono);font-size:12px;min-height:16px}


input,select,textarea,button{appearance:none;-webkit-appearance:none}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none}