/* pv-app-controls.css — Toggles, TH-Picker, Upload, Intro Input */

.pv-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--overlay-subtle); border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); cursor: pointer; user-select: none; }
.pv-toggle-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pv-toggle-switch { width: 36px; height: 20px; background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 10px; position: relative; transition: background var(--transition-normal); flex-shrink: 0; }
.pv-toggle-switch.on { background: var(--accent); }
.pv-toggle-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--knob-bg); border-radius: 50%; transition: transform var(--transition-normal); box-shadow: 0 1px 3px var(--overlay-bg); }
.pv-toggle-switch.on .pv-toggle-knob { transform: translateX(16px); }

.pv-th-picker { position: relative; width: 72px; height: 52px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); flex-shrink: 0; }
.pv-th-picker-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--overlay-subtle); border: 1.5px solid var(--border); position: absolute; cursor: pointer; transition: all var(--transition-fast); }
.pv-th-picker-dot:hover  { border-color: var(--accent); transform: scale(1.2); }
.pv-th-picker-dot.active { background: var(--accent); border-color: var(--accent); }
.pv-th-picker-dot[data-pos="1"] { top: 8px;    left: 8px;  }
.pv-th-picker-dot[data-pos="2"] { top: 8px;    right: 8px; }
.pv-th-picker-dot[data-pos="3"] { bottom: 8px; left: 8px;  }
.pv-th-picker-dot[data-pos="4"] { bottom: 8px; right: 8px; }

.pv-intro-input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: 12px; font-family: var(--font-mono); color: var(--text); outline: none; transition: border-color var(--transition-fast); width: 100%; }
.pv-intro-input:focus { border-color: var(--accent); }

.pv-upload-compact { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; }
.pv-upload-compact-bar-wrap { width: 70px; height: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 2px; overflow: hidden; }
.pv-upload-compact-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width var(--transition-slow); }

.pv-upload-full { background: color-mix(in srgb, var(--accent) 5%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); }
.pv-upload-full-bar-wrap { width: 100%; height: 6px; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 3px; overflow: hidden; }
.pv-upload-full-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width var(--transition-slow); }
.pv-upload-spinner { width: 10px; height: 10px; border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: pv-spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes pv-spin { to { transform: rotate(360deg); } }